@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">
            <div>
                <h2 class="text-lg font-semibold text-white">Postfach bearbeiten</h2>
                <div class="mt-0.5 text-white/70 text-sm flex items-center gap-1.5">
                    <span>{{ $email_readonly }}</span>
                </div>
            </div>
            <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">
    <div class="space-y-4">
        <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">
                <i class="ph ph-check text-[12px] text-emerald-300 opacity-0 peer-checked:opacity-100"></i>
            </span>
            <span class="text-white/80 text-sm">Postfach aktivieren</span>
        </label>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
                <label class="block text-xs text-white/60 mb-1">Name (Anzeigename)</label>
                <input type="text" wire:model.defer="display_name" 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">
                @error('display_name')
                <div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
            </div>

            <div>
                <label class="block text-xs text-white/60 mb-1">Passwort</label>
                <input type="password" wire:model.defer="password" placeholder="leer = unverändert"
                       class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90">
                @error('password')
                <div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
                <label class="block text-xs text-white/60 mb-1">Quota (MiB)</label>
                <input type="number" min="0" wire:model.defer="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>
            <div>
                <label class="block text-xs text-white/60 mb-1">Mails pro Stunde (optional)</label>
                <input type="number" min="1" wire:model.defer="rate_limit_per_hour" placeholder="z. B. 120"
                       class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90">
                @error('rate_limit_per_hour')
                <div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="text-[12px] w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm #opacity-70">
            <div class="#mt-1 text-xs text-white/50">{{ $quota_hint }}</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:edit:save')"
                    class="px-4 py-2 rounded-lg text-sm bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 hover:bg-emerald-500/30">
                Speichern
            </button>
        </div>
    </div>
@endpush