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

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

<section class="background container">
    <h4>Add external student to class {{ class.name }} ({{ class.access_code }})</h4>
</section>

<div class="container">
    <div class="row">
        <div class="col-sm-5">
            <h4>Students currently in class</h4>
            {% if students %}
            <p>{{ student.new_user.username }}, the new external student, will be joining students in the class
                {{ class.name }} ({{ class.access_code }}).</p>
            <table class="header-tertiary data-quaternary">
                <tr>
                    <th><p>Student Name</p></th>
                </tr>
                {% for currentstudent in students %}
                <tr>
                    <td><p><small>{{ currentstudent.new_user.first_name }}</small></p></td>
                </tr>
                {% endfor %}
            </table>
            {% else %}
            <p>The new external student {{ student.new_user.username }} is joining the class {{ class.name }}
                ({{ class.access_code }}) in which there are currently no other students.</p>
            {% endif %}
        </div>
        <div class="col-sm-6 col-sm-offset-1 background--primary">
            <h4>Add external student</h4>
            <p>Please confirm the name of the new external student joining your class. Their name will be used in their new
                login details, so please ensure it is different from any other existing student in the class.</p>

            <form method="POST">

                {% csrf_token %}

                {{ form.non_field_errors }}

                {% for field in form %}
                <label for="id_{{ field.html_name }}">{{ field.label }}</label>
                {{ field }}
                {{ field.errors }}
                {% endfor %}

                <section class="background button-group">
                    <a class="button button--secondary button--secondary--dark" href="{% url 'dashboard' %}#classes">Cancel</a>
                    <button id="save_student_name_button" type="submit" class="button button--primary">Save</button>
                </section>
            </form>
        </div>
    </div>
</div>

<div class="background container">
    <p><a href="{% url 'view_class' class.access_code %}">&#10229; Back to Class</a></p>
</div>

{% endblock %}
