<h3 class="twofas-backup-codes-header js-twofas-backup-codes-box{% if twofas_light_user_is_configured and twofas_light_totp_status == 'totp_enabled' %} twofas-show{% endif %}">{{ esc_html__('WordPress plugin backup codes', '2fas-light') }}</h3>

<div class="twofas-backup-codes-box js-twofas-backup-codes-box{% if twofas_light_user_is_configured and twofas_light_totp_status == 'totp_enabled' %} twofas-show{% endif %}">
    <div class="twofas-backup-codes-box-new {% if twofas_light_backup_codes_count == 0 %} twofas-show {% endif %}">
        <h4>{{ esc_html__('Generate backup codes', '2fas-light') }}</h4>
        <p>
            {{
            sprintf(
                esc_html__('Use backup codes to authenticate this WordPress account in case you%sloose your phone or can’t access your 2FAS mobile application.', '2fas-light'),
                '<br />'
            )|raw
            }}
        </p>
        {% include 'includes/backup_codes_tutorial.html.twig' %}

        <button class="twofas-btn js-twofas-generate-backup-codes">{{ esc_html__('Generate backup codes', '2fas-light') }}</button>
    </div>
    <div class="twofas-backup-codes-box-current {% if twofas_light_backup_codes_count > 0 %}twofas-show{% endif %}">
        <h4>{{ esc_html__('Your backup codes are active.', '2fas-light') }}</h4>
        <p>
            {{
            sprintf(
                esc_html__('Use backup codes to authenticate this WordPress account in case you%sloose your phone or can’t access your 2FAS mobile application.', '2fas-light'),
                '<br />'
            )|raw
            }}
        </p>

        {% include 'includes/backup_codes_tutorial.html.twig' %}

        <div class="twofas-backup-codes-box-current-stats">
            <h5>
                {{
                    sprintf( _n( '%s backup code left', '%s backup codes left', twofas_light_backup_codes_count, '2fas-light' ), twofas_light_backup_codes_count )|raw
                }}
            </h5>
        </div>

        <div class="twofas-backup-codes-box-current-footer">
            <p>{{ esc_html__('Lost your backup codes?', '2fas-light') }} <a href="#" class="js-twofas-regenerate-backup-codes">{{ esc_html__('Generate again', '2fas-light') }}</a></p>
        </div>
    </div>

</div>
