<div class="mf-tip">
    <a href="#" class="mf-js-open-tips">
        <i class="mf-icon mf-icon-scanning-tips-login"></i>
    </a>
</div>

<div class="mf-login-button-wrapper mf-login">
    <div class="mf-qr-code-wrapper mf-anim-on mf-loading">
        <a href="https://magicpassword.io/auth/private-wp_{{ integration_id }}_{{ session_id }}" class="login-magic-button mf-js-handle-focus">
            <span class="button button-primary button-large">Tap to log in</span>
        </a>
        <div class="magic-btn-bg"></div>

        <h3>Scan the code with Magic Password</h3>
        <img src="{{ qr_code }}" alt="QR code" />

        {% include 'spinner.html.twig' %}

        {% include 'login/hidden-inputs.html.twig' %}

        <input type="hidden" class="mf-action-name" name="action" value="" />
    </div>
    <div class="mf-pos-r">
        <button type="button" class="mf-btn mf-login mf-normal-login">Authenticate with login and password</button>
        <button type="button" class="mf-btn mf-login mf-login-button mf-js-subscribe-pusher-channel">Log in with Magic Password</button>
    </div>
</div>

{% include 'modals/error.html.twig' %}
{% include 'modals/tips.html.twig' %}
