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

{% block content %}
<div class="container registration justify-content-center">
    <div class="form--register--text form--register form--register--teacher ml-0 col-xs-6">
        <div class="form-div form">
            <h4>Complete registration</h4>

            {% if error_message %}
            <ul class="errorlist">
                <li>{{ error_message }}</li>
            </ul>
            {% else %}
            <div class="row form--row">
                <p class="semi-bold">
                    Please create a password to complete your onboarding. It should be 10 characters long and a mix of
                    upper and lower case letters, numbers and special characters, making it hard to guess.
                </p>
            </div>

            <form class="d-flex flex-column" method="post" id="teacher-register-form" autocomplete="off">

                {% csrf_token %}

                {{ invited_teacher_form.non_field_errors }}

                <div class="row form--row">
                    <label for="{{ invited_teacher_form.teacher_password.auto_id }}"></label>
                    <div class="input--icon">
                        {{ invited_teacher_form.teacher_password }}
                        <span id="teacher-password-field-icon" class="iconify"
                            data-icon="material-symbols:visibility-off" ></span>
                    </div>
                    <small>{{ invited_teacher_form.teacher_password.help_text }}</small>
                    {{ invited_teacher_form.teacher_password.errors }}
                </div>
                <div class="row form--row">
                    <label for="{{ invited_teacher_form.teacher_confirm_password.auto_id }}"></label>
                    <div class="input--icon">
                        {{ invited_teacher_form.teacher_confirm_password }}
                        <span id="teacher-confirm-password-field-icon" class="iconify"
                            data-icon="material-symbols:visibility-off" ></span>
                    </div>
                    <small>{{ invited_teacher_form.teacher_confirm_password.help_text }}</small>
                    {{ invited_teacher_form.teacher_confirm_password.errors }}
                </div>

                <div class="row--under">
                    <div class="password-strength-container">
                        <div id="teacher-password-sign" class="password-strength-sign"></div>
                        <div id="teacher-password-text" class="password-strength-text"></div>
                    </div>
                </div>

                <div class="row form--row">
                    <div class="form__checkbox">
                        <div class="form__checkbox-input">
                            {{ invited_teacher_form.consent_ticked }}
                        </div>
                        <p class="semi-bold">I have read and understood the <a href="{% url 'terms' %}" target="_blank">Terms of use</a>
                            and the <a href="{% url 'privacy_notice' %}" target="_blank">Privacy Notice</a>.</p>
                    </div>
                </div>
                <div class="row form--row">
                    {% include 'portal/partials/register_newsletter_tickbox.html' with newsletter_ticked=invited_teacher_form.newsletter_ticked %}
                </div>

                <div class="d-flex justify-content-end row">
                    <button class="button button--home button--primary teacher--home--button button--icon" type="submit" name="teacher_signup"> Register<span class="iconify" data-icon="mdi:chevron-right"></span></button>
                </div>

            </form>
            {% endif %}
        </div>
    </div>
</div>

{% include "portal/partials/service_unavailable_popup.html" %}

<script>
    const password_id = '{{ invited_teacher_form.teacher_password.auto_id }}';
    var TEACHER_PASSWORD_FIELD_ID = password_id;
    var INDEP_STUDENT_PASSWORD_FIELD_ID = password_id;
</script>

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

{% endblock content %}