@extends('layouts.exat')
@section('title', 'Nouveau groupe')

@section('content')
<form method="POST" action="{{ route('groupes.store') }}" class="mx-auto max-w-xl">
    @csrf
    <div class="mb-4"><a href="{{ route('utilisateurs.index', ['onglet' => 'groupes']) }}" class="inline-flex rounded-lg p-2 text-slate-500 hover:bg-slate-100" aria-label="Retour"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg></a></div>
    <section class="rounded-xl bg-white p-5 ring-1 ring-slate-200 space-y-3">
        <div><label class="mb-1 block text-[11px] text-slate-400">Libellé</label><input name="libelle" value="{{ old('libelle') }}" required class="w-full rounded-lg border-slate-200 text-sm"></div>
        <div><label class="mb-1 block text-[11px] text-slate-400">Description</label><input name="description" value="{{ old('description') }}" class="w-full rounded-lg border-slate-200 text-sm"></div>
        <div><label class="inline-flex items-center gap-2 text-sm text-slate-700"><input type="checkbox" name="actif" value="1" checked class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500"> Groupe actif</label></div>
    </section>
    <div class="mt-5 flex justify-end"><button class="inline-flex h-10 items-center rounded-lg bg-emerald-600 px-4 text-sm font-medium text-white hover:bg-emerald-700">Créer</button></div>
</form>
@endsection