@php
    $editing = $role->exists;
    $checked = array_map('intval', old('permissions', $granted));
    $checkbox = 'size-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900';
@endphp
<x-admin.layout :title="$editing ? $role->name : __('Add role')">
    <x-admin.page-header :title="$editing ? $role->name : __('Add role')" :subtitle="$editing ? trans_choice(':count admin has this role.|:count admins have this role.', $role->admins()->count()) : null"
                         :back="route('admin.roles.index')" />

    @unless ($canEdit)
        <div class="mb-6 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300">
            {{ $isOwnRole ? __('This is your own role, so another admin has to change it.') : __('You can view this role but not change it.') }}
        </div>
    @endunless

    <form method="POST" action="{{ $editing ? route('admin.roles.update', $role) : route('admin.roles.store') }}" class="grid grid-cols-1 gap-6 lg:grid-cols-3"
          x-data="permissionGrid" @change="refresh()">
        @csrf
        @if ($editing) @method('PUT') @endif

        <fieldset @disabled(! $canEdit) class="space-y-6 lg:col-span-2">
            <x-admin.card :title="__('Permissions')">
                @if ($canEdit)
                    <x-slot:actions>
                        <x-admin.button size="sm" variant="ghost" @click="setAll(true)">{{ __('Select all') }}</x-admin.button>
                        <x-admin.button size="sm" variant="ghost" @click="setAll(false)">{{ __('Clear') }}</x-admin.button>
                    </x-slot:actions>
                @endif
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    {{ __('Most actions also need View to open their page. Firebase, Maps & SMS and payment keys stay with Super Admins.') }}
                </p>
                @error('permissions')<p class="form-error">{{ $message }}</p>@enderror
                @error('permissions.*')<p class="form-error">{{ $message }}</p>@enderror

                <div class="mt-4 divide-y divide-gray-100 dark:divide-gray-800">
                    @foreach ($modules as $module => $permissions)
                        <div data-module class="flex flex-col gap-2 py-3 xl:flex-row xl:items-center xl:gap-4">
                            <label class="flex shrink-0 items-center gap-2 text-sm font-medium xl:w-56">
                                <input type="checkbox" data-module-all @change="setAll($event.target.checked, $el.closest('[data-module]'))" class="{{ $checkbox }}"
                                       @disabled($permissions->pluck('slug')->intersect($grantable)->isEmpty())>
                                {{ \App\Models\Permission::moduleLabel($module) }}
                            </label>
                            <div class="flex flex-wrap gap-x-5 gap-y-2 ps-6 xl:ps-0">
                                @foreach ($permissions as $permission)
                                    <label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                                        <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="{{ $checkbox }}"
                                               @checked(in_array($permission->id, $checked, true)) @disabled(! in_array($permission->slug, $grantable, true))>
                                        {{ $permission->actionLabel() }}
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </x-admin.card>
        </fieldset>

        <x-admin.card :title="__('Role')" class="self-start">
            <fieldset @disabled(! $canEdit) class="space-y-5">
                <x-admin.input name="name" :label="__('Name')" :value="$role->name" required maxlength="50" />
                <x-admin.textarea name="description" :label="__('Description')" :value="$role->description" rows="3" maxlength="255" />
            </fieldset>
            <p class="mt-5 text-sm text-gray-500 dark:text-gray-400">
                {{ __('Permissions') }}: <span class="font-semibold text-gray-900 dark:text-gray-100" x-text="count">{{ count($checked) }}</span> / {{ $modules->flatten(1)->count() }}
            </p>
            @if ($canEdit)
                <div class="mt-5 flex gap-2">
                    <x-admin.button type="submit">{{ $editing ? __('Save changes') : __('Create role') }}</x-admin.button>
                    <x-admin.button variant="secondary" :href="route('admin.roles.index')">{{ __('Cancel') }}</x-admin.button>
                </div>
            @endif
        </x-admin.card>
    </form>
</x-admin.layout>