{% extends 'portal/base.html' %}
{% load static %}
{% load app_tags %}
{% block content %}
    {% include "portal/partials/service_unavailable_popup.html" %}
    <div id="signup_page"></div>
    <div id="register-forms" class="container registration">
        <div class="form--register--text form--register form--register--teacher is-flex-item col-sm-6">
            <div id="teacher-register-form" class="form-div form">
                <h4>Teacher/Tutor</h4>
                <div class="row form--row">
                    <p class="semi-bold">Register below to create your free account.</p>
                    <small class="semi-bold">You will have access to teaching resources, progress tracking and lesson plans
                    for Rapid Router.</small>
                </div>
                <form class="d-flex flex-column" 
                      method="post"
                      id="form-reg-teacher"
                      autocomplete="off">
                    {% csrf_token %}
                    {{ teacher_signup_form.non_field_errors }}
                    <div class="row form--row">
                        <label for="id_teacher_signup-teacher_first_name"></label>
                        {{ teacher_signup_form.teacher_first_name }}
                        <small>{{ teacher_signup_form.teacher_first_name.help_text }}</small>
                        {{ teacher_signup_form.teacher_first_name.errors }}
                    </div>
                    <div class="row form--row">
                        <label for="id_teacher_signup-teacher_last_name"></label>
                        {{ teacher_signup_form.teacher_last_name }}
                        <small>{{ teacher_signup_form.teacher_last_name.help_text }}</small>
                        {{ teacher_signup_form.teacher_last_name.errors }}
                    </div>
                    <div class="row form--row">
                        <label for="id_teacher_signup-teacher_email"></label>
                        {{ teacher_signup_form.teacher_email }}
                        <small>{{ teacher_signup_form.teacher_email.help_text }}</small>
                        {{ teacher_signup_form.teacher_email.errors }}
                    </div>
                    <div class="row form--row">
                        <div class="form__checkbox">
                            <div class="form__checkbox-input">{{ teacher_signup_form.consent_ticked }}</div>
                            <p class="semi-bold">
                                I am over 18 years old 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=teacher_signup_form.newsletter_ticked %}
                    </div>
                    <div class="row form--row">
                        <label for="id_teacher_signup-teacher_password"></label>
                        <div class="input--icon">
                            {{ teacher_signup_form.teacher_password }}<span id="teacher-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                        </div>
                        <small>{{ teacher_signup_form.teacher_password.help_text }}</small>
                        {{ teacher_signup_form.teacher_password.errors }}
                    </div>
                    <div class="row form--row">
                        <label for="id_teacher_signup-teacher_confirm_password"></label>
                        <div class="input--icon">
                            {{ teacher_signup_form.teacher_confirm_password }}<span id="teacher-confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                        </div>
                        <small>{{ teacher_signup_form.teacher_confirm_password.help_text }}</small>
                        {{ teacher_signup_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">{{ teacher_signup_form.captcha }}</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>
            </div>
        </div>
        <div class="form--register--text form--register form--register--indep-student is-flex-item col-sm-6">
            <div id="independent-student-register-form" class="form-div">
                <h4>Independent learner</h4>
                <div class="row form--row">
                    <p class="semi-bold">Register below if you are not part of a school or club and wish to set up a free home learning account.</p>
                    <small class="semi-bold">You will have access to learning resources for Rapid Router.</small>
                </div>
                <form id="form-signup-independent-student"
                      method="post"
                      autocomplete="off"
                      class="d-flex flex-column">
                    {% csrf_token %}
                    <div class="row form--row">
                        <small class="semi-bold mb-4">{{ independent_student_signup_form.date_of_birth.help_text }}</small>
                        <div class="form__dob-input">
                            {{ independent_student_signup_form.date_of_birth }}
                        </div>
                    </div>
                    {{ independent_student_signup_form.date_of_birth.errors }}
                    <div id="form-fields">
                        {{ independent_student_signup_form.non_field_errors }}
                        <div class="row form--row">
                            <label for="id_{{ independent_student_signup_form.name.html_name }}">
                            </label>
                            {{ independent_student_signup_form.name }}
                            <small>{{ independent_student_signup_form.name.help_text }}</small>
                            {{ independent_student_signup_form.name.errors }}
                        </div>
                        <div class="row form--row">
                            <label for="id_{{ independent_student_signup_form.email.html_name }}">
                            </label>
                            {{ independent_student_signup_form.email }}
                            <small id="independent-email-help-text">{{ independent_student_signup_form.email.help_text }}</small>
                            {{ independent_student_signup_form.email.errors }}
                        </div>
                        <div id="independent-consent" class="row form--row">
                            <div class="form__checkbox">
                                <div class="form__checkbox-input">
                                    {{ independent_student_signup_form.consent_ticked }}
                                </div>
                                <p id="independent-adult-legal" 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>
                                <p id="independent-child-legal" class="semi-bold">
                                    I have read and understood the
                                    <a href="{% url 'terms' %}#terms-children" target="_blank">Terms of use</a> and the
                                    <a href="{% url 'privacy_notice' %}#privacy-children" target="_blank">Privacy notice</a>.
                                </p>
                            </div>
                        </div>
                        <div id="independent-newsletter" class="row form--row">
                            {% include 'portal/partials/register_newsletter_tickbox.html' with newsletter_ticked=independent_student_signup_form.newsletter_ticked %}
                        </div>
                        <div id="independent-parent-notification" class="row form--row">
                            <small><strong>We will send your parent/guardian an email to ask them to activate the account
                            for you. Once they've done this you'll be able to log in using your name and password.</strong></small>
                        </div>
                        <div class="row form--row">
                            <label for="id_{{ independent_student_signup_form.password.html_name }}">
                            </label>
                            <div class="input--icon">
                                {{ independent_student_signup_form.password }} <span id="independent-student-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                            </div>
                            <small>{{ independent_student_signup_form.password.help_text }}</small>
                            {{ independent_student_signup_form.password.errors }}
                        </div>
                        <div class="row form--row">
                            <label for="id_{{ independent_student_signup_form.confirm_password.html_name }}">
                            </label>
                            <div class="input--icon">
                                {{ independent_student_signup_form.confirm_password }}<span id="independent-student-confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                            </div>
                            <small>{{ independent_student_signup_form.confirm_password.help_text }}</small>
                            {{ independent_student_signup_form.confirm_password.errors }}
                        </div>
                        <div class="row--under">
                            <div class="password-strength-container">
                                <div id="student-password-sign" class="password-strength-sign">
                                </div>
                                <div id="student-password-text" class="password-strength-text">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            {{ independent_student_signup_form.captcha }}
                        </div>
                        <div class="d-flex justify-content-end row">
                            <button type="submit"
                                    name="independent_student_signup"
                                    class="button button--home button--icon"
                                    value="Register">
                                Register<span class="iconify" data-icon="mdi:chevron-right"></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
<script>
    var TEACHER_PASSWORD_FIELD_ID = '{{ teacher_signup_form.teacher_password.auto_id }}';
    var INDEP_STUDENT_PASSWORD_FIELD_ID = '{{ independent_student_signup_form.password.auto_id }}';
</script>
<script type="text/javascript"
        src="{% static 'portal/js/passwordStrength.js' %}"></script>
<script type="text/javascript"
        src="{% static 'portal/js/independentRegistration.js' %}"></script>

{% endblock content %}
