{{-- Create User Modal --}}
<div
    x-show="showCreate"
    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" x-cloak
    @click.self="showCreate = false"
    @keydown.escape.window="showCreate = false"
    aria-modal="true" aria-labelledby="create-user-title">
    <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 animate-slide-up rounded-2xl border border-border bg-card text-card-foreground shadow-2xl max-w-lg">
        {{-- Header --}}
        <div class="flex items-center justify-between border-b border-border px-6 py-4">
            <h3 id="create-user-title" class="text-base font-semibold text-surface-900 dark:text-surface-100">
                {{ __('pages/common.add_new', ['resource' => __('pages/admin/users.heading.singular')]) }}
            </h3>
            <button @click="showCreate = false" type="button" class="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background" aria-label="Close">
                <x-heroicon-o-x-mark class="w-5 h-5" />
            </button>
        </div>

        {{-- Body --}}
        <form id="create-user-form" @submit.prevent="createUser()" class="px-6 py-5 space-y-4">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                <div>
                    <x-forms.label for="first_name" required>{{__('form.label.first_name')}}</x-forms.label>
                    <x-forms.input
                        type="text"
                        id="first_name"
                        name="first_name"
                        x-model="form.first_name"
                        placeholder="{{ __('placeholders.first_name.example') }}"
                        required="true"
                        autocomplete="off" />
                </div>

                <div>
                    <x-forms.label for="last_name" required>{{__('form.label.last_name')}}</x-forms.label>
                    <x-forms.input
                        type="text"
                        id="last_name"
                        name="last_name"
                        x-model="form.last_name"
                        placeholder="{{ __('placeholders.last_name.example') }}"
                        required="true"
                        autocomplete="off" />
                </div>

                <div>
                    <x-forms.label for="email" required>{{__('form.label.email')}}</x-forms.label>
                    <x-forms.input
                        type="email"
                        id="email"
                        name="email"
                        x-model="form.email"
                        placeholder="{{ __('placeholders.email.example') }}"
                        required="true"
                        autocomplete="off" />
                </div>

                <div>
                    <x-forms.label for="phone">{{__('form.label.phone')}}</x-forms.label>
                    <x-forms.input
                        type="tel"
                        id="phone"
                        name="phone"
                        x-model="form.phone"
                        placeholder="{{ __('placeholders.phone.example') }}"
                        x-mask="(999) 999 9999"
                        x-effect="if(form.phone) form.phone = form.phone.replace(/[^0-9]/g, '')" />
                </div>

                <div>
                    <x-forms.label for="status" required>{{__('pages/common.status.label')}}</x-forms.label>


                    <x-forms.select
                        x-model="form.status"
                        name="status"
                        id="status">
                        <option value="active">{{__('pages/common.status.active')}}</option>
                        <option value="inactive">{{__('pages/common.status.inactive')}}</option>
                    </x-forms.select>
                </div>
            </div>

            {{-- Info: default password notice --}}
            <div class="sm:col-span-2 flex items-start gap-2.5 p-3 rounded-lg bg-blue-50 dark:bg-blue-950/40 border border-blue-200 dark:border-blue-800 text-xs text-blue-700 dark:text-blue-300">
                <x-heroicon-o-information-circle class="w-4 h-4 flex-shrink-0 mt-0.5" />
                {{ __('pages/admin/users.send_invite_message') }}
            </div>

            {{-- Send invitation checkbox --}}
            <div class="sm:col-span-2 flex items-center gap-2.5">
                <x-forms.checkbox
                    name="send_invitation"
                    value="1"
                    x-model="form.send_invitation" />
                <x-forms.label for="send_invitation" class="cursor-pointer">{{ __('pages/admin/users.send_invite_label') }}</x-forms.label>
            </div>

            {{-- Footer --}}
            <div class="flex items-center justify-end gap-3 border-t border-border px-6 py-4">
                <x-buttons.primary
                    @click="createUser()"
                    type="button"
                    x-bind:disabled="createSubmitting">
                    <x-heroicon-o-arrow-path class="w-4 h-4 animate-spin" x-show="createSubmitting" />
                    <span x-text="createSubmitting ? '{{ __('buttons.saving') }}' : '{{ __('buttons.save') }}'"></span>
                </x-buttons.primary>
                <x-buttons.secondary @click="showCreate = false">{{ __('buttons.cancel') }}</x-buttons.secondary>
            </div>
        </form>
    </div>

</div>