{% 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-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-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') }}"></div>
<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-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}\"?') }}"
     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.') }}"
     data-label-failed-add-passkey="{{ gettext('Failed to add passkey.') }}"
     data-label-confirm-delete-passkey="{{ gettext('Delete passkey \"{name}\"?') }}"
     data-label-failed-delete-passkey="{{ gettext('Failed to delete passkey.') }}"
     data-label-passkey-deleted="{{ gettext('Passkey deleted.') }}"
     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.') }}"
     data-label-failed-revoke="{{ gettext('Failed to revoke consent.') }}"
     data-label-disconnected="{{ gettext('Disconnected.') }}"
     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.') }}"
     class="is-hidden"></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 -->
    {% if show_pin_change %}
    <div class="settings-card">
        <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 -->
    {% if show_redeploy %}
    <div class="settings-card">
        <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') }}"
         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') }}"
         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">
            <label for="passkeyName">{{ gettext("Passkey Name") }}</label>
            <input type="text" id="passkeyName" placeholder="{{ gettext('e.g. iphone, laptop, work-pc') }}" autocomplete="off">
            <button type="button" id="addPasskeyBtn" class="btn btn-primary mt-8">{{ gettext("Add Passkey") }}</button>
            <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>

    <!-- Admin access: opt-in. Hidden by default; revealed by
         loadAdminAccess() when the server reports available=true
         (sso_temp_pass_role config parameter resolvable on the home
         site). Toggling flips allow_temp_paswords 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>

    <!-- 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>

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