@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">Domain-Limits</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 space-y-5">
    <form wire:submit.prevent="save" id="domain-limits-form" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-white/70 mb-1">Max. mögliche Aliasse</label>
                <input type="number" wire:model.defer="max_aliases"
                       class="w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm focus:border-white/20 focus:ring-0">
                @error('max_aliases') <div class="text-rose-400 text-xs mt-1">{{ $message }}</div> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-white/70 mb-1">Max. mögliche Mailboxen</label>
                <input type="number" wire:model.defer="max_mailboxes"
                       class="w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm focus:border-white/20 focus:ring-0">
                @error('max_mailboxes') <div class="text-rose-400 text-xs mt-1">{{ $message }}</div> @enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-white/70 mb-1">Standard-Quota je Mailbox (MiB)</label>
                <input type="number" wire:model.defer="default_quota_mb"
                       class="w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm focus:border-white/20 focus:ring-0">
                @error('default_quota_mb') <div class="text-rose-400 text-xs mt-1">{{ $message }}</div> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-white/70 mb-1">Speicher je Mailbox (MiB, optional)</label>
                <input type="number" wire:model.defer="max_quota_per_mailbox_mb"
                       class="w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm focus:border-white/20 focus:ring-0">
                @error('max_quota_per_mailbox_mb') <div class="text-rose-400 text-xs mt-1">{{ $message }}</div> @enderror
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-white/70 mb-1">Domain-Speicherplatz gesamt (MiB)</label>
            <input type="number" wire:model.defer="total_quota_mb"
                   class="w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm focus:border-white/20 focus:ring-0">
            @error('total_quota_mb') <div class="text-rose-400 text-xs mt-1">{{ $message }}</div> @enderror
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-white/70 mb-1">Mails pro Stunde (optional)</label>
                <input type="number" wire:model.defer="rate_limit_per_hour" placeholder="leer = kein Limit"
                       class="w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm focus:border-white/20 focus:ring-0">
                @error('rate_limit_per_hour') <div class="text-rose-400 text-xs mt-1">{{ $message }}</div> @enderror
            </div>
            <div class="flex items-center gap-3 md:mt-7">
                <label class="inline-flex items-center gap-3 select-none">
                    <input type="checkbox" wire:model.defer="rate_limit_override"
                           class="peer appearance-none w-5 h-5 rounded-md border border-emerald-500/50 bg-transparent checked:bg-emerald-500 checked:border-emerald-400 grid place-content-center transition">
                    <span class="text-slate-200">Postfach-Overrides erlauben</span>
                </label>
            </div>
        </div>
    </form>
</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" form="domain-limits-form"
                    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