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

{% block tab %}
    <div class="twofas-content{% if is_totp_configured and not validation_error %} twofas-configured{% endif %}">
        <div class="twofas-content-container">
            <div class="twofas-content-header">
                <ul class="twofas-list-inline twofas-list-spacer">
                    {% if is_totp_configured %}
                        {% if is_totp_enabled %}
                            <li>
                                <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_DISABLE_TOTP')) }}"
                                      method="post" class="js-open-disable-totp-modal">
                                    {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_DISABLE_TOTP')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="twofas-success">{{ esc_html__('Enabled', '2fas')|upper }}</span>
                                    </button>
                                </form>
                            </li>
                        {% else %}
                            <li>
                                <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_ENABLE_TOTP')) }}"
                                      method="post">
                                    {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_ENABLE_TOTP')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="twofas-danger">{{ esc_html__('Disabled', '2fas')|upper }}</span>
                                    </button>
                                </form>
                            </li>
                            <li>
                                <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_REMOVE_TOTP_CONFIGURATION')) }}"
                                      method="post" class="js-open-delete-totp-modal">
                                    {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_REMOVE_TOTP_CONFIGURATION')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="twofas-danger">{{ esc_html__('Remove configuration', '2fas')|upper }}</span>
                                        <i class="twofas-icon twofas-icon-info-x"></i>
                                    </button>
                                </form>
                            </li>
                        {% endif %}
                    {% endif %}
                    <li>
                        <a href="https://2fas.com/learn-more#2fas-tokens" class="twofas-learn-more" target="_blank" rel="noreferrer noopener">
                            {{ esc_html__('Learn more', '2fas')|upper }}
                            <i class="twofas-icon twofas-icon-info"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="twofas-content-description">
                <p> {{ esc_html__('To correctly configure the plugin and log in by means of two-factor authentication, download 2FAS
                    Authenticator app or another application that generates TOTP tokens (e.g. Google Authenticator), and
                    follow the steps below. Remember that 2FAS Authenticator app largely speeds up the verification
                    process and makes it much more convenient, as it enables you to log in by one click on your mobile,
                    without the need of retyping the code.', '2fas') }}</p>
            </div>

            <div class="twofas-content-items-container">
                <div class="twofas-configured-collapse">
                    <div class="twofas-configured-collapse-box-container">
                        <div class="twofas-configured-collapse-box">
                            <h3>{{ esc_html__('2FAS Tokens are already configured.', '2fas') }}</h3>
                            <p>{{ esc_html__('If you want to configure another app/device, click button below.', '2fas') }}</p>
                            <a href="#"
                               class="twofas-btn twofas-collapse-btn js-collapse-expand">{{ esc_html__('Configure 2FAS Tokens', '2fas') }}</a>
                        </div>
                    </div>
                </div>

                <div class="twofas-content-item">
                    <div class="twofas-content-item-left text-center">
                        <i class="twofas-icon twofas-icon-download"></i>
                    </div>

                    <div class="twofas-content-item-right">
                        <div class="twofas-content-item-right-content">
                            <p class="twofas-step twofas-muted">{{ esc_html__('Step 1', '2fas') }}</p>
                            <h6>{{ esc_html__('Get the App', '2fas' ) }}</h6>

                            <div class="twofas-content-mobile">
                                <i class="twofas-icon twofas-icon-download"></i>
                            </div>

                            <p>{{ esc_html__('Download 2FAS Authenticator app to your smartphone to start using tokens.', '2fas') }}</p>

                            <div class="twofas-stores-download">
                                <a href="https://play.google.com/store/apps/details?id=com.twofasapp" target="_blank" rel="noreferrer noopener"><i
                                            class="twofas-icon twofas-icon-google-play"></i></a>
                                <a href="https://itunes.apple.com/us/app/2fas-auth/id1217793794?mt=8" target="_blank" rel="noreferrer noopener"><i
                                            class="twofas-icon twofas-icon-app-store"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="twofas-clear-fix"></div>
                </div>

                <div class="twofas-content-item">
                    <div class="twofas-content-item-left text-center">
                        <div class="twofas-content-item-qr">
                            <div class="twofas-spinner-container twofas-qr-refresh">
                                <div class="twofas-spinner-circle">
                                    <div class="tf-dot-1 tf-dot"></div>
                                    <div class="tf-dot-2 tf-dot"></div>
                                    <div class="tf-dot-3 tf-dot"></div>
                                    <div class="tf-dot-4 tf-dot"></div>
                                    <div class="tf-dot-5 tf-dot"></div>
                                    <div class="tf-dot-6 tf-dot"></div>
                                    <div class="tf-dot-7 tf-dot"></div>
                                    <div class="tf-dot-8 tf-dot"></div>
                                    <div class="tf-dot-9 tf-dot"></div>
                                    <div class="tf-dot-10 tf-dot"></div>
                                    <div class="tf-dot-11 tf-dot"></div>
                                    <div class="tf-dot-12 tf-dot"></div>
                                </div>
                            </div>

                            <img src="{{ qr_code }}" alt="QR code" class="twofas-qr-code">
                        </div>
                    </div>

                    <div class="twofas-content-item-right">
                        <div class="twofas-content-item-right-content">
                            <p class="twofas-step twofas-muted">{{ esc_html__('Step 2', '2fas') }}</p>
                            <h6>{{ esc_html__('Scan QR code', '2fas') }}</h6>

                            <div class="twofas-content-mobile">
                                <div class="twofas-spinner-container twofas-qr-refresh">
                                    <div class="twofas-spinner-circle">
                                        <div class="tf-dot-1 tf-dot"></div>
                                        <div class="tf-dot-2 tf-dot"></div>
                                        <div class="tf-dot-3 tf-dot"></div>
                                        <div class="tf-dot-4 tf-dot"></div>
                                        <div class="tf-dot-5 tf-dot"></div>
                                        <div class="tf-dot-6 tf-dot"></div>
                                        <div class="tf-dot-7 tf-dot"></div>
                                        <div class="tf-dot-8 tf-dot"></div>
                                        <div class="tf-dot-9 tf-dot"></div>
                                        <div class="tf-dot-10 tf-dot"></div>
                                        <div class="tf-dot-11 tf-dot"></div>
                                        <div class="tf-dot-12 tf-dot"></div>
                                    </div>
                                </div>

                                <img src="{{ qr_code }}" alt="QR code" class="twofas-qr-code">
                            </div>

                            <a class="twofas-btn twofas-action-btn twofas-mobile-config" href="{{ qr_code_message }}">{{ esc_html__('Click to configure with 2fas app', '2fas')|upper }}</a>
                            <p>{{ esc_html__('Please, scan the following QR code with your app.', '2fas') }}</p>
                            <p class="twofas-small">( {{ esc_html__('Instead of using the QR code you can ', '2fas') }}<a href="#" class="js-show-totp-secret">{{ esc_html__('Enter your private key manually', '2fas')|lower }}</a>.)</p>
                            <p class="twofas-totp-secret">{{ totp_secret }}</p>
                        </div>

                        <div class="twofas-content-item-right-bottom">
                            <button type="submit" class="twofas-btn twofas-action-btn js-open-qr-modal">
                                {{ esc_html__('Show qr code', '2fas')|upper }}
                            </button>

                            {% if not is_totp_configured %}
                                <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_RELOAD_QR_CODE')) }}"
                                      method="post"
                                      class="twofas-buttons-bottom twofas-reload-qr-code-form {% if not reload_modal_disabled %}js-open-reload-warning-modal{% else %}js-reload-qr-code{% endif %}">
                                    {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_RELOAD_QR_CODE')) | raw }}

                                    <button class="twofas-btn twofas-refresh-btn">
                                        <i class="twofas-icon twofas-icon-refresh"></i>
                                        <span>{{ esc_html__('Refresh', '2fas')|upper }}</span>
                                    </button>
                                </form>
                            {% endif %}
                        </div>
                    </div>

                    <div class="twofas-clear-fix"></div>
                </div>

                <div class="twofas-content-item">
                    <div class="twofas-content-item-left text-center">
                        <i class="twofas-icon twofas-icon-token"></i>
                    </div>

                    <div class="twofas-content-item-right">
                        <div class="twofas-content-item-right-content">
                            <p class="twofas-step twofas-muted">Step 3</p>
                            <h6>{{ esc_html__('Enter token', '2fas') }}</h6>

                            <div class="twofas-content-mobile">
                                <i class="twofas-icon twofas-icon-token"></i>
                            </div>

                            <p>{{ esc_html__('Enter the 6-digit token generated by the app and enable TOTP protection.', '2fas') }}</p>
                            <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_CONFIGURE_TOTP')) }}"
                                  method="post" class="js-waiting-button">
                                {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_CONFIGURE_TOTP')) | raw }}
                                <input type="hidden" id="totp-secret" name="totp_secret" value="{{ totp_secret }}"/>
                                <input
                                        type="text"
                                        class="twofas-token-input js-token-input"
                                        name="code"
                                        minlength="6"
                                        maxlength="6"
                                        placeholder=""
                                        required="required"
                                        pattern="[0-9]{6}"/>
                                <button type="submit" class="twofas-btn twofas-submit-btn twofas-enable-token-btn">
                                    <span>{{ esc_html__('Enable', '2fas')|upper }}</span>

                                    <span class="twofas-spinner-button">
                                        <span class="twofas-spinner-button-bounce-1"></span>
                                        <span class="twofas-spinner-button-bounce-2"></span>
                                        <span class="twofas-spinner-button-bounce-3"></span>
                                    </span>
                                </button>
                            </form>
                        </div>
                    </div>

                    <div class="twofas-clear-fix"></div>
                </div>

                <div class="twofas-clear-fix"></div>
            </div>
        </div>
    </div>

    {% include 'modals/qr-modal.html.twig' %}
    {% include 'modals/confirmation/reload-warning-modal.html.twig' %}
    {% include 'modals/confirmation/delete-totp-modal.html.twig' %}
{% endblock %}