{% extends "layouts/static-default.html" %}

{% block title %} MFA Verify {% endblock title %}

{% block stylesheets %}

    <link rel="stylesheet" href="/static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/assets/css/atlantis.css">
    <link rel="stylesheet" href="/static/assets/css/login.css">

{% endblock stylesheets %}

{% block content %}
    <div class="content-full">
        <div class="wrapper row">
            <div class="radial-bg-primary col-xs-12 col-md-8">
                <div class="d-flex flex-column justify-content-center align-items-center" style="height: 100%;">
                    <div class="login__logo">
                        <img src="/static/assets/img/logo-white.png" class="flicker">
                    </div>
                </div>
                <span class="text-white text-center mt-4">{{ login_banner|replace('\n', '<br>')|safe }}</span>
            </div>
            <div class="col-xs-12 col-md-4">
                <div class="d-flex flex-column justify-content-center align-items-center" style="height: 100%;">
                    <h3 class="login__form_title">Verify MFA</h3>
                    <p>Enter the token displayed on your authentication app</p>
                    <form method="POST" action="">
                        <div class="col-md-12 col-lg-12 col-sm-12">
                            <div class="form-row ml-2">
                                <div class="form-group col-12">
                                    {{ form.hidden_tag() }}
                                    <label for="token">Token</label>
                                    {{ form.token(size=32, class="form-control") }}
                                </div>
                            </div>
                            <div class="form-row ml-2">
                                <div class="form-group col-6">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block javascripts %}

{% endblock javascripts %}