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

{% block content %}
<h1 class="mf-text-center">Magic Password</h1>
<h3 class="mf-text-center">2 simple steps to activate passwordless authentication:</h3>

<div class="mf-content mf-not-configured">
    <div class="mf-step">
        <div class="mf-step-left mf-step-magic-code">
            <img src="{{ assets_url }}images/get-app.png" alt="Get Magic Password App">
        </div>
        <div class="mf-step-right">
            <div class="mf-step-right-content">
                <p class="mf-step-paragraph mf-muted">Step 1</p>
                <h4>Get the App</h4>
                <img src="{{ assets_url }}images/get-app.png" alt="Get Magic Password App" class="mf-step-image">
                <p class="mf-step-desc">Download Magic Password app from<br />Google Play or App Store.</p>

                <div class="mf-stores-download">
                    <a href="https://play.google.com/store/apps/details?id=io.magicpassword" target="_blank" rel="noopener"><i class="mf-icon mf-icon-google-play"></i></a>
                    <a href="https://itunes.apple.com/us/app/magic-password-forget-your-password/id1240404220?mt=8" target="_blank" rel="noopener"><i class="mf-icon mf-icon-app-store"></i></a>
                </div>
            </div>
        </div>
    </div>

    <div class="mf-step">
        <div class="mf-step-left mf-step-magic-code">
            <div class="mf-qr-code-wrapper mf-loading">
                <img src="{{ qr_code }}" alt="Magic Code" class="mf-qr-code" />

                {% include 'spinner.html.twig' %}
            </div>
        </div>
        <div class="mf-step-right">
            <div class="mf-step-right-content mf-step-magic-code">
                <p class="mf-step-paragraph mf-muted">Step 2</p>
                <h4>Scan Magic Code</h4>
                <p class="mf-step-desc">Please scan the following<br />Magic Code with your app.</p>
                <div class="mf-qr-code-wrapper mf-loading">
                    <img src="{{ qr_code }}" alt="Magic Code" class="mf-qr-code" />

                    {% include 'spinner.html.twig' %}
                </div>
                <p class="mf-step-desc mf-step-desc-additional">Or use the Magic Button<br />to configure from this device.</p>

                {% include 'dashboard/configuration/pair-form.html.twig' %}
                {% include 'dashboard/configuration/magic-button.html.twig' %}
            </div>

            <div class="mf-step-right-bottom">
                <a href="#" class="mf-scanning-tips mf-js-open-tips">
                    <i class="mf-icon mf-icon-scanning-tips"></i>
                    <span>HOW DO I SCAN A MAGIC CODE?</span>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}