{% extends "dashboard/base.html.twig" %}

{% block class %}twofas-user{% endblock %}

{% block page %}
    <div class="twofas-welcome-box">
        <div class="row">
            <div class="col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0 twofas-welcome-box-col">
                <div class="twofas-welcome-box-section">
                    <div class="twofas-badge">1</div>
                    <h2>{{ esc_html__('First Factor', '2fas') }}</h2>
                    <p>{{ esc_html__('Your login & password', '2fas')|raw }}</p>
                    <div class="twofas-login-form">
                        <img src="{{ assets_url }}images/login_form.png" alt="Login Form">
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0 twofas-welcome-box-col">
                <div class="twofas-welcome-box-section twofas-decoration">
                    <div class="twofas-badge">2</div>
                    <h2>{{ esc_html__('Second Factor', '2fas') }}</h2>
                    <p>{{ esc_html__('Additional layer of security', '2fas') }}</p>

                    {% if is_2fa_enabled %}
                        {% set button_class = 'twofas-enabled' %}

                        {% if is_2fa_enabled_in_legacy_mode %}
                            {% set action = constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_DISABLE_SMS') %}
                        {% else %}
                            {% set action = constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_DISABLE_TOTP') %}
                        {% endif %}
                    {% else %}
                        {% set button_class = 'twofas-disabled' %}
                        {% set action = constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_ENABLE_TOTP') %}
                    {% endif %}

                    <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), action) }}" method="post" {% if is_2fa_enabled and is_totp_enabled %}class="js-open-disable-totp-modal"{% endif %}>
                        {{ create_form_nonce(action) | raw }}
                        <button class="twofas-switch {{ button_class }}">
                            <span class="twofas-on">{{ esc_html__('On', '2fas')|upper }}</span>
                            <span class="twofas-off">{{ esc_html__('Off', '2fas')|upper }}</span>
                        </button>
                    </form>

                    <div class="twofas-welcome-box-block-container">
                        <div class="twofas-welcome-box-block">
                            <div class="twofas-welcome-box-block-content twofas-tooltip"
                                 data-tooltip="{{ esc_attr__('Insert the 6-digit token generated in your 2FAS app', '2fas') }}">
                                <div class="twofas-icon-container">
                                    <i class="twofas-icon twofas-icon-tokens"></i>
                                </div>
                                <p>{{ esc_html__('2FAS Tokens', '2fas') }}</p>
                                {% if is_2fa_enabled and is_totp_enabled %}
                                    <i class="twofas-icon twofas-icon-tick-enabled"></i>
                                {% else %}
                                    <i class="twofas-icon twofas-icon-tick"></i>
                                {% endif %}
                            </div>
                        </div>
                        <div class="twofas-welcome-box-block">
                            <div class="twofas-welcome-box-block-content">
                                <div class="twofas-icon-container">
                                    <i class="twofas-icon twofas-icon-backup-codes"></i>
                                </div>
                                <p>{{ esc_html__('Backup codes', '2fas') }}</p>
                                {% if (is_2fa_enabled and is_sms_enabled and is_plan_premium) or (is_2fa_enabled and are_offline_codes_enabled and offline_codes_count > 0) %}
                                    <i class="twofas-icon twofas-icon-tick-enabled"></i>
                                {% else %}
                                    <i class="twofas-icon twofas-icon-tick js-backup-codes-tick"></i>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="twofas-welcome-box-block-container">
                        <div class="twofas-welcome-box-block twofas-big">
                            <div class="twofas-welcome-box-block-content">
                                <div class="twofas-icon-container">
                                    <i class="twofas-icon twofas-icon-trusted"></i>
                                </div>
                                <p>{{ esc_html__('Trusted devices', '2fas') }}</p>
                                {% if is_2fa_enabled and trusted_device_count > 0 %}
                                    <i class="twofas-icon twofas-icon-tick-enabled"></i>
                                {% else %}
                                    <i class="twofas-icon twofas-icon-tick"></i>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0 twofas-welcome-box-col">
                <div class="twofas-welcome-box-section">
                    <div class="twofas-badge">3</div>
                    <h2>{{ esc_html__('Admin Panel', '2fas') }}</h2>
                    <p>{{ esc_html__('Area that you want to secure', '2fas') }}</p>
                    <div class="twofas-login-form">
                        <img src="{{ assets_url }}images/admin_panel.png" alt="{{ esc_attr__('Admin Panel', '2fas') }}">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="twofas-bar">
        <ul class="twofas-list-inline">
            <li{% if 'tokens' == active_tab %} class="twofas-active"{% endif %}>
                <a href="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL')) }}">
                    <span>
                        <span class="twofas-line">{{ esc_html__('2FAS Tokens', '2fas')|upper }}</span>
                    </span>
                </a>
            </li>
            <li
                {% if 'offline_codes' == active_tab %}
                    class="twofas-active"
                {% elseif not is_2fa_enabled %}
                    class="twofas-disabled"
                {% endif %}
            >
                <a href="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_CONFIGURE_OFFLINE_CODES')) }}">
                    <span>
                        <span class="twofas-line">{{ esc_html__('Backup codes', '2fas')|upper }}</span>
                        <span class="twofas-hyphen"> &mdash; </span>
                        <span class="twofas-line">OFFLINE</span>
                    </span>
                    <span class="twofas-badge">{{ offline_codes_count | default(0) }}</span>
                </a>
            </li>
            {% if is_plan_premium and has_client_card %}
            <li
                    {% if 'sms' == active_tab %}
                        class="twofas-active"
                    {% elseif not is_2fa_enabled %}
                        class="twofas-disabled"
                    {% endif %}
            >
                <a href="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_CONFIGURE_SMS')) }}">
                    <span>
                        <span class="twofas-line">{{ esc_html__('Backup codes', '2fas')|upper }}</span>
                        <span class="twofas-hyphen"> &mdash; </span>
                        <span class="twofas-line">SMS/VMS</span>
                    </span>
                </a>
            </li>
            {% endif %}

            {% if trusted_devices_enabled %}
            <li
                    {% if 'trusted_devices' == active_tab %}
                        class="twofas-active"
                    {% elseif not is_2fa_enabled %}
                        class="twofas-disabled"
                    {% endif %}
            >
                <a href="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_DISPLAY_TRUSTED_DEVICES')) }}">
                    <span>
                        <span class="twofas-line">{{ esc_html__('Trusted devices', '2fas')|upper }}</span>
                    </span>
                    <span class="twofas-badge">{{ trusted_device_count }}</span>
                </a>
            </li>
            {% endif %}

        </ul>
    </div>

    {% block tab %}{% endblock %}

    {% include 'modals/error-modal.html.twig' %}
    {% include 'modals/confirmation/disable-totp-modal.html.twig' %}
{% endblock %}