@php
    $q = $q ?? '';
    $type = $type ?? 'alle';
    $status = $status ?? 'alle';
@endphp

<x-layouts.app title="Benutzer" userRole="Bezirksstelle">
    <div class="flex flex-col gap-4">

        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Benutzer</div>
                <div class="mt-1 text-sm text-rk-slate">Accounts für Bezirksstelle & Ortstellen (UI).</div>
            </div>

            <div class="flex items-center gap-2">
                <button
                    class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                    Import (später)
                </button>
                <button class="btn-rk-soft-green">
                    Benutzer anlegen
                </button>
            </div>
        </div>

        <div class="rounded-3xl bg-white border border-rk p-4 shadow-sm">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 lg:items-end">
                <div class="lg:col-span-6">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Suche</label>
                    <input value="{{ $q }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm outline-none focus:ring-2 ring-rk focus:border-transparent"
                        placeholder="Name, E-Mail, Ortstelle…">
                </div>

                <div class="lg:col-span-3">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Typ</label>
                    <select class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        <option @selected($type === 'alle')>Alle</option>
                        <option @selected($type === 'bezirksstelle')>Bezirksstelle</option>
                        <option @selected($type === 'ortstelle')>Ortstelle</option>
                    </select>
                </div>

                <div class="lg:col-span-3">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Status</label>
                    <select class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        <option @selected($status === 'alle')>Alle</option>
                        <option @selected($status === 'aktiv')>Aktiv</option>
                        <option @selected($status === 'gesperrt')>Gesperrt</option>
                    </select>
                </div>

                <div class="lg:col-span-12 flex justify-end gap-2 pt-2">
                    <a href="{{ route('ui.security.users') }}"
                        class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                        Reset
                    </a>
                    <button
                        class="rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark">
                        Filtern
                    </button>
                </div>
            </div>
        </div>

        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="px-5 py-4 flex items-center justify-between">
                <div>
                    <div class="text-sm font-semibold">Übersicht</div>
                    <div class="text-xs text-rk-slate">Letzte Anmeldung, Rolle, Status (UI).</div>
                </div>
                <button
                    class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                    Export
                </button>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="text-xs text-rk-slate/80 uppercase tracking-wider bg-neutral-50">
                        <tr class="border-t border-b border-rk">
                            <th class="py-3 px-5 text-left">Benutzer</th>
                            <th class="py-3 px-5 text-left">Typ</th>
                            <th class="py-3 px-5 text-left">Rolle</th>
                            <th class="py-3 px-5 text-left">Letzte Anmeldung</th>
                            <th class="py-3 px-5 text-left">Status</th>
                            <th class="py-3 px-5 text-right">Aktion</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        <tr class="hover:bg-neutral-50">
                            <td class="py-4 px-5">
                                <div class="font-semibold">Max Muster</div>
                                <div class="text-xs text-rk-slate">max@rk.at</div>
                            </td>
                            <td class="py-4 px-5 text-rk-slate">Bezirksstelle</td>
                            <td class="py-4 px-5">
                                <span
                                    class="inline-flex items-center rounded-full bg-neutral-100 px-3 py-1 text-xs font-semibold text-rk-slate border border-rk">
                                    Bezirksstelle Admin
                                </span>
                            </td>
                            <td class="py-4 px-5 text-rk-slate">Heute, 08:12</td>
                            <td class="py-4 px-5">
                                <span
                                    class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700 border border-emerald-200">
                                    Aktiv
                                </span>
                            </td>
                            <td class="py-4 px-5 text-right">
                                <a class="text-rk-red font-semibold hover:underline" href="#">Öffnen</a>
                            </td>
                        </tr>

                        <tr class="hover:bg-neutral-50">
                            <td class="py-4 px-5">
                                <div class="font-semibold">Ortstelle Graz-Umgebung</div>
                                <div class="text-xs text-rk-slate">graz-umgebung@rk.at</div>
                            </td>
                            <td class="py-4 px-5 text-rk-slate">Ortstelle</td>
                            <td class="py-4 px-5">
                                <span
                                    class="inline-flex items-center rounded-full bg-neutral-100 px-3 py-1 text-xs font-semibold text-rk-slate border border-rk">
                                    Ortstelle Admin
                                </span>
                            </td>
                            <td class="py-4 px-5 text-rk-slate">Gestern, 16:12</td>
                            <td class="py-4 px-5">
                                <span
                                    class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700 border border-emerald-200">
                                    Aktiv
                                </span>
                            </td>
                            <td class="py-4 px-5 text-right">
                                <a class="text-rk-red font-semibold hover:underline" href="#">Öffnen</a>
                            </td>
                        </tr>

                        <tr class="hover:bg-neutral-50">
                            <td class="py-4 px-5">
                                <div class="font-semibold">Test User</div>
                                <div class="text-xs text-rk-slate">test@rk.at</div>
                            </td>
                            <td class="py-4 px-5 text-rk-slate">Ortstelle</td>
                            <td class="py-4 px-5">
                                <span
                                    class="inline-flex items-center rounded-full bg-neutral-100 px-3 py-1 text-xs font-semibold text-rk-slate border border-rk">
                                    Ortstelle Benutzer
                                </span>
                            </td>
                            <td class="py-4 px-5 text-rk-slate">—</td>
                            <td class="py-4 px-5">
                                <span
                                    class="inline-flex items-center rounded-full bg-red-50 px-3 py-1 text-xs font-semibold text-red-700 border border-red-200">
                                    Gesperrt
                                </span>
                            </td>
                            <td class="py-4 px-5 text-right">
                                <a class="text-rk-red font-semibold hover:underline" href="#">Öffnen</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="px-5 py-4 flex items-center justify-between border-t border-rk bg-white">
                <div class="text-sm text-rk-slate">Seite 1 von 5</div>
                <div class="flex gap-2">
                    <button
                        class="rounded-2xl border border-rk bg-white px-3 py-2 text-sm hover:bg-neutral-50">Zurück</button>
                    <button
                        class="rounded-2xl border border-rk bg-white px-3 py-2 text-sm hover:bg-neutral-50">Weiter</button>
                </div>
            </div>
        </div>
    </div>
</x-layouts.app>