{{-- View User Details Modal --}}
<div
    x-show="showView"
    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="showView = false"
    @keydown.escape.window="showView = false"
    role="dialog" aria-modal="true" aria-labelledby="view-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 class="flex items-center justify-between border-b border-border px-6 py-4">
            <h3 id="view-user-title" class="text-base font-semibold text-foreground">{{ __('pages/admin/users.user_details') }}</h3>
            <x-buttons.icon @click.stop="showView = false" type="button">
                <x-heroicon-o-x-mark class="w-5 h-5" />
            </x-buttons.icon>
        </div>

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