<form class="form-horizontal" onsubmit="return false;">
    <fieldset>
        <legend>{{ _('Password') }}</legend>
        <p>
            {{ _('If you do not wish to change your password, just leave the following fields empty.') }}
        </p>
        <div class="control-group" data-bind="css: {error: access_currentPasswordMismatch()}">
            <label class="control-label" for="userSettings-access_currentPassword">{{ _('Current Password') }}</label>
            <div class="controls">
                <input type="password" class="input-block-level" id="userSettings-access_currentPassword" data-bind="value: access_currentPassword, valueUpdate: 'afterkeydown'" required>
                <span class="help-inline" data-bind="visible: access_currentPasswordMismatch()">{{ _('Passwords do not match') }}</span>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="userSettings-access_password">{{ _('New Password') }}</label>
            <div class="controls">
                <input type="password" class="input-block-level" id="userSettings-access_password" data-bind="value: access_password" required>
            </div>
        </div>
        <div class="control-group" data-bind="css: {error: passwordMismatch()}">
            <label class="control-label" for="userSettings-access_repeatedPassword">{{ _('Repeat Password') }}</label>
            <div class="controls">
                <input type="password" class="input-block-level" id="userSettings-access_repeatedPassword" data-bind="value: access_repeatedPassword, valueUpdate: 'afterkeydown'" required>
                <span class="help-inline" data-bind="visible: passwordMismatch()">{{ _('Passwords do not match') }}</span>
            </div>
        </div>
        <p>{% trans %}
            Please note that you will be <strong>logged out immediately</strong> after changing your password and asked to login again.
        {% endtrans %}</p>
    </fieldset>
    <fieldset>
        <legend>{{ _('API Key') }}</legend>
        <div class="control-group">
            <label class="control-label" for="userSettings-access_apikey">{{ _('Current API Key') }}</label>
            <div class="controls" data-bind="visible: apiKeyVisible">
                <div class="input-append input-block-level">
                    <input type="text" readonly="readonly" id="userSettings-access_apikey" data-bind="value: access_apikey, attr: {placeholder: '{{ _('N/A')|esq }}'}">
                    <a class="btn add-on" title="Copy API Key to clipboard" data-bind="click: copyApikey, css: {'disabled': !access_apikey()}"><i class="fas fa-copy"></i></a>
                    <a class="btn add-on" title="Generate new API Key" data-bind="click: generateApikey"><i class="fas fa-sync"></i></a>
                    <a class="btn btn-danger add-on" title="Delete API Key" data-bind="click: deleteApikey, css: {'disabled': !access_apikey()}"><i class="far fa-trash-alt"></i></a>
                </div>
                <span class="help-block">{{ _('Please note that changes to the API key are applied immediately, without having to "Confirm" first.') }}</span>
            </div>
            <div class="controls" data-bind="visible: !apiKeyVisible()">
                <button class="btn" data-bind="click: revealApiKey, enabled: !revealingApiKey(), css: {disabled: revealingApiKey}"><i class="fas fa-spinner fa-spin" data-bind="visible: revealingApiKey"></i> {{ _('Reveal API Key') }}</button>
            </div>
        </div>
        <div class="control-group" data-bind="visible: access_apikey() && apiKeyVisible()">
            <label class="control-label">{{ _('QR Code') }}</label>
            <div class="controls">
                <div data-bind="qrcode: {text: access_apikey, size: 150}"></div>
            </div>
        </div>
    </fieldset>

    {% for key in templates.usersettings_mfa.order %}
        {% set entry, data = templates.usersettings_mfa.entries[key] %}
        {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
        <fieldset id="{{ data._div }}" data-test-id="usersettings-mfa-{{ data._div }}-content" {% if "classes" in data %}class="{{ data.classes|join(' ') }}"{% endif %}" {% if "styles" in data %}style="{{ data.styles|join(', ') }}"{% endif %}>
            <legend>2FA: {{ entry|e }}</legend>
            {% try "There was an error with the template {filename} at line number {lineno}: {exception}" %}{% include data.template ignore missing %}{% endtry %}
        </fieldset>
        {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
    {% endfor %}
</form>
