{# An encrypted backup: its password first (routes._summary_or_password_prompt). wrong: the last one didn't open it. #}
{% if wrong %}<div class="alert alert--error">Invalid backup password.</div>{% endif %}
<section class="card" id="backup-password-prompt-panel">
    <h2><i class="fas fa-lock"></i> Encrypted Backup</h2>
    <p>This backup file is encrypted. Please enter the password to decrypt and validate it:</p>
    <form class="stacked-form" hx-post="/admin/panels/backup/validate-password" hx-target="#backup-upload-target"
          hx-swap="innerHTML" hx-disabled-elt="find button[type=submit]">
        <input type="hidden" name="filename" value="{{ filename }}">
        <input type="hidden" name="is_local" value="{{ 'true' if is_local else 'false' }}">
        <div class="form-group">
            <div class="pw-field"><input type="password" id="backup-restore-password" name="password" class="form-control"
                placeholder="Enter password" required><button type="button" class="pw-reveal" data-reveal="backup-restore-password"
                aria-controls="backup-restore-password" aria-pressed="false">Show</button></div>
        </div>
        <div class="validation-actions">
            <button type="submit" class="btn primary">Verify Password</button>
            <button type="button" class="btn secondary" onclick="document.getElementById('backup-password-prompt-panel').remove()">Cancel</button>
        </div>
    </form>
</section>