@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Boletins</h1>
        <p class="text-sm text-gray-600 dark:text-gray-400">Selecione uma turma para emitir boletins individuais.</p>
    </div>

    <x-common.component-card title="Turmas disponíveis">
        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            @forelse ($classrooms as $classroom)
                <div class="rounded-xl border border-gray-100 p-4 shadow-theme-xs dark:border-gray-800">
                    <div class="flex items-start justify-between">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ $classroom->name }}</h3>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $classroom->school?->name ?? 'Sem escola' }}</p>
                            <div class="mt-2 flex flex-wrap gap-2 text-xs text-gray-500">
                                <span class="rounded-full bg-gray-100 px-2 py-1">{{ $classroom->grade ?? 'Série não informada' }}</span>
                                <span class="rounded-full bg-gray-100 px-2 py-1">{{ $classroom->shift ?? 'Turno livre' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <a href="{{ route('boletins.turma', $classroom) }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 hover:border-gray-300 dark:border-gray-800 dark:text-gray-300">
                            Ver alunos
                        </a>
                    </div>
                </div>
            @empty
                <div class="rounded-xl border border-dashed border-gray-200 p-6 text-center text-sm text-gray-500 dark:border-gray-800">
                    Nenhuma turma cadastrada.
                </div>
            @endforelse
        </div>
    </x-common.component-card>
</div>
@endsection