@php
    $title = 'Rolle erstellen';
    $pageTitle = 'Rolle erstellen';
    $pageSubtitle = 'Neue Rolle anlegen und Berechtigungen zuweisen.';
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="max-w-3xl space-y-6">
        <form method="POST" action="{{ route('roles.store') }}"
            class="rounded-2xl border border-gray-200 bg-white p-6 space-y-6">
            @csrf

            <div>
                <label class="text-sm font-medium text-gray-800">Name</label>
                <input name="name" value="{{ old('name') }}" required maxlength="50"
                    class="mt-2 w-full rounded-xl border-gray-200 bg-white focus:border-brand focus:ring-brand">
                @error('name')
                    <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <div class="flex items-center justify-between">
                    <div class="text-sm font-semibold text-gray-900">Permissions</div>
                    <div class="text-xs text-gray-500">{{ $permissions->count() }} verfügbar</div>
                </div>

                <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2">
                    @foreach ($permissions as $p)
                        <label class="flex items-center gap-2 rounded-xl border border-gray-200 p-3 hover:bg-gray-50">
                            <input type="checkbox" name="permission_ids[]" value="{{ $p->id }}"
                                class="rounded border-gray-300 text-brand focus:ring-brand"
                                @checked(in_array($p->id, old('permission_ids', []), true))>
                            <span class="text-sm font-semibold text-gray-800">{{ $p->name }}</span>
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="flex items-center justify-end gap-2 border-t border-gray-100 pt-5">
                <a href="{{ route('roles.index') }}"
                    class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                    Abbrechen
                </a>
                <button class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                    Erstellen
                </button>
            </div>
        </form>
    </div>
</x-ux-layout>