@php
    $q = $q ?? request('q', '');
@endphp

<x-layouts.app title="Rollen & Rechte" userRole="{{ auth()->user()->isDistrictUser() ? 'Bezirksstelle' : 'Ortstelle' }}">
    <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">Rollen & Rechte</div>
                <div class="mt-1 text-sm text-rk-slate">Rollen anlegen und Berechtigungen verwalten.</div>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('security.roles.create') }}" class="btn-rk-soft-green">
                    Neue Rolle
                </a>
            </div>
        </div>

        <form method="GET" action="{{ route('security.roles.index') }}"
            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-8">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Suche</label>
                    <input name="q" value="{{ $q }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                        placeholder="Rollenname, Label…">
                </div>
                <div class="lg:col-span-4 flex gap-2">
                    <button
                        class="w-full rounded-2xl bg-rk-red px-4 py-3 text-sm font-semibold text-white hover:bg-rk-red-dark transition-rk hover:shadow-button">
                        Filtern
                    </button>
                    <a href="{{ route('security.roles.index') }}"
                        class="w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm font-semibold hover:bg-neutral-50 text-center transition-rk hover:shadow-button">
                        Reset
                    </a>
                </div>
            </div>
        </form>

        <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">Rolle</th>
                            <th class="py-3 px-5 text-left">Scope</th>
                            <th class="py-3 px-5 text-left">Permissions</th>
                            <th class="py-3 px-5 text-right">Aktion</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        @forelse($roles as $r)
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-5">
                                    <div class="font-semibold">{{ $r->label }}</div>
                                    <div class="text-xs text-rk-slate">{{ $r->name }}</div>
                                </td>
                                <td class="py-4 px-5 text-rk-slate">{{ $r->scope }}</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">
                                        {{ (int) $r->permissions_count }}
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <a href="{{ route('security.roles.edit', $r) }}"
                                        class="inline-flex items-center justify-center h-10 w-10 rounded-2xl border border-rk bg-white hover:bg-neutral-50 transition-rk"
                                        title="Bearbeiten" aria-label="Bearbeiten">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
                                            class="text-rk-green">
                                            <path d="M12 20h9" />
                                            <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4 11.5-11.5z" />
                                            <path d="M15 5l4 4" />
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="py-10 px-5 text-center text-rk-slate">Keine Rollen.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="px-5 py-4 border-t border-rk bg-white">
                {{ $roles->links() }}
            </div>
        </div>

    </div>
</x-layouts.app>