{{-- resources/views/livewire/ui/system/domains-ssl-form.blade.php --}}
<div class="space-y-6">

    {{-- DOMAINS & SSL --}}
    <div class="glass-card p-5">
        <div class="flex items-center justify-between mb-4">
            <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
                <i class="ph ph-globe text-white/70 text-[13px]"></i>
                <span class="text-[11px] tracking-wide uppercase text-white/70">Domains & SSL</span>
            </div>
            <button wire:click="saveDomains"
                    class="ghost-btn gap-2">
                <i class="ph ph-floppy-disk"></i> Speichern
            </button>
        </div>

        <label class="block mb-2 text-white/60 text-sm">Basis-Domain</label>
        <input type="text" wire:model.live.debounce.400ms="base_domain"
               class="w-full mb-4 rounded-xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white/90 focus:border-white/20"
               placeholder="example.com">
        @error('base_domain') <p class="text-xs text-rose-400 -mt-2 mb-2">{{ $message }}</p> @enderror

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            {{-- UI --}}
            <div class="min-w-0">
                <label class="block mb-2 text-white/60 text-sm">UI-Hostname</label>
                <div class="flex">
                    <input type="text" wire:model.live="ui_sub"
                           class="flex-1 rounded-l-xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white/90 focus:border-white/20"
                           placeholder="mail">
                    <div
                        class="px-4 #min-w-[10rem] text-white/60 border border-l-0 border-white/10 rounded-r-xl flex items-center justify-center">
                        .{{ $base_domain }}
                    </div>
                </div>
                <div class="mt-1 text-xs text-white/45">{{ $this->ui_host }}</div>
                @error('ui_sub') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Webmail --}}
            <div class="min-w-0">
                <label class="block mb-2 text-white/60 text-sm">Webmail-Hostname</label>
                <div class="flex">
                    <input type="text" wire:model.live="webmail_sub"
                           class="flex-1 rounded-l-xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white/90 focus:border-white/20"
                           placeholder="webmail">
                    <div
                        class="px-4 #min-w-[10rem] text-white/60 border border-l-0 border-white/10 rounded-r-xl flex items-center justify-center">
                        .{{ $base_domain }}
                    </div>
                </div>
                <div class="mt-1 text-xs text-white/45">{{ $this->webmail_host }}</div>
                @error('webmail_sub') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- MTA --}}
            <div class="min-w-0">
                <label class="block mb-2 text-white/60 text-sm">MTA-Hostname</label>
                <div class="flex">
                    <input type="text" wire:model.live="mta_sub"
                           class="flex-1 rounded-l-xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white/90 focus:border-white/20"
                           placeholder="mx">
                    <div
                        class="px-4 #min-w-[10rem] text-white/60 border border-l-0 border-white/10 rounded-r-xl flex items-center justify-center">
                        .{{ $base_domain }}
                    </div>
                </div>
                <div class="mt-1 text-xs text-white/45">{{ $this->mta_host }}</div>
                @error('mta_sub') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
            </div>
        </div>
    </div>

    {{-- TLS / Redirect --}}
    <div class="glass-card p-5 space-y-4">
        <div class="flex items-center justify-between">
            <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
                <i class="ph ph-lock text-white/70 text-[13px]"></i>
                <span class="text-[11px] tracking-wide uppercase text-white/70">TLS / Redirect</span>
            </div>
            <button wire:click="saveTls"
                    class="ghost-btn gap-2">
                <i class="ph ph-floppy-disk"></i> Speichern
            </button>
        </div>

        @php $tile = 'flex items-center gap-3 h-12 px-4 rounded-xl border border-white/10 bg-white/[0.04] whitespace-nowrap'; @endphp
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <label class="{{ $tile }}"><input type="checkbox" wire:model.live="force_https"
                                              class="form-checkbox size-4 accent-emerald-400"><span
                    class="text-white/80 font-medium">HTTP → HTTPS erzwingen</span></label>
            <label class="{{ $tile }}"><input type="checkbox" wire:model.live="hsts"
                                              class="form-checkbox size-4 accent-emerald-400"><span
                    class="text-white/80 font-medium">HSTS aktivieren</span></label>
            <label class="{{ $tile }}"><input type="checkbox" wire:model.live="auto_renew"
                                              class="form-checkbox size-4 accent-emerald-400"><span
                    class="text-white/80 font-medium">Automatische Erneuerung</span></label>
        </div>
    </div>

    {{-- ACME --}}
    <div class="glass-card p-5">
        <div class="flex items-center justify-between mb-4">
            <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
                <i class="ph ph-certificate text-white/70 text-[13px]"></i>
                <span class="text-[11px] tracking-wide uppercase text-white/70">ACME (Let’s Encrypt)</span>
            </div>
            <button wire:click="saveAcme"
                    class="ghost-btn gap-2">
                <i class="ph ph-floppy-disk"></i> Speichern
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-white/60 text-sm mb-2">Kontakt-E-Mail</label>
                <input type="email" wire:model.live="acme_contact"
                       class="w-full rounded-xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white/90 focus:border-white/20">
                @error('acme_contact') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-white/60 text-sm mb-2">Umgebung</label>
                <select wire:model.live="acme_env"
                        class="w-full rounded-xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white/90">
                    @foreach($acme_envs as $opt)
                        <option class="bg-slate-900" value="{{ $opt['value'] }}">{{ $opt['label'] }}</option>
                    @endforeach
                </select>
                @error('acme_env') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-white/60 text-sm mb-2">Challenge</label>
                <select wire:model.live="acme_challenge"
                        class="w-full rounded-xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white/90">
                    @foreach($acme_challenges as $opt)
                        <option class="bg-slate-900" value="{{ $opt['value'] }}">{{ $opt['label'] }}</option>
                    @endforeach
                </select>
                @error('acme_challenge') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>
        </div>
    </div>

    {{-- MTA-STS --}}

    {{-- MTA-STS --}}
    <div class="glass-card p-5 space-y-4">
        <div class="flex items-center justify-between">
            <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
                <i class="ph ph-shield text-white/70 text-[13px]"></i>
                <span class="text-[11px] tracking-wide uppercase text-white/70">MTA-STS</span>
            </div>
            <button wire:click="saveMtaSts"
                    class="ghost-btn gap-2">
                <i class="ph ph-floppy-disk"></i> Speichern
            </button>
        </div>

        {{-- Reihe 1 --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block mb-2 text-white/60 text-sm">Aktivieren</label>
                <label class="flex items-center gap-3 h-12 px-4 rounded-xl border border-white/10 bg-white/[0.04]">
                    <input type="checkbox" wire:model.live="mta_sts_enabled"
                           class="form-checkbox size-4 accent-emerald-400">
                    <span class="text-white/80">MTA-STS aktiv</span>
                </label>
            </div>

            <div>
                <label class="block mb-2 text-white/60 text-sm">Modus</label>
                <select wire:model.live="mta_sts_mode"
                        class="w-full h-12 rounded-xl border border-white/10 bg-white/[0.04] px-3 text-white/90">
                    <option class="bg-slate-900" value="enforce">enforce</option>
                    <option class="bg-slate-900" value="testing">testing</option>
                    <option class="bg-slate-900" value="none">none</option>
                </select>
            </div>

            <div>
                <label class="block mb-2 text-white/60 text-sm">max_age (Tage)</label>
                <input type="number" min="1" wire:model.live="mta_sts_max_age"
                       class="w-full h-12 rounded-xl border border-white/10 bg-white/[0.04] px-3 text-white/90">
            </div>
        </div>

        {{-- Reihe 2: MX-Liste --}}
        <div>
            <label class="block mb-2 text-white/60 text-sm">MX-Ziele (je Zeile ein Eintrag, z. B. <code
                    class="text-white/70">*.{{ $base_domain }}</code> oder <code
                    class="text-white/70">mx1.{{ $base_domain }}</code>)</label>
            @foreach($mta_sts_mx as $idx => $value)
                <div class="flex items-center gap-2 mb-2">
                    <input type="text" wire:model.live="mta_sts_mx.{{ $idx }}"
                           class="flex-1 h-12 rounded-xl border border-white/10 bg-white/[0.04] px-3 text-white/90 placeholder-white/40"
                           placeholder="*.{{ $base_domain }}">
                    <button type="button"
                            wire:click="removeMx({{ $idx }})"
                            class="ghost-btn gap-2">
                        Entfernen
                    </button>
                </div>
            @endforeach
            <button type="button"
                    wire:click="addMx"
                    class="ghost-btn gap-2">
                + MX hinzufügen
            </button>
            <div class="text-xs text-white/60 mt-3">
                DNS TXT: <code class="text-white/80">{{ $this->mtaStsTxtName }}</code>
                → <code class="text-white/80">{{ $this->mtaStsTxtValue }}</code>
            </div>
        </div>
    </div>

    {{-- Zertifikate --}}
    <div class="glass-card p-5">
        <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1 mb-3">
            <i class="ph ph-certificate text-white/70 text-[13px]"></i>
            <span class="text-[11px] tracking-wide uppercase text-white/70">Zertifikate</span>
        </div>

        <ul class="divide-y divide-white/5">
            @foreach($hosts as $h)
                @php $badge = $this->statusBadge($h); @endphp
                <li class="flex flex-col md:flex-row md:items-center md:justify-between py-3 gap-3 md:gap-6">
                    <div class="flex items-center gap-2 min-w-[220px]">
                        <i class="ph ph-globe text-white/60 text-lg"></i>
                        <span class="text-white/90 font-medium">{{ $h['host'] }}</span>
                    </div>

                    <div
                        class="flex items-center justify-between md:justify-end flex-wrap gap-3 md:gap-4 w-full md:w-auto">
                        <span
                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs border {{ $badge['class'] }}">{{ $badge['text'] }}</span>
                        <div class="flex items-center gap-2">
                            <button wire:click="requestCertificate({{ $h['id'] }})"
                                    class="px-3 py-1.5 text-xs rounded-lg border border-white/10 bg-white/5 text-white/80 hover:text-white hover:border-white/20">
                                Anfordern
                            </button>
                            <button wire:click="renewCertificate({{ $h['id'] }})"
                                    class="px-3 py-1.5 text-xs rounded-lg border border-white/10 bg-white/5 text-white/80 hover:text-white hover:border-white/20">
                                Erneuern
                            </button>
                            <button wire:click="revokeCertificate({{ $h['id'] }})"
                                    class="px-3 py-1.5 text-xs rounded-lg border border-rose-400/30 bg-rose-500/10 text-rose-300 hover:border-rose-400/50">
                                Widerrufen
                            </button>
                        </div>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>
</div>