@extends('layouts.school')
@section('title', 'Classes')
@section('header', 'Classes')
@section('content')
    <div class="mb-6 flex items-center justify-between">
        <p class="text-sm text-gray-500">@if($academicYear) Current: {{ $academicYear->name }} @else No active academic year @endif</p>
        <a href="{{ route('school.classes.create', request()->route('schoolId')) }}" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">+ Add Class</a>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        @forelse($classes as $class)
            <a href="{{ route('school.classes.show', [request()->route('schoolId'), $class->id]) }}" class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 hover:ring-primary-500 transition-colors">
                <h3 class="text-lg font-display font-bold text-gray-900">{{ $class->name }}</h3>
                <p class="mt-1 text-sm text-gray-500">{{ $class->students_count }} students &middot; Capacity: {{ $class->capacity }}</p>
                <p class="mt-1 text-sm text-gray-500">Class Teacher: <span class="font-medium text-gray-700">{{ $class->classTeacher?->name ?? 'Unassigned' }}</span></p>
            </a>
        @empty
            <div class="col-span-3 rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-12 text-center text-sm text-gray-500">
                No classes created yet. Set up your first class to start organizing students.
            </div>
        @endforelse
    </div>
@endsection