{% extends 'portal/base.html' %}
{% load static %}
{% load app_tags %}

{% block css %}
{{ block.super }}
<style>
    .content > .container > form > table {
        margin: 20px 0;
        width: auto;
    }
    .content > .container > form > table > tbody > tr > th {
        padding-left: 0;
    }
</style>
{% endblock css %}

{% block content %}
<div id="teacher_login_page"></div>

{% if wizard.steps.current == 'auth' %}
    <section class="row mx-0">
        <span class="login-shape-left">
            <img src="{% static 'portal/img/oval_blue.svg' %}" alt="Blue oval">
        </span>
        <span class="login-shape-right">
            <img src="{% static 'portal/img/polygon_yellow.svg' %}" alt="Yellow polygon">
        </span>
        <div class="form--login is-flex form--register--teacher">
            <div class="form col-xs-12 col-sm-8 col-md-8 col-lg-9 center-block">
                <h4 class="center-block">Welcome</h4>
                <h5>Please enter your login details.</h5>
                <form id="form-login-teacher" method="post" autocomplete="off">

                    {% csrf_token %}
                    {{ wizard.management_form }}

                    {{ form.non_field_errors }}

                    <div class="form__input">
                        {{ form.username }}
                        <small>{{ form.username.help_text }}</small>
                        {{ form.username.errors }}
                    </div>

                    <div class="form--row">
                        <div class="input--icon">
                            {{ form.password }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                        </div>
                        <small>{{ form.password.help_text }}</small>
                        {{ form.password.errors }}
                    </div>

                    {{ form.captcha }}

                    <div class="background">
                        <p class="text-left"><strong>Forgotten your password?</strong></p>
                        <p class="text-left">Don't worry, you can
                            <a id="teacher_forgotten_password_button" href="{% url 'teacher_password_reset' %}">reset your password</a>.
                        </p>
                    </div>

                    <div class="d-flex justify-content-end row">
                        <button type="submit" name="login_view"
                                class="button button--primary button--login button-right-arrow">Log in</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
{% else %}
    {% include "two_factor/core/login.html" %}
{% endif %}

<script type="text/javascript" src="{% static 'portal/js/teacherLogin.js' %}"></script>

{% endblock content %}
