{% load static %}
{% load sqrl %}
<style>
    .sqrl-wrap {
        padding: 15px;
        background-color: #fff;
        text-align: center;
        max-width: 300px;
        border-radius: 5%;
    }
    #sqrl-qr img {
        margin: auto;
        width: 100%;
        padding-top: 3px;
    }
    .sqrl-wrap a {
        font-size: 50%;
    }
</style>
<div>
    <form method="get" action="{{ session_sqrl.sqrl_url }}">
        <div class="sqrl-wrap">
            SQRL Login
            <a href="{{ session_sqrl.sqrl_url }}">
                <div id="sqrl-qr" data-sqrl="{{ session_sqrl.sqrl_url }}"></div>
            </a>
            <a href="https://www.grc.com/sqrl/sqrl.htm">What is SQRL?</a>
        </div>
        
        <input type="hidden" name="nut" value="{{ session_sqrl.nut.nonce }}">
        {% if session_sqrl.method == "manage" %}
            {# redirect to manage page after successful SQRL transaction #}
            <input type="hidden" name="next" value="{% url 'sqrl:manage' %}">
            <input type="submit" value="Manage SQRL">
        {% else %}
            <input type="submit" value="Log in using SQRL">
        {% endif %}
    </form>
</div>
<script>SQRL_CHECK_URL="{% sqrl_status_url_script_tag session_sqrl %}"</script>
<script type="application/javascript" src="{% static 'sqrl/sqrl.js' %}"></script>