{{-- Storage settings on the left, the encryption key and connection test in
     the rail: both are one-action panels, and the key card is the thing an
     operator must be able to find again in a hurry. --}}
<div class="px-layout">
    <div class="min-w-0">
        <form method="POST" action="{{ route('settings.backups.update') }}">
            @csrf
            @method('PUT')

            <div class="px-panel p-3 p-md-4">
                <h2 class="h6 fw-semibold mb-2">{{ __('settings::messages.backups.heading') }}</h2>
                <p class="px-subtitle mb-4 pb-3 border-bottom"
                   style="border-color: var(--px-border) !important;">
                    {{ __('settings::messages.backups.intro') }}
                </p>

                @if ($backupEnvBucket !== '' && ! $settings->get('backup.s3_bucket'))
                    <div class="px-advice px-advice--info d-flex align-items-start gap-2 mb-3">
                        <i class="bi bi-info-circle mt-1" aria-hidden="true"></i>
                        <span>{{ __('settings::messages.backups.env_configured', ['bucket' => $backupEnvBucket]) }}</span>
                    </div>
                @endif

                <div class="mb-3">
                    <label for="backup_bucket" class="px-field-label">{{ __('settings::messages.backups.bucket') }}</label>
                    <input type="text" id="backup_bucket" name="backup_bucket" autocomplete="off" @disabled(! $canUpdate)
                           value="{{ old('backup_bucket', $settings->get('backup.s3_bucket')) }}"
                           class="form-control px-input font-monospace @error('backup_bucket') is-invalid @enderror">
                    <span class="px-hint">{{ __('settings::messages.backups.bucket_help') }}</span>
                    @error('backup_bucket')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="row g-3">
                    <div class="col-12 col-sm-4 mb-3">
                        <label for="backup_region" class="px-field-label">{{ __('settings::messages.backups.region') }}</label>
                        <input type="text" id="backup_region" name="backup_region" placeholder="auto" @disabled(! $canUpdate)
                               value="{{ old('backup_region', $settings->get('backup.s3_region')) }}"
                               class="form-control px-input @error('backup_region') is-invalid @enderror">
                        @error('backup_region')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12 col-sm-8 mb-3">
                        <label for="backup_endpoint" class="px-field-label">{{ __('settings::messages.backups.endpoint') }}</label>
                        <input type="url" id="backup_endpoint" name="backup_endpoint" autocomplete="off" @disabled(! $canUpdate)
                               value="{{ old('backup_endpoint', $settings->get('backup.s3_endpoint')) }}"
                               class="form-control px-input @error('backup_endpoint') is-invalid @enderror">
                        <span class="px-hint">{{ __('settings::messages.backups.endpoint_help') }}</span>
                        @error('backup_endpoint')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="mb-3">
                    <label for="backup_key" class="px-field-label">{{ __('settings::messages.backups.access_key') }}</label>
                    <input type="text" id="backup_key" name="backup_key" autocomplete="off" @disabled(! $canUpdate)
                           value="{{ old('backup_key', $settings->get('backup.s3_key')) }}"
                           class="form-control px-input font-monospace @error('backup_key') is-invalid @enderror">
                    <span class="px-hint">{{ __('settings::messages.backups.access_key_help') }}</span>
                    @error('backup_key')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                </div>

                {{-- The stored secret is never sent to the browser. The field
                     shows whether one exists; leaving it blank keeps it. --}}
                <div class="mb-3">
                    <label for="backup_secret" class="px-field-label">{{ __('settings::messages.backups.secret') }}</label>
                    <input type="password" id="backup_secret" name="backup_secret" autocomplete="new-password" @disabled(! $canUpdate)
                           class="form-control px-input @error('backup_secret') is-invalid @enderror">
                    <span class="px-hint">
                        {{ $backupSecretSet
                            ? __('settings::messages.backups.secret_set')
                            : __('settings::messages.backups.secret_not_set') }}
                    </span>
                    @error('backup_secret')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror

                    @if ($backupSecretSet && $canUpdate)
                        <div class="form-check mt-2">
                            <input type="checkbox" id="clear_secret" name="clear_secret" value="1" class="form-check-input">
                            <label for="clear_secret" class="form-check-label small">
                                {{ __('settings::messages.backups.clear_secret') }}
                            </label>
                        </div>
                    @endif
                </div>

                <div class="row g-3">
                    <div class="col-12 col-sm-6 mb-0">
                        <div class="form-check mt-sm-4">
                            <input type="checkbox" id="backup_path_style" name="backup_path_style" value="1" @disabled(! $canUpdate)
                                   @checked(old('backup_path_style', $settings->get('backup.s3_path_style')))
                                   class="form-check-input">
                            <label for="backup_path_style" class="form-check-label">
                                {{ __('settings::messages.backups.path_style') }}
                            </label>
                            <span class="px-hint">{{ __('settings::messages.backups.path_style_help') }}</span>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6 mb-0">
                        <label for="backup_retention_days" class="px-field-label">{{ __('settings::messages.backups.retention') }}</label>
                        <input type="number" id="backup_retention_days" name="backup_retention_days" min="1" max="3650" @disabled(! $canUpdate)
                               value="{{ old('backup_retention_days', $settings->get('backup.retention_days') ?? 30) }}"
                               class="form-control px-input @error('backup_retention_days') is-invalid @enderror">
                        <span class="px-hint">{{ __('settings::messages.backups.retention_help') }}</span>
                        @error('backup_retention_days')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            @if ($canUpdate)
                <div class="mt-4">
                    <button type="submit" class="btn px-btn-primary">{{ __('common.save') }}</button>
                </div>
            @endif
        </form>
    </div>

    <aside class="px-aside">
        <div class="px-panel p-3 p-md-4">
            <h2 class="h6 fw-semibold mb-3">{{ __('settings::messages.backups.key_heading') }}</h2>

            @if (session('backup_generated_key'))
                {{-- Rendered exactly once — the value is flashed, so a refresh
                     clears it. This is the operator's one chance to copy it. --}}
                <div class="px-advice px-advice--caution d-flex align-items-start gap-2 mb-3">
                    <i class="bi bi-exclamation-triangle mt-1" aria-hidden="true"></i>
                    <span>{{ __('settings::messages.backups.key_copy_warning') }}</span>
                </div>

                <pre class="px-panel p-2 mb-2 user-select-all text-break small"
                     style="white-space: pre-wrap; word-break: break-all;"><code>{{ session('backup_generated_key') }}</code></pre>

                <p class="px-hint mb-0">{{ __('settings::messages.backups.key_copy_where') }}</p>
            @elseif ($backupKeySet)
                <p class="small mb-1 d-flex align-items-center gap-2">
                    <i class="bi bi-shield-check text-success" aria-hidden="true"></i>
                    {{ __('settings::messages.backups.key_set') }}
                </p>
                <p class="px-hint mb-0">{{ __('settings::messages.backups.key_set_note') }}</p>
            @else
                <p class="px-hint mt-0 mb-3">{{ __('settings::messages.backups.key_intro') }}</p>

                @if ($canUpdate)
                    <form method="POST" action="{{ route('settings.backups.key') }}">
                        @csrf
                        <button type="submit" class="btn px-btn-ghost w-100">
                            {{ __('settings::messages.backups.key_generate') }}
                        </button>
                    </form>
                @endif
            @endif
        </div>

        @if ($canUpdate)
            {{-- Its own form: probing the bucket must not save half-typed
                 settings — it tests what is stored, not what is on screen. --}}
            <div class="px-panel p-3 p-md-4">
                <h2 class="h6 fw-semibold mb-2">{{ __('settings::messages.backups.test') }}</h2>
                <p class="px-hint mt-0 mb-3">{{ __('settings::messages.backups.test_help') }}</p>

                <form method="POST" action="{{ route('settings.backups.test') }}">
                    @csrf
                    <button type="submit" class="btn px-btn-ghost w-100">
                        {{ __('settings::messages.backups.test_run') }}
                    </button>
                </form>
            </div>
        @endif
    </aside>
</div>