{{-- Edit User Modal --}}
<div
    x-show="showEdit"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-50 flex animate-fade-in items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
    @click.self="cancelEdit()"
    @keydown.escape.window="cancelEdit()"
    role="dialog" aria-modal="true" aria-labelledby="edit-user-title"
    x-cloak>
    <div
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="w-full max-w-lg animate-slide-up rounded-2xl border border-border bg-card text-card-foreground shadow-2xl">

        <div x-show="loadingViewEdit">
            @include('pages.admin.users.partials.skeleton.edit-modal-body')
        </div>
        <div id="edit-modal-body" x-show="!loadingViewEdit"></div>
    </div>
</div>