<span>
@if($action == "random")
    <flux:button wire:click="random()" class="cursor-pointer w-full btn-primary" type="submit" variant="filled">{{ __('Random') }} Email</flux:button>
@elseif($action == "gmail")
    <flux:button wire:click="gmail()" class="cursor-pointer w-full ml-2 btn-gmail" type="submit" variant="filled">Disposable Gmail</flux:button>
@elseif($action == "outlook")
    <flux:button wire:click="outlook()" class="cursor-pointer w-full btn-outlook" type="submit" variant="filled">Disposable Outlook</flux:button>
@elseif($action == "delete")
    <flux:button wire:click="deleteEmail()" class="cursor-pointer" type="submit" variant="danger">{{ __('Delete') }}</flux:button>
@elseif($action == "customEmail")
    <div>
        <form wire:submit.prevent="create" method="post">
        <div>
            <div class="mt-2">
                <div class="flex items-center rounded-md dark:bg-zinc-700 pl-3 outline-1 -outline-offset-1 outline-zinc-200 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 dark:has-[input:focus-within]:outline-white has-[input:focus-within]:outline-zinc-900">
                    <div class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6 mr-1.5">
                        <flux:icon.mail variant="mini"/>
                    </div>
                    <input type="text" name="username" id="username" autocomplete="false" wire:model.defer="username" class="block min-w-0 grow py-2 pr-3 pl-1 text-base dark:text-white text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6" placeholder="{{ __('Enter Username') }}">
                    <div class="grid shrink-0 grid-cols-1 focus-within:relative">
                        <select id="domain" name="domain" aria-label="Domain" wire:model="domain" class="col-start-1 row-start-1 w-full appearance-none rounded-md py-1.5 pr-7 pl-3 text-base text-gray-500 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 dark:focus:outline-white focus:outline-zinc-900 sm:text-sm/6">
                            <option class="dark:bg-zinc-700 dark:text-white bg-zinc-100 accent-gray-700" selected>{{ __('Select Domain') }}</option>
                            @foreach(array_reverse($domains) as $domain)
                                <option x-on:click="$refs.domain.value = '{{ $domain }}'; $wire.setDomain('{{ $domain }}')" class="dark:bg-zinc-700 dark:text-white bg-zinc-100 accent-gray-700">{{ $domain }}</option>
                            @endforeach
                        </select>
                        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
                            <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex my-6">
            <div class="flex w-full">
{{--                <flux:button x-on:click="$dispatch('closeModal')" class="w-1/2 cursor-pointer" variant="outline">{{ __('Cancel') }}</flux:button>--}}
                <flux:button wire:click="random()" class="cursor-pointer w-1/2 btn-warning" variant="filled">{{ __('Random') }} Email</flux:button>
                <flux:button class="ml-2 w-1/2 btn-success cursor-pointer" type="submit" variant="primary">{{ __('Create') }}</flux:button>
            </div>
        </div>
        </form>
    </div>
@endif
</span>
