@extends('layouts.teacher-portal')
@section('title', $class->name)
@section('header', 'My Students — ' . $class->name)

@section('content')
    <div class="mb-5 flex flex-wrap items-center gap-3">
        <a href="{{ route('tportal.classes', $school->id) }}" class="text-sm text-primary-600 hover:text-primary-700">&larr; All my classes</a>
        @if ($isClassTeacher)
            <span class="rounded-full bg-primary-50 px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-wide text-primary-700">Class Teacher</span>
        @endif
        @foreach ($mySubjectsForClass as $subject)
            <span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-[11px] font-medium text-slate-600">Teaches {{ $subject->name }}</span>
        @endforeach
    </div>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-900/5">
        <table class="min-w-full divide-y divide-slate-100">
            <thead class="bg-slate-50">
                <tr>
                    <th class="px-6 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-400">Student</th>
                    <th class="px-6 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-400">Admission No.</th>
                    <th class="px-6 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-400">Gender</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse ($students as $student)
                    <tr class="hover:bg-slate-50">
                        <td class="px-6 py-3.5">
                            <div class="flex items-center gap-3">
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-slate-100 text-xs font-bold text-slate-500">
                                    @if ($student->photo)
                                        <img src="{{ $student->photo_url }}" alt="" class="h-full w-full object-cover">
                                    @else
                                        {{ $student->initials }}
                                    @endif
                                </span>
                                <span class="text-sm font-medium text-slate-800">{{ $student->full_name }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-3.5 text-sm text-slate-500">{{ $student->admission_no }}</td>
                        <td class="px-6 py-3.5 text-sm capitalize text-slate-500">{{ $student->gender ?? '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="3" class="px-6 py-12 text-center text-sm text-slate-400">No active students in this class.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection