<div class="p-5 sm:p-6">
    <div class="flex items-start gap-3.5">
        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-md border border-accent/30 bg-accent/10 text-accent-text">
            <x-icon name="shield" class="h-5 w-5" />
        </span>
        <div class="min-w-0 flex-1">
            <h2 class="font-display text-base font-semibold text-ink">{{ __('modals.fail2ban_config.title') }}</h2>
            <p class="mt-1 text-sm leading-relaxed text-ink-2">
                {{ __('modals.fail2ban_config.subtitle', ['server' => $serverName ?: __('modals.fail2ban_config.this_server')]) }}
            </p>
        </div>
    </div>

    @if ($error)
        <div class="mt-4 flex items-center gap-2.5 rounded-md border border-offline/25 bg-offline/10 px-3.5 py-3">
            <x-icon name="alert" class="h-4 w-4 shrink-0 text-offline" />
            <p class="text-sm text-ink-2">{{ $error }}</p>
        </div>
    @endif

    @if ($loaded)
    <div class="mt-5 space-y-4">
        <div>
            <label for="f2b-bantime" class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('modals.fail2ban_config.bantime_label') }}</label>
            <input id="f2b-bantime" type="text" maxlength="40" wire:model="bantime" placeholder="{{ __('modals.fail2ban_config.bantime_placeholder') }}"
                   class="h-9 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
            @error('bantime')<p class="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p>@enderror
        </div>

        <div>
            <label for="f2b-maxretry" class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('modals.fail2ban_config.maxretry_label') }}</label>
            <input id="f2b-maxretry" type="number" min="1" max="100" wire:model="maxretry"
                   class="h-9 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
            @error('maxretry')<p class="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p>@enderror
        </div>

        <div>
            <label for="f2b-findtime" class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('modals.fail2ban_config.findtime_label') }}</label>
            <input id="f2b-findtime" type="text" maxlength="40" wire:model="findtime" placeholder="{{ __('modals.fail2ban_config.findtime_placeholder') }}"
                   class="h-9 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
            @error('findtime')<p class="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p>@enderror
        </div>
    </div>
    @endif

    <div class="mt-6 flex items-center justify-end gap-2">
        <x-btn variant="secondary" wire:click="$dispatch('closeModal')">{{ $loaded ? __('common.cancel') : __('common.close') }}</x-btn>
        @if ($loaded)
            <x-btn variant="primary" wire:click="save" wire:target="save" wire:loading.attr="disabled">
                <x-icon name="shield" class="h-3.5 w-3.5" wire:loading.remove wire:target="save" />
                <svg wire:loading wire:target="save" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
                {{ __('common.save') }}
            </x-btn>
        @endif
    </div>
</div>
