@php($canEdit = auth()->user()->can('settings.edit'))
<div class="mx-auto max-w-5xl space-y-6">
    <div>
        <h1 class="text-xl font-bold text-ink dark:text-slate-100">{{ __('app.settings.tabs.security') }}</h1>
        <p class="mt-1 text-sm text-muted dark:text-slate-400">{{ __('app.settings.security.desc') }}</p>
    </div>

    <x-settings-nav />

    @if ($notice)
        <x-alert type="success">{{ $notice }}</x-alert>
    @endif

    @if ($errors->any())
        <x-alert type="error">
            <ul class="list-disc space-y-1 ps-4">
                @foreach ($errors->all() as $message)
                    <li>{{ $message }}</li>
                @endforeach
            </ul>
        </x-alert>
    @endif

    @cannot('settings.edit')
        <x-alert type="info">{{ __('app.settings.read_only') }}</x-alert>
    @endcannot

    <form wire:submit="save" class="space-y-6" novalidate>
        <x-card :title="__('app.settings.sections.security')">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.input type="number" name="passwordMinLength" :label="__('app.settings.fields.password_min_length')"
                    wire:model="passwordMinLength" min="8" max="64" required :disabled="! $canEdit" />
                <x-form.input type="number" name="loginMaxAttempts" :label="__('app.settings.fields.login_max_attempts')"
                    wire:model="loginMaxAttempts" min="3" max="20" required :disabled="! $canEdit" />
                <x-form.input type="number" name="loginDecaySeconds" :label="__('app.settings.fields.login_decay_seconds')"
                    wire:model="loginDecaySeconds" min="30" max="900" required :disabled="! $canEdit" />
                <x-form.input type="number" name="sessionIdleMinutes" :label="__('app.settings.fields.session_idle_minutes')"
                    wire:model="sessionIdleMinutes" min="0" max="480" required :disabled="! $canEdit"
                    :hint="__('app.settings.security.idle_hint')" />
            </div>

            <div class="mt-5 grid gap-3 sm:grid-cols-2">
                <x-form.checkbox name="passwordRequireNumbers" :label="__('app.settings.fields.password_require_numbers')"
                    wire:model="passwordRequireNumbers" :disabled="! $canEdit" />
                <x-form.checkbox name="passwordRequireSymbols" :label="__('app.settings.fields.password_require_symbols')"
                    wire:model="passwordRequireSymbols" :disabled="! $canEdit" />
            </div>

            @can('settings.edit')
                <div class="mt-6 flex justify-end">
                    <x-button type="submit" wire:loading.attr="disabled" wire:target="save">
                        {{ __('app.settings.security.save') }}
                    </x-button>
                </div>
            @endcan
        </x-card>
    </form>

    <x-card :title="__('app.settings.sections.checks')">
        <p class="text-sm text-muted dark:text-slate-400">{{ __('app.settings.security.checks_desc') }}</p>

        <ul class="mt-4 divide-y divide-slate-200 dark:divide-slate-800">
            @foreach ($checks as $check)
                @php($tone = match ($check['status']) {
                    'pass' => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
                    'warn' => 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200',
                    default => 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200',
                })
                <li class="flex flex-wrap items-start justify-between gap-3 py-3">
                    <div class="min-w-0">
                        <p class="text-sm font-semibold text-ink dark:text-slate-100">{{ $check['label'] }}</p>
                        <p class="mt-0.5 text-xs text-muted dark:text-slate-400">{{ $check['message'] }}</p>
                    </div>
                    <span class="shrink-0 rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $tone }}">
                        {{ __('app.settings.security.status.'.$check['status']) }}
                    </span>
                </li>
            @endforeach
        </ul>

        <p class="mt-4 rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs text-muted dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-300">
            {{ __('app.settings.security.run_cli') }}
        </p>
    </x-card>
</div>