@extends('layouts.app')

@section('titre', 'Paramètres')

@section('contenu')
    <div class="mx-auto max-w-2xl px-5 py-10">
        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Paramètres</h1>

        @if (session('parametres_enregistres'))
            <p class="mt-4 rounded-2xl border p-4 font-semibold" style="border-color:var(--sy-line);background:var(--sy-bg);color:var(--sy-ink)">Enregistré.</p>
        @endif

        <form action="{{ route('parametres.update') }}" method="post" class="mt-6 grid gap-8 rounded-2xl border p-6" style="border-color:var(--sy-line);background:var(--sy-surface)">
            @csrf
            <fieldset>
                <legend class="font-extrabold" style="color:var(--sy-ink)">Thème</legend>
                <div class="mt-3 grid gap-2">
                    @foreach (['clair' => 'Clair', 'sombre' => 'Sombre', 'systeme' => 'Suivre l’appareil'] as $valeur => $label)
                        <label class="flex items-center gap-3 font-semibold" style="color:var(--sy-ink)">
                            <input type="radio" name="theme" value="{{ $valeur }}" @checked($theme === $valeur)>
                            {{ $label }}
                        </label>
                    @endforeach
                </div>
            </fieldset>
            <fieldset>
                <legend class="font-extrabold" style="color:var(--sy-ink)">Taille du texte</legend>
                <div class="mt-3 grid gap-2">
                    @foreach (['normal' => 'Normale', 'grand' => 'Grande'] as $valeur => $label)
                        <label class="flex items-center gap-3 font-semibold" style="color:var(--sy-ink)">
                            <input type="radio" name="taille_texte" value="{{ $valeur }}" @checked($tailleTexte === $valeur)>
                            {{ $label }}
                        </label>
                    @endforeach
                </div>
            </fieldset>
            <button type="submit" class="justify-self-start rounded-full px-6 py-3 font-bold text-white" style="background:var(--sy-blue)">Enregistrer</button>
        </form>
    </div>
@endsection