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

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

            <div class="twofas-content-description">
                <p>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.</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>2FAS Tokens are already configured.</h3>
                            <p>If you want to configure another app/device, click button below.</p>
                            <a href="#" class="twofas-btn collapse-btn js-collapse-expand">Configure 2FAS Tokens</a>
                        </div>
                    </div>
                </div>

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

                    <div class="twofas-content-item-right">
                        <div class="twofas-content-item-right-content">
                            <p class="step muted">Step 1</p>
                            <h6>Get the App</h6>

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

                            <p>Download 2FAS Authenticator app to your smartphone to start using tokens.</p>

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

                    <div class="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="spinner-container qr-refresh">
                                <div class="spinner-circle">
                                    <div class="sk-circle1 sk-circle"></div>
                                    <div class="sk-circle2 sk-circle"></div>
                                    <div class="sk-circle3 sk-circle"></div>
                                    <div class="sk-circle4 sk-circle"></div>
                                    <div class="sk-circle5 sk-circle"></div>
                                    <div class="sk-circle6 sk-circle"></div>
                                    <div class="sk-circle7 sk-circle"></div>
                                    <div class="sk-circle8 sk-circle"></div>
                                    <div class="sk-circle9 sk-circle"></div>
                                    <div class="sk-circle10 sk-circle"></div>
                                    <div class="sk-circle11 sk-circle"></div>
                                    <div class="sk-circle12 sk-circle"></div>
                                </div>
                            </div>

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

                    <div class="twofas-content-item-right">
                        <div class="twofas-content-item-right-content">
                            <p class="step muted">Step 2</p>
                            <h6>Scan QR code</h6>

                            <div class="content-mobile">
                                <div class="spinner-container qr-refresh">
                                    <div class="spinner-circle">
                                        <div class="sk-circle1 sk-circle"></div>
                                        <div class="sk-circle2 sk-circle"></div>
                                        <div class="sk-circle3 sk-circle"></div>
                                        <div class="sk-circle4 sk-circle"></div>
                                        <div class="sk-circle5 sk-circle"></div>
                                        <div class="sk-circle6 sk-circle"></div>
                                        <div class="sk-circle7 sk-circle"></div>
                                        <div class="sk-circle8 sk-circle"></div>
                                        <div class="sk-circle9 sk-circle"></div>
                                        <div class="sk-circle10 sk-circle"></div>
                                        <div class="sk-circle11 sk-circle"></div>
                                        <div class="sk-circle12 sk-circle"></div>
                                    </div>
                                </div>

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

                            <a class="twofas-btn action-btn mobile-config" href="{{ qr_code_message }}">CLICK TO CONFIGURE WITH 2FAS APP</a>

                            <p>Please, scan the following QR code with your app.</p>
                            <p class="small">(Instead of using the QR code you can <a href="#" class="js-show-totp-secret">enter your private key manually</a>.)</p>
                            <p class="totp-secret">{{ totp_secret }}</p>
                        </div>

                        <div class="twofas-content-item-right-bottom">
                            <button type="submit" class="twofas-btn action-btn js-open-qr-modal">
                                SHOW QR CODE
                            </button>

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

                                    <button class="twofas-btn refresh-btn">
                                        <i class="icon icon-refresh"></i>
                                        <span>REFRESH</span>
                                    </button>
                                </form>
                            {% endif %}
                        </div>
                    </div>

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

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

                    <div class="twofas-content-item-right">
                        <div class="twofas-content-item-right-content">
                            <p class="step muted">Step 3</p>
                            <h6>Enter token</h6>

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

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

                                    <span class="spinner_button">
                                        <span class="bounce1"></span>
                                        <span class="bounce2"></span>
                                        <span class="bounce3"></span>
                                    </span>
                                </button>
                            </form>
                        </div>
                    </div>

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

                <div class="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 %}