{{-- resources/views/ui/system/settings/index.blade.php --}}
@extends('layouts.app')

@section('title', 'System · Einstellungen')
@section('header_title', 'System · Einstellungen')

@section('content')
    <div class="space-y-5 max-w-7xl mx-auto">

        <div class="mb-3">
            <h3 class="text-xl font-semibold text-white/9090">Allgemeine Einstellungen</h3>
            <p class="text-sm text-white/50">
                Instanzname, Sprache und Zeitkonfiguration für die gesamte Installation.
            </p>
        </div>
        {{-- Top-Navigation im Chip-Stil (wie die Dashboard-KPIs) --}}
        <div class="flex flex-wrap gap-3">
            <a href="#tab-general"
               class="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white/80 hover:text-white hover:border-white/20">
                <i class="ph ph-sliders-horizontal text-white/70"></i>
                <span>Allgemein</span>
            </a>
            <a href="#tab-domains"
               class="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white/80 hover:text-white hover:border-white/20">
                <i class="ph ph-globe text-white/70"></i>
                <span>Domains & SSL</span>
            </a>
            <a href="#tab-security"
               class="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white/80 hover:text-white hover:border-white/20">
                <i class="ph ph-shield-check text-white/70"></i>
                <span>Sicherheit</span>
            </a>
        </div>

        {{-- Abschnitt: Allgemein --}}
        <section id="tab-general" class="grid grid-cols-1 gap-4">
            <div class="glass-card p-5">
                {{-- Card-Header im gleichen „Badge“-Stil wie auf dem Dashboard --}}
                <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-sliders-horizontal text-white/70 text-[13px]"></i>
                        <span class="text-[11px] tracking-wide uppercase text-white/70">Allgemein</span>
                    </div>
                </div>

                {{-- Livewire-Form (Allgemein) --}}
                <livewire:ui.system.form.general-form />
            </div>
        </section>


        {{-- Platzhalter für weitere Tabs (später eigene Livewire-Komponenten) --}}
        <section id="tab-domains" class="grid grid-cols-1 gap-4">
            <div class="#glass-card #p-5">
                <div class="mb-3 mt-6">
                    <h2 class="text-xl font-semibold text-white/90">Domains & SSL</h2>
                    <p class="text-sm text-white/50">
                        Verwaltung der System-Domain, Subdomains und TLS-Zertifikate.
                    </p>
                </div>

                <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>
                </div>
                <div class="text-white/60 text-sm">
                    <livewire:ui.system.domains-ssl-form />
                </div>
            </div>
        </section>
    </div>
@endsection