{{-- resources/views/livewire/ui/system/settings-form.blade.php --}}
<div x-data="{ tab: @entangle('tab') }" class="space-y-6">
    {{-- Tabs --}}
    <div class="flex flex-wrap gap-2 border-b border-white/10 pb-3">
        <button class="nx-tab" :class="{ 'active': tab === 'general' }" @click="tab = 'general'">
            <i class="ph ph-sliders-horizontal mr-2"></i>Allgemein
        </button>
        <button class="nx-tab" :class="{ 'active': tab === 'domains' }" @click="tab = 'domains'">
            <i class="ph ph-globe mr-2"></i>Domains & SSL
        </button>
        <button class="nx-tab" :class="{ 'active': tab === 'security' }" @click="tab = 'security'">
            <i class="ph ph-shield-check mr-2"></i>Sicherheit
        </button>
    </div>

    {{-- Allgemein --}}
    <div x-show="tab === 'general'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="glass-card p-4">
            <div class="text-xs text-white/60 mb-1">Instanzname</div>
            <div class="text-sm font-medium">{{ $instance_name }}</div>
        </div>

        <div class="glass-card p-4">
            <label class="text-xs text-white/60 mb-1 block">Sprache</label>
            <select wire:model.defer="locale" class="nx-input">
                <option value="de">Deutsch</option>
                <option value="en">English</option>
                <option value="fr">Français</option>
            </select>
        </div>

        <div class="glass-card p-4">
            <label class="text-xs text-white/60 mb-1 block">Zeitzone</label>
            <input type="text" wire:model.defer="timezone" class="nx-input" placeholder="Europe/Berlin">
        </div>

        <div class="glass-card p-4">
            <label class="text-xs text-white/60 mb-1 block">Session-Timeout (Minuten)</label>
            <input type="number" min="5" max="1440" wire:model.defer="session_timeout" class="nx-input">
        </div>
    </div>

    {{-- Domains & SSL --}}
    <div x-show="tab === 'domains'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="glass-card p-4">
            <label class="text-xs text-white/60 mb-1 block">UI Domain</label>
            <input type="text" wire:model.defer="ui_domain" class="nx-input" placeholder="mail.example.com">
        </div>

        <div class="glass-card p-4">
            <label class="text-xs text-white/60 mb-1 block">Mailserver Domain</label>
            <input type="text" wire:model.defer="mail_domain" class="nx-input" placeholder="mx.example.com">
        </div>

        <div class="glass-card p-4">
            <label class="text-xs text-white/60 mb-1 block">Webmail Domain</label>
            <input type="text" wire:model.defer="webmail_domain" class="nx-input" placeholder="webmail.example.com">
        </div>

        <div class="glass-card p-4">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-sm">SSL automatisch erstellen (Let's Encrypt)</div>
                    <div class="text-xs text-white/50">Zertifikate werden automatisch angelegt und verlängert.</div>
                </div>
                <label class="nx-switch">
                    <input type="checkbox" wire:model.defer="ssl_auto">
                    <span></span>
                </label>
            </div>
        </div>
    </div>

    {{-- Sicherheit --}}
    <div x-show="tab === 'security'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="glass-card p-4">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-sm">Zwei-Faktor-Authentifizierung</div>
                    <div class="text-xs text-white/50">TOTP/WebAuthn aktivieren.</div>
                </div>
                <label class="nx-switch">
                    <input type="checkbox" wire:model.defer="twofa_enabled">
                    <span></span>
                </label>
            </div>
        </div>

        <div class="glass-card p-4">
            <label class="text-xs text-white/60 mb-1 block">Login Rate Limit (Versuche pro Minute)</label>
            <input type="number" min="1" max="100" wire:model.defer="rate_limit" class="nx-input">
        </div>

        <div class="glass-card p-4">
            <label class="text-xs text-white/60 mb-1 block">Passwort Mindestlänge</label>
            <input type="number" min="6" max="128" wire:model.defer="password_min" class="nx-input">
        </div>
    </div>

    {{-- Footer: Aktionen --}}
    <div class="flex items-center justify-end gap-2 pt-2 border-t border-white/10">
        <button wire:click="save" class="btn-primary">
            <i class="ph ph-floppy-disk mr-2"></i> Speichern
        </button>
    </div>
</div>