@php
    $q = $q ?? '';
    $level = $level ?? 'alle';
    $chips = [
        'alle' => 'Alle',
        'info' => 'Info',
        'warn' => 'Warnung',
        'kritisch' => 'Kritisch',
    ];
@endphp

<x-layouts.app title="Audit-Log" 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">Audit-Log</div>
                <div class="mt-1 text-sm text-rk-slate">Sicherheitsrelevante Ereignisse & Änderungen (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="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="User, Aktion, IP, Objekt…">
                </div>

                <div class="lg:col-span-6 flex flex-wrap gap-2 items-center pt-1">
                    <span class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider mr-1">Level:</span>
                    @foreach ($chips as $k => $label)
                        <a href="{{ route('security.audit.index', ['level' => $k]) }}"
                            class="rounded-full px-3 py-1 text-xs font-semibold border
                           {{ $level === $k ? 'bg-rk-red text-white border-transparent' : 'bg-white border-rk text-rk-charcoal hover:bg-neutral-50' }}">
                            {{ $label }}
                        </a>
                    @endforeach

                    <div class="ml-auto flex gap-2">
                        <a href="{{ route('security.audit.index') }}"
                            class="rounded-2xl border border-rk bg-white px-4 py-2 text-xs font-semibold hover:bg-neutral-50">
                            Reset
                        </a>
                        <button
                            class="rounded-2xl bg-rk-red px-4 py-2 text-xs font-semibold text-white hover:bg-rk-red-dark">
                            Filtern
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <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">Zeit</th>
                            <th class="py-3 px-5 text-left">Benutzer</th>
                            <th class="py-3 px-5 text-left">Aktion</th>
                            <th class="py-3 px-5 text-left">Objekt</th>
                            <th class="py-3 px-5 text-left">IP</th>
                            <th class="py-3 px-5 text-left">Level</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        <tr class="hover:bg-neutral-50">
                            <td class="py-4 px-5 text-rk-slate">Heute, 08:12</td>
                            <td class="py-4 px-5 font-medium">max@rk.at</td>
                            <td class="py-4 px-5">Rolle geändert</td>
                            <td class="py-4 px-5 text-rk-slate">User: test@rk.at</td>
                            <td class="py-4 px-5 text-rk-slate">10.0.0.12</td>
                            <td class="py-4 px-5">
                                <span
                                    class="inline-flex items-center rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700 border border-amber-200">Warnung</span>
                            </td>
                        </tr>

                        <tr class="hover:bg-neutral-50">
                            <td class="py-4 px-5 text-rk-slate">Gestern, 23:01</td>
                            <td class="py-4 px-5 font-medium">system</td>
                            <td class="py-4 px-5">Login fehlgeschlagen</td>
                            <td class="py-4 px-5 text-rk-slate">User: unknown</td>
                            <td class="py-4 px-5 text-rk-slate">10.0.0.99</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">Kritisch</span>
                            </td>
                        </tr>

                        <tr class="hover:bg-neutral-50">
                            <td class="py-4 px-5 text-rk-slate">20.01., 11:22</td>
                            <td class="py-4 px-5 font-medium">graz-umgebung@rk.at</td>
                            <td class="py-4 px-5">Bestellung erstellt</td>
                            <td class="py-4 px-5 text-rk-slate">Order #B-1042</td>
                            <td class="py-4 px-5 text-rk-slate">10.0.0.44</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">Info</span>
                            </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 24</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>