@extends('layouts.app')

@section('titre', 'Ma classe')

@section('contenu')
    <div class="mx-auto max-w-4xl px-5 py-10">
        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">{{ $classe->nom }}</h1>
        @if ($classe->etablissement)
            <p class="mt-1 font-semibold" style="color:var(--sy-muted)">{{ $classe->etablissement->nom }}</p>
        @endif

        <section class="mt-8">
            <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Annonces</h2>
            @if ($classe->annonces->isEmpty())
                <p class="mt-3 font-semibold" style="color:var(--sy-muted)">Aucune annonce pour l'instant.</p>
            @else
                <ul class="mt-3 grid gap-3">
                    @foreach ($classe->annonces as $annonce)
                        <li class="rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
                            <p class="font-extrabold" style="color:var(--sy-ink)">{{ $annonce->titre }}</p>
                            <p class="mt-1 font-semibold" style="color:var(--sy-ink)">{{ $annonce->contenu }}</p>
                            <p class="mt-2 font-mono text-xs font-semibold" style="color:var(--sy-muted)">{{ $annonce->auteur->name }} · {{ $annonce->created_at->translatedFormat('d/m à H:i') }}</p>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>

        <section class="mt-10">
            <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Camarades</h2>
            <ul class="mt-3 grid gap-2 sm:grid-cols-2">
                @foreach ($camarades as $camarade)
                    <li class="flex items-center gap-3 rounded-xl border p-3" style="border-color:var(--sy-line);background:var(--sy-surface)">
                        <span style="width:8px;height:8px;border-radius:999px;background:{{ $camarade->estEnLigne() ? '#3C8A5A' : 'var(--sy-line)' }}" aria-hidden="true"></span>
                        <span class="font-bold" style="color:var(--sy-ink)">{{ $camarade->nomAffiche() }}</span>
                        @if ($camarade->id === $eleve->id)
                            <span class="font-mono text-xs font-semibold" style="color:var(--sy-muted)">(toi)</span>
                        @elseif ($camarade->estEnLigne())
                            <span class="font-mono text-xs font-semibold" style="color:var(--sy-muted)">en ligne</span>
                        @endif
                    </li>
                @endforeach
            </ul>
            <p class="mt-3 text-sm font-semibold" style="color:var(--sy-muted)">Pour écrire à ton prof, utilise le chat en bas à droite — pas de message entre camarades.</p>
        </section>

        @if ($classe->etablissement?->url_ent)
            <p class="mt-10">
                <a href="{{ $classe->etablissement->url_ent }}" class="font-bold underline" style="color:var(--sy-blue)">Accéder à l'ENT de l'établissement →</a>
            </p>
        @endif
    </div>
@endsection