@push('modal.header')
    <div class="px-5 pt-5 pb-3 border-b border-white/10
              backdrop-blur rounded-t-2xl relative">
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold text-white">Neues Postfach</h2>
            <button wire:click="$dispatch('closeModal')" class="text-white/60 hover:text-white text-lg">
                <i class="ph ph-x"></i>
            </button>
        </div>
    </div>
@endpush

<div class="p-6">
    @if(!$can_create)
        <div class="mb-5">
            <div class="rounded-xl border border-yellow-400/30 bg-yellow-500/10 text-yellow-200 text-sm px-3 py-2">
                <i class="ph ph-warning text-[16px] mr-1.5"></i>
                {{ $block_reason }}
            </div>
        </div>
    @endif

    <div class="space-y-4">
        {{-- Domain + Localpart --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div class="relative" wire:ignore>
                <label class="block text-xs text-white/60 mb-1">Domain</label>

                <el-select
                    id="domainSelect"
                    name="domain_id"
                    value="{{ (int)$domain_id }}"
                    class="block w-full"
                    wire:model.live="domain_id"
                    onchange="$wire.set('domain_id', parseInt(this.value))"
                >
                    {{-- Trigger / sichtbarer Button --}}
                    <button type="button"
                            class="grid w-full grid-cols-1 cursor-default rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90
             ">
                        <el-selectedcontent class="col-start-1 row-start-1 flex items-center gap-2 pr-6">
                            <i class="ph ph-globe-hemisphere-west text-white/60 text-[16px]"></i>
                            <span class="block truncate">Domain wählen</span>
                        </el-selectedcontent>
                        <i class="ph ph-caret-down col-start-1 row-start-1 self-center justify-self-end text-white/50"></i>
                    </button>

                    {{-- Dropdown / Options (Glas, rund) --}}
                    <el-options anchor="bottom start" popover
                                class="max-h-60 w-(--button-width) overflow-auto rounded-2xl bg-gray-900/95 backdrop-blur
             py-1 text-base outline-1 -outline-offset-1 outline-white/10 shadow-xl sm:text-sm
             data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0">
                        @foreach($domains as $d)
                            @php
                                // Optional: Status fürs Label
                                $label = $d['domain'];
                                $locked = false; // falls du einzelne Domains sperren willst
                            @endphp

                            <el-option value="{{ $d['id'] }}"
                                       class="group/option relative block cursor-default py-2 pr-9 pl-3 text-white/90 select-none
                 hover:bg-white/5 focus:bg-white/10 focus:text-white focus:outline-hidden
                 {{ $locked ? 'opacity-50 pointer-events-none' : '' }}">
                                <div class="flex items-center gap-2">
                                    <i class="ph ph-globe-hemisphere-west text-white/60"></i>
                                    <span
                                        class="block truncate group-aria-selected/option:font-semibold">{{ $label }}</span>
                                </div>

                                {{-- Haken beim aktiven Eintrag --}}
                                <span
                                    class="absolute inset-y-0 right-0 hidden items-center pr-3 text-emerald-300
                   group-aria-selected/option:flex in-[el-selectedcontent]:hidden">
            <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
              <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"/>
            </svg>
          </span>
                            </el-option>
                        @endforeach
                    </el-options>
                </el-select>

                @error('domain_id')
                <div class="text-rose-300 text-xs mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label class="block text-xs text-white/60 mb-1">Benutzername (linker Teil der E-Mail-Adresse)</label>
                <input type="text" wire:model.live="localpart" placeholder="z. B. office"
                       class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90 placeholder:text-white/50">
                <div class="mt-1 text-[11px] text-white/50">Nur Buchstaben, Zahlen und „.-_+“</div>
                @error('localpart')
                <div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
            </div>
        </div>

        {{-- Anzeigename --}}
        <div>
            <label class="block text-xs text-white/60 mb-1">Name (Anzeigename)</label>
            <input type="text" wire:model="display_name" placeholder="z. B. Max Mustermann"
                   class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90 placeholder:text-white/50">
            @error('display_name')
            <div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
        </div>

        {{-- Adresse Preview --}}
        <div class="flex items-center gap-2">
            <span class="text-sm text-white/60">Adresse:</span>
            <span
                class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-sm border border-white/10 bg-white/5 text-white/85">
                <i class="ph ph-at text-[14px]"></i>
                {{ $email_preview ?: '–' }}
            </span>
        </div>

        <div class="border-t border-white/10"></div>

        {{-- Passwort / Quota --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
                <label class="block text-xs text-white/60 mb-1">Passwort</label>
                <input type="password" wire:model="password" placeholder="mind. 8 Zeichen"
                       class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90 placeholder:text-white/50">
                @error('password')
                <div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
                <div class="mt-1 text-xs text-white/50">Leer lassen, wenn extern gesetzt wird.</div>
            </div>

            <div>
                <label class="block text-xs text-white/60 mb-1">Quota (MiB)</label>
                <input type="number" min="0" wire:model.live="quota_mb"
                       class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90">
                @error('quota_mb')
                <div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
                <div class="mt-1 text-xs text-white/50">{{ $quota_hint }}</div>
            </div>
        </div>

        {{-- Rate / Flags --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
                <label class="block text-xs text-white/60 mb-1">Mails pro Stunde (optional)</label>
                <input type="number" min="1" wire:model="rate_limit_per_hour"
                       @if($rate_limit_readonly) readonly disabled @endif
                       class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90 placeholder:text-white/50"
                       placeholder="z. B. 120">
                @if($rate_limit_readonly)
                    <div class="mt-1 text-xs text-white/50">Von der Domain vorgegeben (Override deaktiviert).</div>
                @endif
                @error('rate_limit_per_hour')
                <div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
            </div>

            <div class="pt-3.5 grid items-center justify-start md:justify-center gap-6">
                <label class="inline-flex items-center gap-2 cursor-pointer select-none group">
                    <input type="checkbox" wire:model="is_active" class="peer sr-only">
                    <span class="w-5 h-5 flex items-center justify-center rounded-md border border-white/15 bg-white/5
                                peer-checked:bg-emerald-500/20 peer-checked:border-emerald-400/40
                                group-hover:border-white/25 transition">
                        <i class="ph ph-check text-[12px] text-emerald-300 opacity-0 peer-checked:opacity-100 transition"></i>
                    </span>
                    <span class="text-white/80 text-sm">Postfach aktivieren</span>
                </label>

                <label class="inline-flex items-center gap-2 cursor-pointer select-none group">
                    <input type="checkbox" wire:model="must_change_pw" class="peer sr-only">
                    <span class="w-5 h-5 flex items-center justify-center rounded-md border border-white/15 bg-white/5
                                peer-checked:bg-sky-500/20 peer-checked:border-sky-400/40
                                group-hover:border-white/25 transition">
                        <i class="ph ph-check text-[12px] text-sky-300 opacity-0 peer-checked:opacity-100 transition"></i>
                    </span>
                    <span class="text-white/80 text-sm">Passwort bei erstem Login ändern</span>
                </label>
            </div>
        </div>
    </div>
</div>

@push('modal.footer')
    <div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">
        <div class="flex justify-end gap-2">
            <button type="button" wire:click="$dispatch('closeModal')"
                    class="px-4 py-2 rounded-lg text-sm border border-white/10 text-white/70 hover:text-white hover:border-white/20">
                Abbrechen
            </button>

            <button type="submit" wire:click="$dispatch('mailbox:create')"
                    @disabled(!$can_create)
                    class="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm
                       {{ $can_create
                            ? 'bg-emerald-500/20 text-emerald-200 border border-emerald-400/40 hover:bg-emerald-500/30'
                            : 'bg-white/5 text-white/40 border border-white/10 cursor-not-allowed' }}">
                <i class="ph ph-check text-[16px]"></i> Speichern
            </button>
        </div>
    </div>
@endpush