{{-- resources/views/livewire/setup/step-certificate.blade.php --}}
<h1 class="card-title text-xl mb-2">TLS-Zertifikat</h1>
<p class="card-subtle mb-6">
    Optional kannst du jetzt gleich ein HTTPS-Zertifikat erstellen lassen.
</p>

<div class="space-y-6 w-full">
    <div class="rounded-2xl border border-glass-border bg-glass-light/40 p-5 space-y-4">
        <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" wire:model.live="form_cert_create_now" class="peer hidden">
            <span class="w-5 h-5 flex items-center justify-center rounded border border-white/30 bg-white/5 peer-checked:bg-emerald-500/20 peer-checked:border-emerald-400 transition">
                    <i class="ph ph-check text-emerald-400 text-xs hidden peer-checked:inline"></i>
                </span>
            <span class="text-gray-300/90">
        Zertifikat jetzt mit Let’s Encrypt erstellen
        <span class="block text-xs text-gray-400 mt-0.5">
          (erfordert öffentliche Erreichbarkeit der Domain)
        </span>
      </span>
        </label>

        <div class="grid md:grid-cols-2 gap-4" x-data>
            <div>
                <label class="block text-sm text-gray-300 mb-1">Kontakt-E-Mail</label>
                <input
                    type="email"
                    placeholder="admin@example.com"
                    class="glass-input w-full py-2.5 px-3"
                    wire:model.defer="form_cert_email"
                    @disabled(!$form_cert_create_now)  {{-- <-- hier der Fix --}}
                >
                @error('form_cert_email')
                <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">HTTPS erzwingen</label>
                <select class="glass-input w-full py-2.5 px-3"
                        wire:model="form_cert_force_https">
                    <option value="1">Ja</option>
                    <option value="0">Nein</option>
                </select>
            </div>
        </div>
    </div>

    <div class="text-xs text-gray-400">
        Hinweis: Wenn du die Erstellung überspringst, bleibt vorerst das self-signed Zertifikat aktiv.
        Du kannst Let’s Encrypt später im Setup-Bereich starten.
    </div>
</div>