mailwolt/resources/views/livewire/ui/security/fail2ban-settings.blade.php

<div class="grid grid-cols-1 xl:grid-cols-3 gap-5">
    {{-- LEFT 2/3 --}}
    <div class="xl:col-span-2 space-y-5">
        <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-shield text-white/70 text-[13px]"></i>
                    <span class="text-[11px] uppercase tracking-wide text-white/70">Fail2Ban Konfiguration</span>
                </div>
                <button wire:click="save"
                        class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-1.5 text-white/80 hover:text-white hover:border-white/20">
                    <i class="ph ph-floppy-disk text-[14px]"></i> Speichern & Reload
                </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-white/60 text-sm mb-1">Bantime (Sekunden)</label>
                    <input type="number" wire:model.defer="bantime"
                           class="w-full h-11 rounded-xl border border-white/10 bg-white/[0.04] px-3 text-white/90">
                    <p class="mt-1 text-xs text-white/45">Standard-Sperrzeit.</p>
                </div>

                <div>
                    <label class="block text-white/60 text-sm mb-1">Max. Bantime (Sekunden)</label>
                    <input type="number" wire:model.defer="max_bantime"
                           class="w-full h-11 rounded-xl border border-white/10 bg-white/[0.04] px-3 text-white/90">
                    <p class="mt-1 text-xs text-white/45">Obergrenze bei dynamischer Erhöhung.</p>
                </div>

                <div>
                    <label class="block text-white/60 text-sm mb-1">Findtime (Sekunden)</label>
                    <input type="number" wire:model.defer="findtime"
                           class="w-full h-11 rounded-xl border border-white/10 bg-white/[0.04] px-3 text-white/90">
                    <p class="mt-1 text-xs text-white/45">Zeitraum für Wiederholungen.</p>
                </div>

                <div>
                    <label class="block text-white/60 text-sm mb-1">Max. Retry</label>
                    <input type="number" wire:model.defer="max_retry"
                           class="w-full h-11 rounded-xl border border-white/10 bg-white/[0.04] px-3 text-white/90">
                    <p class="mt-1 text-xs text-white/45">Fehlversuche bis Bann.</p>
                </div>

                <div class="md:col-span-2">
                    <label class="inline-flex items-center gap-2 cursor-pointer select-none group">
                        <input type="checkbox" wire:model.defer="bantime_increment" class="peer sr-only">
                        <span class="w-5 h-5 flex items-center justify-center rounded-md border border-white/15 bg-white/5 peer-checked:bg-emerald-500/20 peer-checked:border-emerald-400/40">
                            <i class="ph ph-check text-[12px] text-emerald-300 opacity-0 peer-checked:opacity-100"></i>
                        </span>
                        <span class="text-white/80 text-sm">Bantime dynamisch erhöhen (increment)</span>
                    </label>
                </div>

                <div class="md:col-span-2">
                    <label class="block text-white/60 text-sm mb-1">Erhöhungs-Faktor</label>
                    <input type="number" step="0.1" wire:model.defer="bantime_factor"
                           class="w-full h-11 rounded-xl border border-white/10 bg-white/[0.04] px-3 text-white/90">
                    <p class="mt-1 text-xs text-white/45">Multiplikator (z. B. 1.5).</p>
                </div>
            </div>
        </div>

        <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-4">
                <i class="ph ph-info text-white/70 text-[13px]"></i>
                <span class="text-[11px] uppercase tracking-wide text-white/70">Hinweise</span>
            </div>

            <ul class="list-disc list-inside text-sm text-white/60 space-y-1">
                <li><strong>bantime.increment</strong> = true bedeutet, dass sich die Sperrzeit bei wiederholten
                    Angriffen erhöht (z. B. 1 h → 1.5 h → 2.25 h …).
                </li>
                <li>Die SQLite-Datenbank befindet sich unter <code>/var/lib/fail2ban/fail2ban.sqlite3</code>.</li>
                <li>Alle Änderungen hier werden nach Klick auf <em>„Speichern & Reload“</em> sofort aktiv.</li>
            </ul>
        </div>
    </div>

    {{-- RIGHT 1/3 --}}
    <div class="space-y-5">
        <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-list text-white/70 text-[13px]"></i>
                <span class="text-[11px] uppercase tracking-wide text-white/70">Whitelist</span>
            </div>

            @forelse($whitelist as $ip)
                <div class="flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.03] px-3 py-2 mb-2">
                    <span class="text-white/80 text-sm">{{ $ip }}</span>
                    <button class="text-[12px] px-2 py-0.5 rounded border border-white/10 hover:border-white/20"
                            wire:click="$dispatch('openModal',{component:'ui.security.modal.fail2ban-ip-modal',arguments:{mode:'remove',type:'whitelist',ip:'{{ $ip }}'}})">
                        Entfernen
                    </button>
                </div>
            @empty
                <div class="text-sm text-white/50">Keine Einträge.</div>
            @endforelse

            <button class="primary-btn w-full justify-center mt-2"
                    wire:click="$dispatch('openModal',{component:'ui.security.modal.fail2ban-ip-modal',arguments:{type:'whitelist'}})">
                IP hinzufügen
            </button>
        </div>

        <div class="glass-card p-5">
            <div class="inline-flex items-center gap-2 rounded-full bg-rose-500/10 border border-rose-400/30 px-2.5 py-1 mb-3">
                <i class="ph ph-hand text-rose-300 text-[13px]"></i>
                <span class="text-[11px] uppercase tracking-wide text-rose-300">Blacklist</span>
            </div>

            @forelse($blacklist as $ip)
                <div class="flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.03] px-3 py-2 mb-2">
                    <span class="text-white/80 text-sm">{{ $ip }}</span>
                    <button class="text-[12px] px-2 py-0.5 rounded border border-white/10 hover:border-white/20"
                            wire:click="$dispatch('openModal',{component:'ui.security.modal.fail2ban-ip-modal',arguments:{mode:'remove',type:'blacklist',ip:'{{ $ip }}'}})">
                        Entfernen
                    </button>
                </div>
            @empty
                <div class="text-sm text-white/50">Keine Einträge.</div>
            @endforelse

            <button class="text-[13px] w-full px-3 py-2 rounded-xl border border-rose-400/30 bg-rose-500/10 text-rose-200 hover:border-rose-400/50"
                    wire:click="$dispatch('openModal',{component:'ui.security.modal.fail2ban-ip-modal',arguments:{type:'blacklist'}})">
                IP hinzufügen
            </button>
        </div>
    </div>
</div>