@extends('layouts.app')

@section('titre', 'Recherche')

@section('contenu')
    <div class="mx-auto max-w-3xl px-5 py-10">
        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Recherche</h1>
        <p class="mt-2 font-semibold" style="color:var(--sy-muted)">Dans les cours et les labs du catalogue.</p>

        <form action="{{ route('recherche') }}" method="get" class="mt-6 flex gap-2">
            <input type="search" name="q" value="{{ $texte }}" placeholder="Adressage IPv4, routage, chiffrement…" class="flex-1 rounded-xl border border-[#c4c7c5] bg-white px-4 py-2 font-semibold" autofocus>
            <button type="submit" class="inline-flex h-11 items-center rounded-full bg-black px-5 font-bold text-white">Chercher</button>
        </form>

        @if (! $disponible)
            <p class="mt-6 rounded-2xl border p-4 font-semibold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-muted)">
                La recherche n'est pas disponible pour le moment.
            </p>
        @elseif ($texte !== '' && empty($resultats))
            <p class="mt-6 font-semibold" style="color:var(--sy-muted)">Rien trouvé pour « {{ $texte }} ».</p>
        @elseif (! empty($resultats))
            <ul class="mt-6 grid gap-3">
                @foreach ($resultats as $resultat)
                    <li class="rounded-2xl border p-5" style="border-color:var(--sy-line);background:var(--sy-surface)">
                        <p class="font-mono text-xs font-semibold uppercase" style="color:var(--sy-muted)">{{ $resultat['type'] === 'cours' ? 'Cours' : 'Lab' }}</p>
                        @if ($resultat['type'] === 'cours')
                            <a href="{{ route('mes-cours.show', $resultat['identifiant']) }}" class="mt-1 block text-lg font-extrabold underline underline-offset-4" style="color:var(--sy-ink)">{{ $resultat['titre'] }}</a>
                        @else
                            <p class="mt-1 text-lg font-extrabold" style="color:var(--sy-ink)">{{ $resultat['titre'] }}</p>
                        @endif
                        <p class="mt-2 font-semibold" style="color:var(--sy-muted)">{!! $resultat['extrait'] !!}</p>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
@endsection