{% extends "base.html" %}
{% block content %}
<div id="page-data"
     data-url-change-password="{{ url_for('change_password', _external=True, _scheme='https') }}"
     data-url-change-pin="{{ url_for('change_pin', _external=True, _scheme='https') }}"
     data-url-change-language="{{ url_for('change_language', _external=True, _scheme='https') }}"
     data-url-list-device-tokens="{{ url_for('list_device_tokens', _external=True, _scheme='https') }}"
     data-url-add-device-token="{{ url_for('add_device_token', _external=True, _scheme='https') }}"
     data-url-del-device-token="{{ url_for('del_device_token', _external=True, _scheme='https') }}"
     data-url-toggle-device-token="{{ url_for('toggle_device_token', _external=True, _scheme='https') }}"
     data-url-list-passkeys="{{ url_for('list_passkeys', _external=True, _scheme='https') }}"
     data-url-passkey-register-begin="{{ url_for('passkey_register_begin', _external=True, _scheme='https') }}"
     data-url-passkey-register-complete="{{ url_for('passkey_register_complete', _external=True, _scheme='https') }}"
     data-url-del-passkey="{{ url_for('del_passkey', _external=True, _scheme='https') }}"
     data-url-toggle-passkey="{{ url_for('toggle_passkey', _external=True, _scheme='https') }}"
     data-url-list-tiqr="{{ url_for('list_tiqr_tokens', _external=True, _scheme='https') }}"
     data-url-tiqr-enroll-begin="{{ url_for('tiqr_enroll_begin', _external=True, _scheme='https') }}"
     data-url-tiqr-enroll-status="{{ url_for('tiqr_enroll_status', _external=True, _scheme='https') }}"
     data-url-del-tiqr="{{ url_for('del_tiqr_token', _external=True, _scheme='https') }}"
     data-url-toggle-tiqr="{{ url_for('toggle_tiqr_token', _external=True, _scheme='https') }}"
     data-url-list-totp="{{ url_for('list_totp_tokens', _external=True, _scheme='https') }}"
     data-url-totp-enroll-begin="{{ url_for('totp_enroll_begin', _external=True, _scheme='https') }}"
     data-url-totp-enroll-verify="{{ url_for('totp_enroll_verify', _external=True, _scheme='https') }}"
     data-url-del-totp="{{ url_for('del_totp_token', _external=True, _scheme='https') }}"
     data-url-toggle-totp="{{ url_for('toggle_totp_token', _external=True, _scheme='https') }}"
     data-url-change-totp-pin="{{ url_for('change_totp_pin', _external=True, _scheme='https') }}"
     data-url-promote-token="{{ url_for('promote_token', _external=True, _scheme='https') }}"
     data-url-list-fido2="{{ url_for('list_fido2_tokens', _external=True, _scheme='https') }}"
     data-url-fido2-add-begin="{{ url_for('fido2_add_begin', _external=True, _scheme='https') }}"
     data-url-fido2-add-complete="{{ url_for('fido2_add_complete', _external=True, _scheme='https') }}"
     data-url-del-fido2="{{ url_for('del_fido2_token', _external=True, _scheme='https') }}"
     data-url-toggle-fido2="{{ url_for('toggle_fido2_token', _external=True, _scheme='https') }}"
     data-url-get-admin-access="{{ url_for('get_admin_access_state', _external=True, _scheme='https') }}"
     data-url-set-admin-access="{{ url_for('set_admin_access_state', _external=True, _scheme='https') }}"
     data-url-get-recovery-mail="{{ url_for('get_recovery_mail', _external=True, _scheme='https') }}"
     data-url-step-up-state="{{ url_for('get_step_up_state', _external=True, _scheme='https') }}"
     data-url-login-token-options="{{ url_for('get_login_token_options', _external=True, _scheme='https') }}"
     data-url-set-recovery-mail="{{ url_for('set_recovery_mail', _external=True, _scheme='https') }}"
     data-url-reauth="{{ url_for('reauth', _external=True, _scheme='https') }}"
     data-settings-path="{{ url_for('settings', _external=True, _scheme='https') }}"></div>
<!-- Labels the JS picks up from dataset. A message containing a double
     quote needs |forceescape: Jinja's newstyle gettext hands back a
     Markup, i.e. already-safe, so autoescape leaves the quote alone and
     it ends the attribute right there. What reached the browser was
     'Make ' instead of the whole sentence, and every confirm dialog
     built that way was cut off the same way. Same applies to '&'. -->
<div id="page-i18n"
     data-label-changing-password="{{ gettext('Changing password...') }}"
     data-label-password-failed="{{ gettext('Password change failed.') }}"
     data-label-password-success="{{ gettext('Password changed successfully.') }}"
     data-label-all-fields-required="{{ gettext('All fields are required.') }}"
     data-label-new-passwords-mismatch="{{ gettext('New passwords do not match.') }}"
     data-label-changing-pin="{{ gettext('Changing PIN...') }}"
     data-label-pin-failed="{{ gettext('PIN change failed.') }}"
     data-label-pin-success="{{ gettext('PIN changed successfully.') }}"
     data-label-new-pins-mismatch="{{ gettext('New PINs do not match.') }}"
     data-label-saving="{{ gettext('Saving...') }}"
     data-label-failed-save-language="{{ gettext('Failed to save language.') }}"
     data-label-failed-load-device-tokens="{{ gettext('Failed to load device tokens.') }}"
     data-label-failed-add-device-token="{{ gettext('Failed to add device token.') }}"
     data-label-failed-delete-device-token="{{ gettext('Failed to delete device token.') }}"
     data-label-failed-toggle-device-token="{{ gettext('Failed to update device token.') }}"
     data-label-device-name-required="{{ gettext('Device name is required.') }}"
     data-label-adding-device-token="{{ gettext('Adding device token...') }}"
     data-label-device-token-created="{{ gettext('Device token created.') }}"
     data-label-confirm-delete-device-token="{{ gettext('Delete device token \"{name}\"?')|forceescape }}"
     data-label-password-copied="{{ gettext('Password copied to clipboard.') }}"
     data-label-failed-copy-password="{{ gettext('Failed to copy password.') }}"
     data-label-failed-load-passkeys="{{ gettext('Failed to load passkeys.') }}"
     data-label-no-passkeys="{{ gettext('No passkeys yet.') }}"
     data-label-delete-btn="{{ gettext('Delete') }}"
     data-label-passkey-name-required="{{ gettext('Passkey name is required.') }}"
     data-label-https-required="{{ gettext('WebAuthn requires HTTPS.') }}"
     data-label-webauthn-unsupported="{{ gettext('WebAuthn is not supported in this browser.') }}"
     data-label-preparing-passkey="{{ gettext('Preparing passkey registration...') }}"
     data-label-failed-start-passkey="{{ gettext('Failed to start passkey registration.') }}"
     data-label-confirm-passkey="{{ gettext('Confirm on your device to create the passkey...') }}"
     data-label-completing-passkey="{{ gettext('Completing registration...') }}"
     data-label-passkey-reg-failed="{{ gettext('Passkey registration failed.') }}"
     data-label-passkey-added="{{ gettext('Passkey added.') }}"
     {# Shown as a dialog after a token was added, and only when ssod
        says there is something to wait for. The token exists at once,
        but signing in with it is decided on the site the account
        belongs to, and the assignment has to reach it first. For an
        account on this site that is instant and nothing is shown. #}
     data-label-token-sync-hint="{{ gettext('Your new token was created. It can take up to a minute before you can sign in with it.') }}"
     data-label-failed-add-passkey="{{ gettext('Failed to add passkey.') }}"
     data-label-confirm-delete-passkey="{{ gettext('Delete passkey \"{name}\"?')|forceescape }}"
     data-label-failed-delete-passkey="{{ gettext('Failed to delete passkey.') }}"
     data-label-passkey-deleted="{{ gettext('Passkey deleted.') }}"
     data-label-failed-toggle-passkey="{{ gettext('Failed to update passkey.') }}"
     data-label-failed-load-tiqr="{{ gettext('Failed to load phones.') }}"
     data-label-no-tiqr="{{ gettext('No phones enrolled yet.') }}"
     data-label-tiqr-name-required="{{ gettext('Device name is required.') }}"
     data-label-preparing-tiqr="{{ gettext('Preparing enrollment...') }}"
     data-label-failed-start-tiqr="{{ gettext('Failed to start tiqr enrollment.') }}"
     data-label-waiting-tiqr="{{ gettext('Waiting for your phone...') }}"
     data-label-tiqr-added="{{ gettext('Phone enrolled.') }}"
     data-label-tiqr-timeout="{{ gettext('The code expired. Please try again.') }}"
     data-label-confirm-delete-tiqr="{{ gettext('Remove phone \"{name}\"?')|forceescape }}"
     data-label-failed-delete-tiqr="{{ gettext('Failed to remove phone.') }}"
     data-label-tiqr-deleted="{{ gettext('Phone removed.') }}"
     data-label-failed-toggle-tiqr="{{ gettext('Failed to update phone.') }}"
     data-label-failed-load-totp="{{ gettext('Failed to load authenticator apps.') }}"
     data-label-no-totp="{{ gettext('No authenticator apps set up yet.') }}"
     data-label-preparing-totp="{{ gettext('Preparing setup...') }}"
     data-label-failed-start-totp="{{ gettext('Failed to start authenticator app setup.') }}"
     data-label-totp-code-required="{{ gettext('Please enter the code from your app.') }}"
     data-label-verifying-totp="{{ gettext('Verifying code...') }}"
     data-label-failed-verify-totp="{{ gettext('Failed to verify the code.') }}"
     data-label-totp-added="{{ gettext('Authenticator app added.') }}"
     data-label-confirm-delete-totp="{{ gettext('Remove authenticator app \"{name}\"?')|forceescape }}"
     data-label-failed-delete-totp="{{ gettext('Failed to delete authenticator app.') }}"
     data-label-totp-deleted="{{ gettext('Authenticator app removed.') }}"
     data-label-failed-toggle-totp="{{ gettext('Failed to update authenticator app.') }}"
     data-label-change-pin-btn="{{ gettext('Change PIN') }}"
     data-label-max-card-tokens="{{ gettext('You have the maximum number of tokens of this type ({max}).') }}"
     data-label-totp-pin-title="{{ gettext('New PIN for \"{name}\". The app keeps working, sign in with the new PIN followed by its code.')|forceescape }}"
     data-label-sso-token="{{ gettext('Default token') }}"
     data-label-make-sso-token="{{ gettext('Make default token') }}"
     data-label-confirm-promote-tiqr="{{ gettext('Make \"{name}\" your default token? Your current one keeps working under a new name.')|forceescape }}"
     data-label-prompt-old-tiqr-name="{{ gettext('Name for your current default token (\"{name}\"), which keeps working:')|forceescape }}"
     data-label-failed-load-fido2="{{ gettext('Failed to load security keys.') }}"
     data-label-no-fido2="{{ gettext('No security keys registered yet.') }}"
     data-label-key-name-required="{{ gettext('Key name is required.') }}"
     data-label-touch-key="{{ gettext('Touch your security key...') }}"
     data-label-adding-fido2="{{ gettext('Registering security key...') }}"
     data-label-fido2-added="{{ gettext('Security key registered.') }}"
     data-label-failed-add-fido2="{{ gettext('Failed to register security key.') }}"
     data-label-failed-delete-fido2="{{ gettext('Failed to delete security key.') }}"
     data-label-failed-toggle-fido2="{{ gettext('Failed to update security key.') }}"
     data-label-confirm-delete-fido2="{{ gettext('Delete security key \"{name}\"?')|forceescape }}"
     data-label-current-token-no-delete="{{ gettext('You are signed in with this one. Sign in with another factor to remove it.') }}"
     data-label-current-token-no-disable="{{ gettext('You are signed in with this one. Sign in with another factor to switch it off.') }}"
     data-label-need-old-tiqr-name="{{ gettext('Please enter a name for your current default token.') }}"
     data-label-failed-promote-tiqr="{{ gettext('Failed to change the default token.') }}"
     data-label-tiqr-promoted="{{ gettext('Default token changed.') }}"
     data-label-step-up-press-again="{{ gettext('Confirmed. Press the button again to continue.') }}"
     data-label-token-enabled="{{ gettext('Enabled') }}"
     data-label-token-disabled="{{ gettext('Disabled') }}"
     data-label-failed-load-consents="{{ gettext('Failed to load consents.') }}"
     data-label-no-connected-apps="{{ gettext('No connected applications.') }}"
     data-label-scopes-prefix="{{ gettext('Scopes:') }}"
     data-label-granted-prefix="{{ gettext('Granted:') }}"
     data-label-disconnect-btn="{{ gettext('Disconnect') }}"
     data-label-confirm-revoke="{{ gettext('Disconnect \"{name}\"? Active sessions for this application will be terminated.')|forceescape }}"
     data-label-failed-revoke="{{ gettext('Failed to revoke consent.') }}"
     data-label-disconnected="{{ gettext('Disconnected.') }}"
     data-label-failed-load-sessions="{{ gettext('Failed to load sessions.') }}"
     data-label-no-sessions="{{ gettext('No active sessions.') }}"
     data-label-current-session="{{ gettext('This session') }}"
     data-label-end-session-btn="{{ gettext('End session') }}"
     data-label-confirm-end-session="{{ gettext('End this session? Applications you signed in to with it will be signed out.') }}"
     data-label-failed-end-session="{{ gettext('Failed to end session.') }}"
     data-label-session-ended="{{ gettext('Session ended.') }}"
     data-label-session-login-prefix="{{ gettext('Login:') }}"
     data-label-session-expires-prefix="{{ gettext('Expires:') }}"
     data-label-session-client-prefix="{{ gettext('Client:') }}"
     data-label-session-token-prefix="{{ gettext('Token:') }}"
     data-label-admin-access-failed-load="{{ gettext('Failed to load admin access state.') }}"
     data-label-admin-access-failed-save="{{ gettext('Failed to update admin access.') }}"
     data-label-admin-access-on="{{ gettext('Admin access enabled.') }}"
     data-label-admin-access-off="{{ gettext('Admin access disabled.') }}"
     data-label-recovery-mail-failed-load="{{ gettext('Failed to load recovery mail.') }}"
     data-label-recovery-mail-failed-save="{{ gettext('Failed to save recovery mail.') }}"
     data-label-recovery-mail-saved="{{ gettext('Recovery mail saved.') }}"
     data-label-recovery-mail-cleared="{{ gettext('Recovery mail removed.') }}"
     data-label-recovery-mail-invalid="{{ gettext('Please enter a valid e-mail address.') }}"
     data-label-recovery-mail-none="{{ gettext('No recovery address set.') }}"
     data-label-confirm-remove-recovery-mail="{{ gettext('Remove your recovery e-mail address?') }}"
     class="is-hidden"></div>
{# Covers the page until every loader has settled. Rendered visible
   rather than switched on from JS: the cards below are revealed one
   by one as their requests come back, each one changing the page
   height, and somebody who starts scrolling into that lands somewhere
   else a moment later. settings.js removes it at the same point it
   restores the saved scroll position. #}
<div class="page-loading" id="settingsLoading">
  <div class="page-loading-box">
    <div class="page-loading-spinner"></div>
    <p>{{ gettext("Loading your settings...") }}</p>
  </div>
</div>
<div class="portal-wrapper">
    <h2>{{ gettext("Settings") }}</h2>

    <!-- Password Change -->
    {% if show_password_change %}
    <div class="settings-card">
        <h3>{{ gettext("Change Password") }}</h3>
        <div class="settings-form">
            <label for="currentPassword">{{ gettext("Current Password") }}</label>
            <input type="password" id="currentPassword" autocomplete="current-password">

            <label for="newPassword">{{ gettext("New Password") }}</label>
            <input type="password" id="newPassword" autocomplete="new-password">

            <label for="confirmPassword">{{ gettext("Confirm New Password") }}</label>
            <input type="password" id="confirmPassword" autocomplete="new-password">

            <button type="button" id="changePwBtn" class="btn btn-primary mt-8">{{ gettext("Change Password") }}</button>
            <div class="status-msg" id="pwStatus"></div>
            <div class="error-msg" id="pwError"></div>
        </div>
    </div>
    {% endif %}

    <!-- PIN Change of the login token, for tokens an administrator
         manages. Hidden until loadLoginTokenOptions() reports
         sso_allow_totp_mgmt off; with it on, the TOTP card sets PINs. -->
    {% if show_pin_change %}
    <div class="settings-card is-hidden" id="pinChangeCard">
        <h3>{{ gettext("Change PIN") }}</h3>
        <div class="settings-form">
            <label for="currentPin">{{ gettext("Current PIN") }}</label>
            <input type="password" id="currentPin" autocomplete="current-password" inputmode="numeric">

            <label for="newPin">{{ gettext("New PIN") }}</label>
            <input type="password" id="newPin" autocomplete="new-password" inputmode="numeric">

            <label for="confirmPin">{{ gettext("Confirm New PIN") }}</label>
            <input type="password" id="confirmPin" autocomplete="new-password" inputmode="numeric">

            <button type="button" id="changePinBtn" class="btn btn-primary mt-8">{{ gettext("Change PIN") }}</button>
            <div class="status-msg" id="pinStatus"></div>
            <div class="error-msg" id="pinError"></div>
        </div>
    </div>
    {% endif %}

    <!-- Login Token Re-Deploy. Hidden until loadLoginTokenOptions() sees
         sso_allow_login_token_redeploy on. -->
    {% if show_redeploy %}
    <div class="settings-card is-hidden" id="redeployCard">
        <h3>{{ gettext("Login Token") }}</h3>
        <p class="settings-desc">{{ gettext("Re-deploy your login token. This will replace your current login token with a new one.") }}</p>
        <a href="{{ url_for('settings_redeploy', _external=True, _scheme='https') }}" class="btn btn-secondary btn-small">{{ gettext("Re-deploy Login Token") }}</a>
    </div>
    {% endif %}

    <!-- Language -->
    <div class="settings-card">
        <h3>{{ gettext("Language") }}</h3>
        <p class="settings-desc">{{ gettext("Choose your preferred language. \"Browser default\" follows the language sent by your browser.") }}</p>
        <div class="settings-form">
            <label for="languageSelect">{{ gettext("Language") }}</label>
            <select id="languageSelect">
                <option value="default" {% if current_language == "default" %}selected{% endif %}>{{ gettext("Browser default") }}</option>
                {% for loc in locale_choices %}
                <option value="{{ loc.code }}" {% if current_language == loc.code %}selected{% endif %}>{{ loc.label }}</option>
                {% endfor %}
            </select>
            <button type="button" id="saveLanguageBtn" class="btn btn-primary mt-8">{{ gettext("Save") }}</button>
            <div class="status-msg" id="languageStatus"></div>
            <div class="error-msg" id="languageError"></div>
        </div>
    </div>

    <!-- Device Tokens (one card per configured device_token_roles role).
         When device_token_roles is not configured, nothing is rendered at
         all — the section just disappears from the settings page. -->
    <div id="deviceRolesContainer"></div>
    <div id="deviceI18n"
         data-label-device-tokens="{{ gettext('Device Tokens') }}"
         data-label-device-name="{{ gettext('Device Name') }}"
         data-label-device-name-placeholder="{{ gettext('e.g. my phone, work laptop') }}"
         data-label-add-device-token="{{ gettext('Add Device Token') }}"
         data-label-existing-device-tokens="{{ gettext('Existing Device Tokens') }}"
         data-label-no-device-tokens="{{ gettext('No device tokens yet.') }}"
         data-label-new-password="{{ gettext('New password:') }}"
         data-label-copy="{{ gettext('Copy') }}"
         data-label-shown-once="{{ gettext('This password is shown only once. Copy it now.') }}"
         data-label-delete="{{ gettext('Delete') }}"
         data-label-device-token-type="{{ gettext('Token Type') }}"
         data-label-type-password="{{ gettext('Password') }}"
         data-label-type-totp="{{ gettext('Authenticator app (TOTP)') }}"
         data-label-type-totp-short="{{ gettext('TOTP') }}"
         data-label-scan-totp="{{ gettext('Scan this code with your authenticator app:') }}"
         data-label-totp-secret="{{ gettext('Secret:') }}"
         data-label-totp-qr-alt="{{ gettext('TOTP code') }}"
         data-label-totp-shown-once="{{ gettext('This code is shown only once. Scan it now.') }}"
         data-label-max-device-tokens="{{ gettext('You have the maximum number of device tokens for this role ({max}).') }}"
         class="is-hidden"></div>

    <!-- Passkeys (WebAuthn discoverable credentials).
         Hidden by default; revealed by loadPasskeys() when the server
         reports allowed=true (sso_allow_passkeys config parameter). -->
    <div class="settings-card is-hidden" id="passkeyCard">
        <h3>{{ gettext("Passkeys") }}</h3>
        <p class="settings-desc">{{ gettext("Sign in without a password using a passkey on this device or a synced credential provider (iCloud Keychain, Google Password Manager, 1Password, ...).") }}</p>
        <div class="settings-form" id="passkeyAddForm">
            <!-- The fields below open from this button, after a
                 reauth if deploy_passkey_reauth wants one: the reauth
                 has to come before the name, not after the button that
                 registers -- see get_step_up_state in sso1.py. -->
            <button type="button" id="startPasskeyBtn" class="btn btn-primary">{{ gettext("Add Passkey") }}</button>
            <div id="passkeyLimit" class="hint is-hidden"></div>
            <div id="passkeyAddFields" class="is-hidden">
                <label for="passkeyName">{{ gettext("Passkey Name") }}</label>
                <input type="text" id="passkeyName" placeholder="{{ gettext('e.g. my iPhone, work laptop') }}" autocomplete="off">
                <button type="button" id="addPasskeyBtn" class="btn btn-primary mt-8">{{ gettext("Add Passkey") }}</button>
            </div>
            <div class="status-msg" id="passkeyStatus"></div>
            <div class="error-msg" id="passkeyError"></div>
        </div>
        <h4>{{ gettext("Existing Passkeys") }}</h4>
        <ul id="passkeyList" class="device-token-list"></ul>
    </div>

    <!-- FIDO2 security keys. Hidden until loadFido2Tokens() sees
         allowed=true (sso_allow_fido2), which also governs signing in
         with one. Same shape as the tiqr card below, including the SSO
         token being listed and promotable rather than deletable. -->
    <div class="settings-card is-hidden" id="fido2Card">
        <h3>{{ gettext("Security Keys (FIDO2)") }}</h3>
        <p class="settings-desc">{{ gettext("Sign in with a hardware security key (YubiKey, Nitrokey, Titan, ...). The key is plugged in or held to the device, and never leaves your hands.") }}</p>
        <div class="settings-form" id="fido2AddForm">
            <!-- Same as on the passkey card, for deploy_fido2_token_reauth. -->
            <button type="button" id="startFido2Btn" class="btn btn-primary">{{ gettext("Add Security Key") }}</button>
            <div id="fido2Limit" class="hint is-hidden"></div>
            <div id="fido2AddFields" class="is-hidden">
                <label for="fido2DeviceName">{{ gettext("Key Name") }}</label>
                <input type="text" id="fido2DeviceName" placeholder="{{ gettext('e.g. my YubiKey, backup key') }}" autocomplete="off">
                <button type="button" id="addFido2Btn" class="btn btn-primary mt-8">{{ gettext("Add Security Key") }}</button>
            </div>
            <div class="status-msg" id="fido2Status"></div>
            <div class="error-msg" id="fido2Error"></div>
        </div>
        <h4>{{ gettext("Registered Keys") }}</h4>
        <ul id="fido2List" class="device-token-list"></ul>
    </div>

    <!-- tiqr: phones enrolled for challenge-response login. The list
         includes the SSO token when that is a tiqr one, marked and
         without a delete button -- removing it would take the recovery
         flow with it, which looks up a token of that name. Moving that
         role to another phone is what the "Make SSO token" button
         does; it renames rather than deletes, so no phone is lost. -->
    <div class="settings-card is-hidden" id="tiqrCard">
        <h3>{{ gettext("Smartphone Authentication App (tiqr)") }}</h3>
        <p class="settings-desc">{{ gettext("Sign in by confirming on your phone. Scan the code with the tiqr app, or tap the link if you are reading this on the phone itself.") }}</p>
        <div class="settings-form" id="tiqrAddForm">
            <!-- Same as on the passkey card, for deploy_tiqr_token_reauth. -->
            <button type="button" id="startTiqrBtn" class="btn btn-primary">{{ gettext("Add Phone") }}</button>
            <div id="tiqrLimit" class="hint is-hidden"></div>
            <div id="tiqrAddFields" class="is-hidden">
                <label for="tiqrDeviceName">{{ gettext("Device Name") }}</label>
                <input type="text" id="tiqrDeviceName" placeholder="{{ gettext('e.g. my phone, work phone') }}" autocomplete="off">
                <button type="button" id="addTiqrBtn" class="btn btn-primary mt-8">{{ gettext("Add Phone") }}</button>
            </div>
            <div class="status-msg" id="tiqrStatus"></div>
            <div class="error-msg" id="tiqrError"></div>
        </div>
        <div class="is-hidden" id="tiqrEnrollBox">
            {# No tap-through link here, unlike the login page. The
               enrollment URL is tiqrenroll://https://host/... and a
               browser will not hand that to the app: its URL parser
               reads "https:" as a host with an empty port, drops the
               empty port, and the app receives tiqrenroll://https//...
               which it rejects. Tested against the app in every shape
               that survives the parser -- none is accepted. The login
               URL has no such problem (proper authority, no embedded
               URL), which is why that page still offers the link. #}
            <p class="settings-desc">{{ gettext("Scan this code with the tiqr app. You need the code on a different screen from the phone: the app only takes it through its own scanner. Waiting for your phone...") }}</p>
            <div class="qr-container">
                <img id="tiqrQrcodeImg" alt="{{ gettext('tiqr enrollment code') }}">
            </div>
            <div class="login-buttons">
                <button type="button" id="tiqrCancelBtn" class="btn btn-secondary">{{ gettext("Cancel") }}</button>
            </div>
        </div>
        <h4>{{ gettext("Enrolled Phones") }}</h4>
        <ul id="tiqrList" class="device-token-list"></ul>
    </div>

    <!-- TOTP: authenticator apps. Hidden until loadTotpTokens() sees
         allowed=true (sso_allow_totp), which also governs signing in
         with one. Same shape as the tiqr card. The token is created only
         once the first code from the app checks out, so a scan that went
         wrong leaves nothing behind. -->
    <div class="settings-card is-hidden" id="totpCard">
        <h3>{{ gettext("Authenticator App (TOTP)") }}</h3>
        <p class="settings-desc">{{ gettext("Sign in with your PIN followed by the six-digit code from an authenticator app (e.g. FreeOTP, Aegis, Google Authenticator).") }}</p>
        <div class="settings-form" id="totpAddForm">
            <!-- Same as on the passkey card, for deploy_totp_token_reauth. -->
            <button type="button" id="startTotpBtn" class="btn btn-primary">{{ gettext("Add Authenticator App") }}</button>
            <div id="totpLimit" class="hint is-hidden"></div>
            <div id="totpAddFields" class="is-hidden">
                <label for="totpDeviceName">{{ gettext("Device Name") }}</label>
                <input type="text" id="totpDeviceName" placeholder="{{ gettext('e.g. my phone, work phone') }}" autocomplete="off">
                <button type="button" id="addTotpBtn" class="btn btn-primary mt-8">{{ gettext("Add Authenticator App") }}</button>
            </div>
            <div class="status-msg" id="totpStatus"></div>
            <div class="error-msg" id="totpError"></div>
        </div>
        <div class="is-hidden" id="totpEnrollBox">
            <p class="settings-desc">{{ gettext("Scan this code with your authenticator app, or enter the secret by hand.") }}</p>
            <div class="qr-container">
                <img id="totpQrcodeImg" alt="{{ gettext('TOTP code') }}">
            </div>
            <div><strong>{{ gettext("Secret:") }}</strong> <code id="totpSecret"></code></div>
            <div><strong>{{ gettext("PIN:") }}</strong> <code id="totpPin"></code></div>
            <p class="hint">{{ gettext("Remember the PIN: you sign in with the PIN followed by the code from the app. Both are shown only once.") }}</p>
            <div class="settings-form">
                <label for="totpCode">{{ gettext("Code from the app") }}</label>
                <input type="text" id="totpCode" inputmode="numeric" autocomplete="one-time-code" maxlength="10">
                <div class="login-buttons">
                    <button type="button" id="verifyTotpBtn" class="btn btn-primary">{{ gettext("Verify") }}</button>
                    <button type="button" id="totpCancelBtn" class="btn btn-secondary">{{ gettext("Cancel") }}</button>
                </div>
                <div class="status-msg" id="totpEnrollStatus"></div>
                <div class="error-msg" id="totpEnrollError"></div>
            </div>
        </div>
        <!-- Opened by a token's "Change PIN" button, after a reauth if
             deploy_totp_token_reauth wants one. -->
        <div class="is-hidden" id="totpPinBox">
            <p class="settings-desc" id="totpPinTitle"></p>
            <div class="settings-form">
                <label for="totpNewPin">{{ gettext("New PIN") }}</label>
                <input type="password" id="totpNewPin" autocomplete="new-password" inputmode="numeric">
                <label for="totpConfirmPin">{{ gettext("Confirm New PIN") }}</label>
                <input type="password" id="totpConfirmPin" autocomplete="new-password" inputmode="numeric">
                <div class="login-buttons">
                    <button type="button" id="saveTotpPinBtn" class="btn btn-primary">{{ gettext("Change PIN") }}</button>
                    <button type="button" id="totpPinCancelBtn" class="btn btn-secondary">{{ gettext("Cancel") }}</button>
                </div>
                <div class="status-msg" id="totpPinStatus"></div>
                <div class="error-msg" id="totpPinError"></div>
            </div>
        </div>
        <h4>{{ gettext("Authenticator Apps") }}</h4>
        <ul id="totpList" class="device-token-list"></ul>
    </div>

    <!-- Recovery mail: address the SSO token recovery link is sent to.
         Address lives on the user object as otpmeRecoveryMail (LDIF
         attribute). Editing requires a fresh step-up reauth (within
         STEP_UP_MAX_AGE seconds of /reauth) so a forgotten-unlocked
         browser cannot silently pivot into an account-takeover
         setting. Display mode shows current address + small Edit
         button; Edit click redirects to /reauth?next=/settings#recoveryMailCard
         and after return the row swaps to input + small Save/Remove
         /Cancel. -->
    <div class="settings-card" id="recoveryMailCard">
        <h3>{{ gettext("Recovery E-Mail") }}</h3>
        <p class="settings-desc">{{ gettext("If you lose access to your default token, a re-deploy link is sent to this address. Keep it under an account only you control (private mailbox, not your work address). Editing requires re-authentication.") }}</p>
        <div class="settings-form">
            <div class="recovery-mail-display" id="recoveryMailDisplay">
                <span class="recovery-mail-value" id="recoveryMailValue"></span>
                <button type="button" id="editRecoveryMailBtn" class="btn btn-secondary btn-small">{{ gettext("Edit") }}</button>
            </div>
            <div class="recovery-mail-edit is-hidden" id="recoveryMailEdit">
                <input type="email" id="recoveryMailInput" autocomplete="email" spellcheck="false" placeholder="you@example.com">
                <div class="recovery-mail-actions">
                    <button type="button" id="saveRecoveryMailBtn" class="btn btn-primary btn-small">{{ gettext("Save") }}</button>
                    <button type="button" id="removeRecoveryMailBtn" class="btn btn-secondary btn-small">{{ gettext("Remove") }}</button>
                    <button type="button" id="cancelRecoveryMailBtn" class="btn btn-secondary btn-small">{{ gettext("Cancel") }}</button>
                </div>
            </div>
            <div class="status-msg" id="recoveryMailStatus"></div>
            <div class="error-msg" id="recoveryMailError"></div>
        </div>
    </div>

    <!-- Admin access: opt-in. Hidden by default; revealed by
         loadAdminAccess() when the server reports available=true
         (admin_access_role config parameter resolvable on the home
         site). Toggling flips allow_temp_passwords on the user and
         grants/revokes the set_temp_password ACL (recursive over
         tokens) to the configured role. -->
    <div class="settings-card is-hidden" id="adminAccessCard">
        <h3>{{ gettext("Admin Access") }}</h3>
        <p class="settings-desc">{{ gettext("Allow administrators to set a temporary password on your account for support purposes. Turn off when no longer needed.") }}</p>
        <div class="settings-form">
            <label class="toggle-label" for="adminAccessToggle">
                <span class="toggle-switch">
                    <input type="checkbox" id="adminAccessToggle" role="switch">
                    <span class="toggle-track" aria-hidden="true"></span>
                </span>
                <span class="toggle-text">{{ gettext("Allow admin access") }}</span>
            </label>
            <div class="status-msg" id="adminAccessStatus"></div>
            <div class="error-msg" id="adminAccessError"></div>
        </div>
    </div>

    <!-- Active sessions. Hidden by default; revealed by loadSessions()
         when the server reports allowed=true (sso_allow_session_mgmt).
         Only the sessions of this site are listed -- a session lives on
         the site its login happened on. -->
    <div class="settings-card is-hidden" id="sessionCard">
        <h3>{{ gettext("Active Sessions") }}</h3>
        <p class="settings-desc">
            {{ gettext("Where your account is currently logged in on this site. Ending a session also ends what it opened (applications you signed in to with it).") }}
        </p>
        <div class="status-msg" id="sessionStatus"></div>
        <div class="error-msg" id="sessionError"></div>
        <ul id="sessionList" class="device-token-list"></ul>
    </div>

    <!-- Connected applications (OIDC consents) -->
    <div class="settings-card">
        <h3>{{ gettext("Connected Applications") }}</h3>
        <p class="settings-desc">
            {{ gettext("Applications you have granted access to your account. Disconnecting removes the approval and terminates the application's active session.") }}
        </p>
        <div class="status-msg" id="consentStatus"></div>
        <div class="error-msg" id="consentError"></div>
        <ul id="oidcConsentList" class="device-token-list"></ul>
    </div>
</div>

<div id="oidc-consent-urls"
     data-url-list="{{ url_for('list_oidc_consents', _external=True, _scheme='https') }}"
     data-url-revoke="{{ url_for('revoke_oidc_consent', _external=True, _scheme='https') }}"
     class="is-hidden"></div>

<div id="session-urls"
     data-url-list="{{ url_for('list_sessions', _external=True, _scheme='https') }}"
     data-url-delete="{{ url_for('delete_session', _external=True, _scheme='https') }}"
     class="is-hidden"></div>

<script src="{{ url_for('static', filename='settings.js') }}"></script>
{% endblock %}