{% extends "base.html" %}
{% block title %}Мои студенты{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto" x-data="teacherStudents()" x-init="init()">
  <h1 class="text-2xl font-bold text-slate-900 dark:text-white mb-2">Мои студенты</h1>
  <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Список студентов по закреплённым за вами группам. Профиль открывается только для просмотра.</p>

  <p class="text-center mb-6" x-show="!token"><a href="/login/" class="text-sky-700 dark:text-sky-400">Войдите</a></p>

  <div x-show="token && wrongRole" x-cloak class="rounded-xl border border-amber-200 bg-amber-50 dark:bg-amber-900/20 dark:border-amber-800 p-4 text-sm text-amber-900 dark:text-amber-100">
    Эта страница доступна только преподавателю.
  </div>

  <div x-show="token && !wrongRole && loading" x-cloak class="flex justify-center py-16">
    <div class="h-12 w-12 rounded-full border-4 border-slate-200 dark:border-slate-600 border-t-blue-500 animate-spin"></div>
  </div>

  <p x-show="token && !wrongRole && !loading && detail" x-cloak class="text-rose-600 text-sm" x-text="detail"></p>

  <div x-show="token && !wrongRole && !loading && students.length" x-cloak class="grid gap-3 sm:grid-cols-2">
    <template x-for="s in students" :key="s.user_id">
      <a
        :href="'/teacher/students/' + s.user_id + '/'"
        class="block rounded-xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800/90 p-4 min-h-[88px] shadow-sm hover:border-blue-400/60 hover:shadow-md transition"
      >
        <p class="font-semibold text-slate-900 dark:text-white" x-text="(s.last_name||'') + ' ' + (s.first_name||'') + (s.patronymic ? ' ' + s.patronymic : '')"></p>
        <p class="text-xs text-slate-500 mt-1">Группа: <span x-text="s.student_group || '—'"></span></p>
        <p class="text-xs text-slate-500 truncate mt-0.5" x-text="s.email"></p>
      </a>
    </template>
  </div>

  <p x-show="token && !wrongRole && !loading && !detail && !students.length" x-cloak class="text-slate-600 dark:text-slate-400 text-sm">
    Студентов в ваших группах пока нет. Проверьте, что при регистрации указаны те же названия групп, что и у студентов.
  </p>
</div>
<script>
function teacherStudents() {
  return {
    token: localStorage.getItem('access'),
    role: null,
    wrongRole: false,
    loading: true,
    detail: '',
    students: [],
    init() {
      try {
        const p = JSON.parse(localStorage.getItem('payload') || '{}');
        this.role = p.role || null;
      } catch (e) {}
      if (!this.token) { this.loading = false; return; }
      if (this.role !== 'teacher') {
        this.wrongRole = true;
        this.loading = false;
        return;
      }
      this.load();
    },
    async load() {
      this.loading = true;
      this.detail = '';
      try {
        const r = await window.PortfolioAPI.apiFetch('/api/teacher/students/', {
          headers: { 'Content-Type': 'application/json' },
        });
        const d = await r.json().catch(() => ({}));
        if (!r.ok) {
          this.detail = window.PortfolioAPI.parseDetail(d);
          this.students = [];
          return;
        }
        this.students = d.students || [];
        if (d.detail && !this.students.length) this.detail = d.detail;
      } catch (e) {
        this.detail = 'Ошибка загрузки списка.';
      } finally {
        this.loading = false;
      }
    },
  };
}
</script>
{% endblock %}