{% extends 'plugin_main_page.html.twig' %}

{% block content %}
    {% include 'includes/config_bar.html.twig' with {
        'twofas_light_totp_status': twofas_light_totp_status
    } %}

    <h4 class="js-twofas-configuration-subheader{% if twofas_light_user_is_configured %} twofas-hidden{% endif %}">{{ esc_html__( 'Follow these instructions to configure 2FAS security tokens correctly.', '2fas-light' ) }}</h4>

    {% include 'includes/configured_box.html.twig' with {
        'twofas_light_user_is_configured': twofas_light_user_is_configured,
        'twofas_light_user_configuration_date': twofas_light_user_configuration_date,
        'twofas_light_totp_status': twofas_light_totp_status
    } %}

    {% if remember_browser_allowed %}
    <h3 class="twofas-light-trusted-devices-header js-twofas-light-trusted-devices-box{% if twofas_light_user_is_configured and twofas_light_totp_status == 'totp_enabled' %} twofas-show{% endif %}">{{ esc_html__( 'Trusted web browsers on your devices', '2fas-light' ) }}</h3>

    <div class="twofas-light-card twofas-light-trusted-devices js-twofas-light-trusted-devices-box{% if twofas_light_user_is_configured and twofas_light_totp_status == 'totp_enabled' %} twofas-show{% endif %}">
        <div class="twofas-light-trusted-devices-desc">
            <h4>{{ esc_html__( 'The following list contains all of your trusted browsers and devices.', '2fas-light' ) }}</h4>
            <h5>
                {{
                sprintf(
                    esc_html__('Logging in from the following web browsers/devices does not require Two Factor  %sAuthentication.', '2fas-light'),
                    '<br />'
                )|raw
                }}
            </h5>
        </div>

        <div class="twofas-light-trusted-devices-table js-twofas-light-trusted-devices-wrapper">
            {% include 'includes/trusted_devices.html.twig' with {
                'trusted_devices': trusted_devices
            } %}
        </div>

        <div class="twofas-light-trusted-devices-help">
            <a href="#" class="js-twofas-how-to-add-a-new-device">{{ esc_html__( 'How to add a new device?', '2fas-light' ) }}</a>
        </div>
    </div>

    {% endif %}

    {% include 'includes/backup_codes_box.html.twig' with {
        'twofas_light_user_is_configured': twofas_light_user_is_configured,
        'twofas_light_totp_status': twofas_light_totp_status
    } %}

    {% include 'includes/danger_zone_box.html.twig' with {
        'twofas_light_user_is_configured': twofas_light_user_is_configured
    } %}

    <div class="twofas-config-wrapper js-twofas-config-wrapper{% if not twofas_light_user_is_configured %} twofas-show{% endif %}">
        <div class="twofas-card">
            <div class="twofas-breadcrumb">
                <div class="twofas-breadcrumb-step js-twofas-step-breadcrumb active" data-step="1">
                    <div class="twofas-breadcrumb-step-number">1</div>
                    <div class="twofas-breadcrumb-step-text">{{ esc_html__( 'Download 2FAS app', '2fas-light' ) }}</div>
                </div>

                <div class="twofas-breadcrumb-step js-twofas-step-breadcrumb" data-step="2">
                    <div class="twofas-breadcrumb-step-number">2</div>
                    <div class="twofas-breadcrumb-step-text">{{ esc_html__( 'Scan the QR code', '2fas-light' ) }}</div>
                </div>

                <div class="twofas-breadcrumb-step js-twofas-step-breadcrumb" data-step="3">
                    <div class="twofas-breadcrumb-step-number">3</div>
                    <div class="twofas-breadcrumb-step-text">{{ esc_html__( 'Enter 6-digit token', '2fas-light' ) }}</div>
                </div>
            </div>

            <div class="twofas-card-body">
                {% include 'steps/step_1.html.twig' with {
                    'twofas_light_plugin_path': twofas_light_plugin_path
                } %}

                {% include 'steps/step_2.html.twig' with {
                    'twofas_light_plugin_path': twofas_light_plugin_path,
                    'qr_code': qr_code
                } %}

                {% include 'steps/step_3.html.twig' with {
                    'totp_secret': totp_secret,
                    'form_nonce': create_form_nonce(constant('TwoFAS\\Light\\Http\\Action_Index::TWOFAS_ACTION_CONFIGURE_TOTP'))
                } %}
            </div>

            <div class="twofas-card-footer">
                <button class="twofas-btn-empty js-twofas-step-back-btn hidden">{{ esc_html__( 'Back', '2fas-light' ) }}</button>
                <button class="twofas-btn js-twofas-step-continue-btn">{{ esc_html__( 'Continue', '2fas-light' ) }}</button>
                <button class="twofas-btn js-twofas-totp-submit hidden">{{ esc_html__( 'Finish configuration', '2fas-light' ) }}</button>
            </div>
        </div>
    </div>

{% endblock %}
{% block modals %}
    {% include 'includes/confirmation_modal.html.twig' %}
    {% include 'includes/remove_config_modal.html.twig' %}
    {% include 'includes/remove_trusted_device_modal.html.twig' %}
    {% include 'includes/private_key_modal.html.twig' with {
        'totp_secret': totp_secret
    } %}
    {% include 'includes/backup_codes_modal.html.twig' %}
    {% include 'includes/backup_codes_modal_confirm.html.twig' %}
    {% include 'includes/how_to_add_a_new_device_modal.html.twig' %}
    {% include 'includes/totp_switch_modal.html.twig' %}
{% endblock %}