{% 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>First Factor</h2>
                    <p>Your login &amp; password</p>
                    <div class="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 decoration">
                    <div class="twofas-badge">2</div>
                    <h2>Second Factor</h2>
                    <p>Additional layer of security</p>

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

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

                    <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), action) }}" method="post" {% if is_2fa_enabled and is_totp_enabled %}class="js-open-disable-totp-modal"{% endif %}>
                        {{ url.create_form_nonce(action) | raw }}
                        <button class="twofas-switch {{ button_class }}">
                            <span class="on">ON</span>
                            <span class="off">OFF</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="Insert the 6-digit token generated in your 2FAS app">
                                <div class="icon-container">
                                    <i class="icon icon-tokens"></i>
                                </div>
                                <p>2FAS Tokens</p>
                                {% if is_2fa_enabled and is_totp_enabled %}
                                    <i class="icon icon-tick-enabled"></i>
                                {% else %}
                                    <i class="icon icon-tick"></i>
                                {% endif %}
                            </div>
                        </div>
                        <div class="twofas-welcome-box-block">
                            <div class="twofas-welcome-box-block-content">
                                <div class="icon-container">
                                    <i class="icon icon-backup-codes"></i>
                                </div>
                                <p>Backup codes</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="icon icon-tick-enabled"></i>
                                {% else %}
                                    <i class="icon icon-tick js-backup-codes-tick"></i>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="twofas-welcome-box-block-container">
                        <div class="twofas-welcome-box-block big">
                            <div class="twofas-welcome-box-block-content">
                                <div class="icon-container">
                                    <i class="icon icon-trusted"></i>
                                </div>
                                <p>Trusted devices</p>
                                {% if is_2fa_enabled and trusted_device_count > 0 %}
                                    <i class="icon icon-tick-enabled"></i>
                                {% else %}
                                    <i class="icon 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>Admin Panel</h2>
                    <p>Area that you want to secure</p>
                    <div class="login-form">
                        <img src="{{ assets_url }}images/admin_panel.png" alt="Admin Panel">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="twofas-bar">
        <ul class="list-inline">
            <li{% if 'tokens' == active_tab %} class="active"{% endif %}>
                <a href="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL')) }}">
                    <span>
                        <span class="line">2FAS </span>
                        <span class="line">TOKENS</span>
                    </span>
                </a>
            </li>
            <li
                {% if 'offline_codes' == active_tab %}
                    class="active"
                {% elseif not is_2fa_enabled %}
                    class="disabled"
                {% endif %}
            >
                <a href="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_CONFIGURE_OFFLINE_CODES')) }}">
                    <span>
                        <span class="line">BACKUP CODES </span>
                        <span class="hyphen"> &mdash; </span>
                        <span class="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="active"
                    {% elseif not is_2fa_enabled %}
                        class="disabled"
                    {% endif %}
            >
                <a href="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_CONFIGURE_SMS')) }}">
                    <span>
                        <span class="line">BACKUP CODES </span>
                        <span class="hyphen"> &mdash; </span>
                        <span class="line">SMS/VMS</span>
                    </span>
                </a>
            </li>
            {% endif %}
            <li
                    {% if 'trusted_devices' == active_tab %}
                        class="active"
                    {% elseif not is_2fa_enabled %}
                        class="disabled"
                    {% endif %}
            >
                <a href="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DISPLAY_TRUSTED_DEVICES')) }}">
                    <span>
                        <span class="line">TRUSTED </span>
                        <span class="line">DEVICES</span>
                    </span>
                    <span class="twofas-badge">{{ trusted_device_count }}</span>
                </a>
            </li>
        </ul>
    </div>

    {% block tab %}{% endblock %}

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