@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">Domain hinzufügen</h2>
                <p class="text-[13px] text-slate-300/85">
                    Lege Limits & Quotas fest. DKIM & empfohlene DNS-Records werden automatisch vorbereitet.
                </p>
            </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">
        {{-- SECTION: Basisdaten --}}
        <section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
            {{-- Domain --}}
            <div>
                <label class="flex items-center gap-2 text-sm text-slate-200">
                    <i class="ph ph-at text-slate-300"></i> Domain
                </label>
                <input type="text" placeholder="example.com" wire:model.defer="domain" class="mt-1 nx-input">
                @error('domain') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>

            {{-- Beschreibung --}}
            <div class="mt-4">
                <div class="flex items-center gap-2">
                    <label class="text-sm text-slate-200">Beschreibung</label>
                    <span
                        class="px-2 py-0.5 rounded-full text-[11px] border border-slate-600/60 bg-slate-800/70 text-slate-200">optional</span>
                </div>
                <input type="text" placeholder="optional" wire:model.defer="description" class="mt-1 nx-input">
                @error('description') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>
        </section>

        {{-- Tags --}}
        <section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
            <div class="#mt-4">
                <div class="flex items-center gap-2">
                    <label class="text-sm text-slate-200">Tags</label>
                    <span
                        class="px-2 py-0.5 rounded-full text-[11px] border border-slate-600/60 bg-slate-800/70 text-slate-200">optional</span>
                </div>

                {{-- Liste der Tags --}}
                <div class="mt-2 space-y-2">
                    @foreach($tags as $i => $t)
                        <div class="#rounded-xl #border #border-slate-700/60 #bg-white/[0.04] #p-3">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                                {{-- Label --}}
                                <div class="md:col-span-2">
                                    <label class="block text-xs text-slate-300/80 mb-1">Label</label>
                                    <input
                                        type="text"
                                        placeholder="z. B. Kunde, Produktion"
                                        wire:model.defer="tags.{{ $i }}.label"
                                        class="nx-input"
                                    >
                                </div>

                                {{-- Farbe (HEX + Picker) --}}
                                <div>
                                    <label class="block text-xs text-slate-300/80 mb-1">Farbe (HEX)</label>
                                    <div class="flex items-center gap-2">
                                        <input
                                            type="text"
                                            placeholder="#22c55e"
                                            wire:model.lazy="tags.{{ $i }}.color"
                                            class="nx-input font-mono"
                                        >
                                        <input
                                            type="color"
                                            value="{{ $t['color'] ?? '#22c55e' }}"
                                            wire:change="pickTagColor({{ $i }}, $event.target.value)"
                                            class="size-8 min-w-8 rounded-md border border-white/15 bg-white/5 p-1 cursor-pointer"
                                        >
                                    </div>
                                </div>
                            </div>

                            {{-- Palette + Entfernen --}}
                            <div class="mt-3 flex items-center justify-between gap-2">
                                <div class="flex gap-2">
                                    <span class="text-xs text-slate-400">Palette:</span>
                                    @foreach($tagPalette as $hex)
                                        <button
                                            type="button"
                                            class="h-6 w-6 rounded-md border {{ ($t['color'] ?? '') === $hex ? 'ring-2 ring-white/80' : 'border-white/15' }}"
                                            style="background: {{ $hex }}"
                                            wire:click="pickTagColor({{ $i }}, '{{ $hex }}')"
                                            title="{{ $hex }}"
                                        ></button>
                                    @endforeach
                                </div>
                                <button
                                    type="button"
                                    wire:click="removeTag({{ $i }})"
                                    class="inline-flex items-center gap-1.5 rounded-lg p-2 bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30 shrink-0"
                                >
                                    <i class="ph ph-trash-simple text-sm"></i>
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- Tag hinzufügen --}}
                <div class="mt-8 text-end">
                    <button
                        type="button"
                        wire:click="addTag"
                        class="inline-flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-white/80 hover:text-white hover:border-white/20">
                        <i class="ph ph-plus text-[14px]"></i> Tag hinzufügen
                    </button>
                </div>

                @error('tags.*.label') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                @error('tags.*.color') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>
        </section>

        {{-- SECTION: Limits (Anzahl) --}}
        <section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="text-sm text-slate-200">Max. mögliche Aliasse</label>
                    <input type="number" wire:model.defer="max_aliases" class="mt-1 nx-input">
                    @error('max_aliases') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="text-sm text-slate-200">Max. mögliche Mailboxen</label>
                    <input type="number" wire:model.defer="max_mailboxes" class="mt-1 nx-input">
                    @error('max_mailboxes') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </div>
            </div>
        </section>

        {{-- SECTION: Quotas / Speicher --}}
        <section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <div class="flex items-center gap-2">
                        <label class="text-sm text-slate-200">Standard-Quota je Mailbox (MiB)</label>
                        <span
                            class="px-2 py-0.5 rounded-full text-[11px] border border-indigo-500/30 bg-indigo-500/15 text-indigo-200">Voreinstellung</span>
                    </div>
                    <input type="number" wire:model.defer="default_quota_mb" class="mt-1 nx-input">
                    <p class="mt-2 text-xs text-slate-300/90">Startwert für neue Postfächer (pro Postfach änderbar).</p>
                    @error('default_quota_mb') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </div>

                <div>
                    <div class="flex items-center gap-2">
                        <label class="text-sm text-slate-200">Speicher je Mailbox (MiB)</label>
                        <span
                            class="px-2 py-0.5 rounded-full text-[11px] border border-fuchsia-500/30 bg-fuchsia-500/15 text-fuchsia-200">Obergrenze</span>
                        <span
                            class="px-2 py-0.5 rounded-full text-[11px] border border-slate-600/60 bg-slate-800/70 text-slate-200">optional</span>
                    </div>
                    <input type="number" wire:model.defer="max_quota_per_mailbox_mb" class="mt-1 nx-input">
                    <p class="mt-2 text-xs text-slate-300/90">
                        Leer lassen = keine Obergrenze; limitiert nur durch die <span
                            class="underline decoration-slate-600/70">Domain-Gesamtgröße</span>.
                    </p>
                    @error('max_quota_per_mailbox_mb') <p
                        class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </div>

                <div class="md:col-span-2">
                    <label class="text-sm text-slate-200">Domain-Speicherplatz gesamt (MiB)</label>
                    <input type="number" min="1" max="{{ $available_mib }}" wire:model.defer="total_quota_mb"
                           class="mt-1 nx-input">
                    <div class="mt-2 text-xs">
                        <div
                            class="inline-flex items-center gap-2 rounded-lg border border-slate-700/70 bg-slate-900/70 px-2 py-1 text-slate-300/90">
                            <i class="ph ph-info"></i>
                            Verfügbar (nach Systemreserve): {{ number_format($available_mib) }} MiB
                        </div>
                        <p class="mt-2 text-slate-300/80">Beachte: Summe aller Postfach-Quotas darf diese Domain-Größe
                            nicht überschreiten.</p>
                    </div>
                    @error('total_quota_mb') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </div>
            </div>
        </section>

        {{-- SECTION: Versandlimits & Status --}}
        <section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <div class="flex items-center gap-2">
                        <label class="text-sm text-slate-200">Mails pro Stunde</label>
                        <span
                            class="px-2 py-0.5 rounded-full text-[11px] border border-slate-600/60 bg-slate-800/70 text-slate-200">optional</span>
                    </div>
                    <input type="number" placeholder="leer = kein Limit" wire:model.defer="rate_limit_per_hour"
                           class="mt-1 nx-input">
                    @error('rate_limit_per_hour') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </div>

                <div class="grid items-center gap-3">
                    <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>
                    <label class="inline-flex items-center gap-3 select-none">
                        <input type="checkbox" wire:model.defer="active"
                               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">Domain aktivieren</span>
                    </label>

                </div>

{{--                <div class="flex items-center gap-3">--}}
{{--                    <label class="inline-flex items-center gap-3 select-none">--}}
{{--                        <input type="checkbox" wire:model.defer="active"--}}
{{--                               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">Domain aktivieren</span>--}}
{{--                    </label>--}}
{{--                </div>--}}
            </div>
        </section>

        {{-- SECTION: DKIM --}}
        <section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="text-sm text-slate-200">DKIM-Selector</label>
                    <input type="text" placeholder="dkim" wire:model.defer="dkim_selector" class="mt-1 nx-input">
                    @error('dkim_selector') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="text-sm text-slate-200">DKIM-Schlüssellänge (bits)</label>
                    <select wire:model.defer="dkim_bits" class="mt-1 nx-input">
                        <option value="1024">1024</option>
                        <option value="2048">2048</option>
                        <option value="3072">3072</option>
                        <option value="4096">4096</option>
                    </select>
                    <p class="mt-2 text-xs text-slate-300/90">
                        <i class="ph ph-warning-circle mr-1"></i>
                        2048 ist meist ideal. 4096 erzeugt sehr lange TXT-Records – DNS-Provider prüfen.
                    </p>
                    @error('dkim_bits') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </div>
            </div>
        </section>
    </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('domain:create')"
                    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">
                Domain hinzufügen
            </button>
        </div>
    </div>
@endpush