{{--
    Drawer de renommage de rôle — partagé, rempli via JS.

    Usage sur un bouton :
        data-kt-drawer-toggle="#drawer_rename_role"
        data-rename-url="{{ route('admin.user-management.roles.update', $role) }}"
        data-rename-name="{{ $role->name }}"
--}}
<div id="drawer_rename_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">Renommer le rôle</h3>
        <button class="kt-drawer-close" data-kt-drawer-dismiss="#drawer_rename_role">
            <i class="ki-outline ki-cross text-lg"></i>
        </button>
    </div>
    <div class="kt-drawer-content kt-scrollable p-5">
        <form id="form_rename_role" method="POST" class="flex flex-col gap-5">
            @csrf
            @method('PUT')
            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Nom du rôle <span class="text-destructive">*</span></label>
                <input id="input_rename_role" name="name" type="text" class="kt-input" autocomplete="off">
            </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_rename_role">
            {{ __('ui.actions.cancel') }}
        </button>
        <x-ui.loading-button type="submit" form="form_rename_role" class="kt-btn-primary"
            loadingText="{{ __('ui.states.saving') }}">
            {{ __('ui.actions.save') }}
        </x-ui.loading-button>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.addEventListener('mousedown', e => {
            const btn = e.target.closest('[data-kt-drawer-toggle="#drawer_rename_role"]');
            if (!btn) return;
            document.getElementById('form_rename_role').action = btn.dataset.renameUrl ?? '';
            document.getElementById('input_rename_role').value = btn.dataset.renameName ?? '';
        });
    });
</script>
@endpush