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

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

<div class="container registration">

        <div class="form--register--text form--register form--register--teacher is-flex-item col-sm-6">
            <div class="form-div form">
                <h4>Teacher/Tutor</h4>
                <div class="row form--row">
                    <p class="semi-bold">Once you've registered your personal details and logged in, you'll be able to create your school or club, or join other teachers at your institution.</p>
                </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">
                        {% 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 class="iconify" data-icon="mdi:security"></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 class="iconify" data-icon="mdi:security"></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 align-items-end justify-content-end form-div 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 col-sm-6">
            <div 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.
                    </p>
                    <small class="semi-bold">
                        Are you part of a school or club? If so, please log in <a href="{% url 'student_login_access_code' %}">here</a> or speak to your teacher.
                    </small>
                </div>
                <form id="form-signup-independent-student" method="post" autocomplete="off" class="d-flex flex-column">

                    {% csrf_token %}

                    {{ 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.username.html_name }}"></label>
                        {{ independent_student_signup_form.username }}
                        <small>{{ independent_student_signup_form.username.help_text }}</small>
                        {{ independent_student_signup_form.username.errors }}
                    </div>
                    <div class="row form--row">

                        <label for="id_{{ independent_student_signup_form.email.html_name }}"></label>
                        {{ independent_student_signup_form.email }}
                        <small>{{ independent_student_signup_form.email.help_text }}</small>
                        {{ independent_student_signup_form.email.errors }}
                    </div>
                    <div class="row form--row">
                        {% include 'portal/partials/register_over_required_age_tickbox.html' with is_over_required_age=independent_student_signup_form.is_over_required_age %}
                    </div>

                    <div class="row form--row">
                        {% include 'portal/partials/register_newsletter_tickbox.html' with newsletter_ticked=independent_student_signup_form.newsletter_ticked %}
                    </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 class="iconify" data-icon="mdi:security"></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 class="iconify" data-icon="mdi:security"></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 align-items-end 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>
                </form>
            </div>
        </div>
</div>

<script type="text/javascript" src="{% static 'portal/js/passwordStrength.js' %}"></script>
<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>

{% endblock content %}
