{{ login_header(esc_html__('Configure two-factor authentication', '2fas'), '', error) }}

<section class="twofas-login-box">
    <div class="twofas-login-box-col twofas-login-box-col-left">
        <img src="{{ assets_url }}images/logo_dark_text.png" alt="2FAS Classic Logo">
        <h3>{{
                sprintf(
                    esc_html__(
                        'Get 2FAS Authenticator mobile app to scan %1$sQR code%2$s and configure two-factor authentication for your WordPress account.',
                        '2fas'
                    ),
                '<strong>',
                '</strong>'
                )|raw
            }}
        </h3>

        <div class="twofas-login-box-stores">
            <a href="https://itunes.apple.com/us/app/2fas-auth/id1217793794?mt=8" target="_blank" rel="noopener">
                <i class="twofas-icon twofas-icon-app-store"></i>
            </a>
            <a href="https://play.google.com/store/apps/details?id=com.twofasapp" target="_blank" rel="noopener">
                <i class="twofas-icon twofas-icon-google-play"></i>
            </a>
        </div>
    </div>
    <div class="twofas-login-box-col twofas-login-box-col-right">
        <div class="twofas-img-wrapper">
            <div class="twofas-btn-wrapper">
                <a href="{{ qr_code_message }}" class="twofas-btn twofas-action-btn">{{ esc_html__('Config with App', '2fas') }}</a>
            </div>
            <img src="{{ qr_code }}" />
        </div>
        <p class="twofas-small">
            {{
                sprintf(
                    esc_html__(
                    'Instead of using the QR code you can %1$senter your private key manually%2$s',
                    '2fas'
                ),
                '<a href="#" class="js-show-totp-secret twofas-totp-secret-link">',
                '</a>'
                )|raw
            }}
            .
        </p>
        <p class="twofas-totp-secret">{{ totp_secret }}</p>
        <form action="{{ login_url }}" method="post">
            {% include "login/authentication_hidden_inputs.html.twig" %}
            <input type="text" name="twofas_code" id="twofas-code" class="twofas-login-box-token-input" minlength="6" maxlength="6" pattern="[0-9]{6}" autocomplete="off" required="required" autofocus="autofocus" placeholder="Enter the TOTP Token" />
            <input type="hidden" name="totp_secret" value="{{ totp_secret }}" />
            <input type="hidden" name="qr_code_message" value="{{ qr_code_message }}" />
            <input type="hidden" name="twofas_action" value="{{ actions['configure'] }}" />
            <input type="submit" value="{{ esc_attr__('Confirm', '2fas') }}" class="twofas-btn twofas-action-btn" />
        </form>
    </div>

    <div class="twofas-login-another-account">
        <form action="{{ login_url }}" method="post" class="twofas-login-nav-form">
            <div>
                {% if interim_login %}
                    <input type="hidden" name="interim-login" value="{{ interim_login }}" />
                {% endif %}
                <input type="hidden" name="twofas_action" value="{{ actions['stop_login_process'] }}" />
            </div>
            <input type="submit" class="button-link" value="{{ esc_attr__('Log in to another account', '2fas') }}" />
        </form>
    </div>
</section>

{{ login_footer() }}