{{ login_header('Configure two-factor authentication', '', 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 Logo">
        <h3>Get 2FAS Authenticator mobile app to scan <strong>QR code</strong> and configure two-factor authentication for your WordPress account.</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="icon icon-app-store"></i>
            </a>
            <a href="https://play.google.com/store/apps/details?id=com.twofasapp" target="_blank" rel="noopener">
                <i class="icon icon-google-play"></i>
            </a>
        </div>
    </div>
    <div class="twofas-login-box-col twofas-login-box-col-right">
        <div class="img-wrapper">
            <div class="btn-wrapper">
                <a href="{{ qr_code_message }}" class="twofas-btn action-btn">Config with App</a>
            </div>
            <img src="{{ qr_code }}" />
        </div>
        <p class="small">Instead of using the QR code you can <a href="#" class="js-show-totp-secret twofas-totp-secret-link">enter your private key manually</a>.</p>
        <p class="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="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="Confirm" class="twofas-btn action-btn" />
        </form>
    </div>
</section>

{{ login_footer() }}