{{--
    Drawer de création de rôle.

    Ouverture : data-kt-drawer-toggle="#drawer_create_role"
--}}
<div id="drawer_create_role" class="kt-drawer kt-drawer-end hidden w-full max-w-[420px]" data-kt-drawer="true">
    <div class="kt-drawer-header">
        <h3 class="kt-drawer-title">Créer un rôle</h3>
        <button class="kt-drawer-close" data-kt-drawer-dismiss="#drawer_create_role">
            <i class="ki-outline ki-cross text-lg"></i>
        </button>
    </div>
    <div class="kt-drawer-content kt-scrollable p-5">
        <form id="form_create_role" method="POST" action="{{ route('admin.user-management.roles.store') }}"
            class="flex flex-col gap-5">
            @csrf
            <input type="hidden" name="_form_id" value="create_role">
            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Nom du rôle <span class="text-destructive">*</span></label>
                <input name="name" type="text" class="kt-input @error('name') border-destructive @enderror"
                    autocomplete="off" value="{{ old('name') }}" placeholder="Ex : Responsable média">
                @error('name') <span class="text-xs text-destructive">{{ $message }}</span> @enderror
                <span class="text-xs text-secondary-foreground mt-1">
                    Le rôle est créé sans permission ; assignez-les ensuite via « Gérer les permissions ».
                </span>
            </div>
        </form>
    </div>
    <div class="kt-drawer-footer justify-end gap-3">
        <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive" data-kt-drawer-dismiss="#drawer_create_role">
            {{ __('ui.actions.cancel') }}
        </button>
        <x-ui.loading-button type="submit" form="form_create_role" class="kt-btn-primary"
            loadingText="{{ __('ui.states.saving') }}">
            Créer
        </x-ui.loading-button>
    </div>
</div>

@if ($errors->any() && old('_form_id') === 'create_role')
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        KTDrawer.getInstance(document.querySelector('#drawer_create_role'))?.show();
    });
</script>
@endpush
@endif