@extends('layouts.app')

@section('title', 'Security')
@section('header_title', 'Security')

@section('content')

    <x-page.pills :items="[
  ['label' => 'Account Security', 'href' => route('ui.security.index')],
  ['label' => 'SSL', 'href' => route('ui.security.ssl')],
  ['label' => 'Fail2Ban', 'href' => route('ui.security.fail2ban')],
  ['label' => 'Spam / Rspamd', 'href' => route('ui.security.rspamd')],
  ['label' => 'TLS & Ciphers', 'href' => route('ui.security.tls')],
  ['label' => 'Audit-Logs', 'href' => route('ui.security.audit')],
]" />

    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-white/90">Security</h1>
        <p class="text-white/50">Richtlinien und Kontoschutz.</p>
    </div>

    <livewire:ui.security.account-security-form />

    {{--    <div class="space-y-6">--}}
{{--        <div>--}}
{{--            <h1 class="text-xl font-semibold text-white/90">Sicherheit</h1>--}}
{{--            <p class="text-white/50">Richtlinien und technische Schutzmaßnahmen.</p>--}}
{{--        </div>--}}

{{--        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">--}}
{{--            --}}{{-- 2FA als kompakte Karte --}}
{{--            @livewire('ui.security.auth2fa-form')--}}

{{--            --}}{{-- Platzhalter-Karten (klein) – füllst du später aus --}}
{{--            <div class="rounded-2xl border border-white/10 bg-white/[0.04] p-4">--}}
{{--                <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-0.5 mb-3">--}}
{{--                    <i class="ph ph-lock text-white/70 text-[12px]"></i>--}}
{{--                    <span class="text-[10px] uppercase tracking-wide text-white/70">TLS & Ciphers</span>--}}
{{--                </div>--}}
{{--                <p class="text-[13px] text-white/60">TLS-Versionen & Cipher-Suites konfigurieren.</p>--}}
{{--            </div>--}}

{{--            <div class="rounded-2xl border border-white/10 bg-white/[0.04] p-4">--}}
{{--                <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-0.5 mb-3">--}}
{{--                    <i class="ph ph-gauge text-white/70 text-[12px]"></i>--}}
{{--                    <span class="text-[10px] uppercase tracking-wide text-white/70">Ratelimits</span>--}}
{{--                </div>--}}
{{--                <p class="text-[13px] text-white/60">Login-Versuche & API-Calls begrenzen.</p>--}}
{{--            </div>--}}

{{--            <div class="rounded-2xl border border-white/10 bg-white/[0.04] p-4">--}}
{{--                <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-0.5 mb-3">--}}
{{--                    <i class="ph ph-clipboard-text text-white/70 text-[12px]"></i>--}}
{{--                    <span class="text-[10px] uppercase tracking-wide text-white/70">Audit-Logs</span>--}}
{{--                </div>--}}
{{--                <p class="text-[13px] text-white/60">Sicherheitsrelevante Ereignisse einsehen.</p>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

@endsection