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

{% block subNav %}
    {% include "portal/partials/teacher_non_dashboard_subnav.html" %}
{% endblock subNav %}

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

<div class="background container">
    <section>
        <h4>Release student from class {{ class.name }} ({{ class.access_code }})</h4>
    </section>
    <p><a href="{% url 'view_class' class.access_code %}" class="button--menu button--menu--enabled">< Back to Edit class</a></p>
    <p>Convert students into independent students.</p>
    <h5>Students to release from school</h5>

    <p>You are about to remove students from your class and set them up as independent students. Neither you nor
        your school will be able to manage them once you have submitted this request.</p>

    <p>Email addresses are required for independent student accounts. If a student is too young to own an email 
        address, a parent or guardian's email address will be required.</p>

    <p>The email address will have to be validated through a verification email before the student can log in.
        The email has to be unique and not used for other accounts in Code for Life.
        <b>Make sure you type the correct email, as otherwise we may not be able to recover the account.</b>
    </p>

    <p>The students will then log in with their email via the
        <a href="{% url 'independent_student_login' %}" target="_blank">independent student login</a>. Their passwords
        will stay the same. Independent students do not need to provide a class access code.</p>

    <form method="POST">

        {% csrf_token %}

        {{ formset.management_form }}
        {{ formset.non_form_errors }}

        {% for form in formset %}
        <div class="background">
            <div class="row form--row">
                <div class="form--row__input col-sm-6">
                    <div class="input--icon">
                        {{ form.orig_name }}
                    </div>
                    <p><small>{{ form.orig_name.help_text }}</small></p>
                </div>
                <div class="col-sm-6">
                    <div class="input--icon">
                        {{ form.name }} <span class="iconify" data-icon="mdi:account-outline"></span>
                    </div>
                    <p><small>{{ form.name.help_text }}</small></p>
                </div>
            </div>
            <div class="row form--row">
                <div class="col-sm-6">
                    {{ form.orig_name.errors }}
                </div>
                <div class="col-sm-6">
                    {{ form.name.errors }}
                </div>
            </div>
            <div class="row form--row">
                <div class="col-sm-6">
                    <div class="input--icon mt-3">
                        {{ form.email }} <span class="iconify" data-icon="mdi:email-outline"></span>
                    </div>
                    <p><small>{{ form.email.help_text }}</small></p>
                </div>
                <div class="col-sm-6">
                    <div class="input--icon mt-3">
                        {{ form.confirm_email }} <span class="iconify" data-icon="mdi:email-outline"></span>
                    </div>
                    <p><small>{{ form.confirm_email.help_text }}</small></p>
                </div>
            </div>
            <div class="row form--row">
                <div class="col-sm-6">
                    {{ form.email.errors }}
                </div>
                <div class="col-sm-6">
                    {{ form.confirm_email.errors }}
                </div>
            </div>
            {{ form.non_field_errors }}
        </div>
        {% endfor %}

        <div class="button-group">
            <a id="cancel_button" class="button button--secondary button--secondary--dark"
               href="{% url 'view_class' class.access_code %}">Cancel</a>
            <button id="dismiss_button" type="submit" name="submit_dismiss"
                    class="button button--primary button--primary--danger button--icon">Remove student
                <span class="iconify" data-icon="ic:outline-person-remove"></span>
            </button>
        </div>
    </form>
</div>

{% endblock %}
