{% requirePermission "pp:settings" %}

{% extends "password-policy/_layouts/password-policy-cp.twig" %}
{% import '_includes/forms.twig' as forms %}

{% set tabs = {
    features: { label: 'Configuration'|t('password-policy'), url: '#features' },
    rules: { label: 'Password Rules'|t('password-policy'), url: '#rules' },
    retention: { label: 'Password Retention Features'|t('password-policy'), url: '#retention' },
} %}

{% block actionButton %}
    <input type="submit" class="btn submit" value="{{ 'Save'|t('app') }}">
{% endblock %}

{% block content %}
    <input type="hidden" name="action" value="password-policy/settings/save">
    <input type="hidden" name="pluginHandle" value="password-policy">

    <div id="features" class="flex-fields">
        <div class="field">
            {{ forms.lightswitchField({
                label: 'Enable "have i been pwned".'|t('password-policy'),
                instructions: "Do passwords need to be checked against the 'have i been pwned' database?"|t('password-policy'),
                name: 'settings[pwned]',
                on: settings.pwned,
            }) }}
        </div>

        <hr>

        <div class="field">
            {{ forms.lightswitchField({
                label: 'Show password strength indicator.'|t('password-policy'),
                instructions: "A password strength indicator helps giving users feedback about the safety of their chosen password.?"|t('password-policy'),
                name: 'settings[showStrengthIndicator]',
                on: settings.showStrengthIndicator,
            }) }}
        </div>

        <hr>

        <div class="field">
            {{ forms.lightswitchField({
                label: 'Enable CSP Nonce'|t('password-policy'),
                instructions: 'Generates a Content Security Policy nonce for the password indicator script. Useful for strict CSP policies that don\'t use `script-src \'self\'` and instead require nonces for all scripts, even external ones.'|t('password-policy'),
                name: 'settings[cspNonce]',
                on: settings.cspNonce,
                tip: 'Most users don\'t need this. Only enable if you have a strict CSP policy that requires nonces for external scripts instead of allowing `\'self\'`.'|t('password-policy'),
            }) }}
        </div>
    </div>

    <div id="rules" class="hidden flex-fields">
        <div class="field">
            {{ forms.autosuggestField({
                label: 'The minimum password length.'|t('password-policy'),
                instructions: "The minimum length a password should be, less than 6 is not allowed."|t('password-policy'),
                name: 'settings[minLength]',
                suggestEnvVars: true,
                value: settings.minLength,
                required: true,
            }) }}
        </div>

        <div class="field">
            {{ forms.autosuggestField({
                label: 'The maximum password length.'|t('password-policy'),
                instructions: "The maximum length a password should be."|t('password-policy'),
                name: 'settings[maxLength]',
                suggestEnvVars: true,
                value: settings.maxLength,
                required: false,
            }) }}
        </div>

        <div class="field">
            {{ forms.lightswitchField({
                label: 'Enforce numbers.'|t('password-policy'),
                instructions: "If numbers should be enforced on a chosen password."|t('password-policy'),
                name: 'settings[numbers]',
                on: settings.numbers,
            }) }}
        </div>

        <div class="field">
            {{ forms.lightswitchField({
                label: 'Enforce cases.'|t('password-policy'),
                instructions: "If both uppercase and lowercase characters should be enforced on a chosen password."|t('password-policy'),
                name: 'settings[cases]',
                on: settings.cases,
            }) }}
        </div>

        <div class="field">
            {{ forms.lightswitchField({
                label: 'Enforce symbols.'|t('password-policy'),
                instructions: "If symbols should be enforced on a chosen password."|t('password-policy'),
                name: 'settings[symbols]',
                on: settings.symbols,
            }) }}
        </div>
    </div>

    <div id="retention" class="hidden flex-fields">
        <div class="field">
            {{ forms.lightswitchField({
                label: 'Enable retention utilities.'|t('password-policy'),
                instructions: "If you want to allow password retention utilities."|t('password-policy'),
                name: 'settings[retentionUtilities]',
                on: settings.retentionUtilities,
            }) }}
        </div>

        <hr />

        {%- set expiryInput %}
            <div class="flex">
                <div class="field">
                    {{ forms.text({
                        label: 'Expiry'|t('password-policy'),
                        class: 'ltr',
                        name: 'settings[expiryAmount]',
                        size: 2,
                        suggestEnvVars: true,
                        value: settings.expiryAmount,
                    }) }}
                </div>

                <div>
                    {{ forms.select({
                        name: 'settings[expiryPeriod]',
                        options: [
                            { label: 'Day(s)'|t('password-policy'), value: 'day' },
                            { label: 'Week(s)'|t('password-policy'), value: 'week' },
                            { label: 'Month(s)'|t('password-policy'), value: 'month' },
                            { label: 'Year(s)'|t('password-policy'), value: 'year' },
                        ],
                        value: settings.expiryPeriod,
                        toggle: true,
                    }) }}
                </div>
            </div>
        {%- endset -%}

        {{ forms.field({
            label: "The expiry period."|t('password-policy'),
            instructions: "Add a period in which passwords should be resetted, users will get a notification when their password is expired.",
            id: 'expiryInput',
        }, expiryInput) }}
    </div>
{% endblock %}