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

{% block css %}
    {{ block.super }}
    <link href="{% static 'portal/css/jquery-ui.css' %}" rel="stylesheet">
{% endblock css %}

{% block scripts %}
{{ block.super }}
<script type="text/javascript" src="{% static 'portal/js/teach_class.js' %}"></script>
{% endblock scripts %}

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

{% block content %}
{% include "portal/partials/popup.html" %}
<div id="teach_class_page"></div>

<section class="background container">
    <h4>Update details for {{ class.name }} ({{ class.access_code }})</h4>
</section>
<div class="container">
    <a id="return_to_classes_button" href="{% url 'dashboard' %}#classes" class="button--menu button--menu--enabled">< Back to Classes</a>
</div>
<div class="background container">
    <p>Here you can view and manage all of your students within this class. You can add new students, transfer
        existing students to another one of your classes or to another teacher within your school or club, or remove students altogether.</p>
    <h5>Current students</h5>
    <p>Select an individual student to change their details, including their name and password.</p>
    <p>Select multiple students using the checkboxes to reset their passwords, move them to another class, release them from your school and
        make them an independent Code for Life user, or delete them permanently.</p>
</div>
<div class="container">
    <table id="student_table" class="header-primary data-primary">
        <tr>
            <th class="col-sm-7"><p>Student details</p></th>
            <th>
                <div class="d-flex flex-row justify-content-center align-items-center">
                    <input id="selectedStudentsListToggle" name="selectedStudentsListToggle" type="checkbox" value="">
                </div>
            </th>
            <th class="col-sm-3 cell-center"><p>Action</p></th>
        </tr>
        {% for student in students %}
        <tr>
            <td>
                <div class="student-table__cell">
                    <p><small>{{ student.new_user.first_name }}</small></p>
                </div>
            </td>
            <td class="cell-center"><input id="student_checkbox" type="checkbox" class="student" name="{{ student.id }}" value=""></td>
            <td class="cell-center">
                <a id="edit_student_button" href="{% url 'teacher_edit_student' student.id %}" class="button button--primary button--icon">Edit details
                    <span class="iconify" data-icon="mdi:pencil"></span>
                </a>
            </td>
        </tr>
        {% endfor %}
    </table>
    <p class="d-flex flex-row justify-content-end"><small><span id="num_students_selected">0</span>/{{ num_students }} selected</small></p>
    <div id="currentStudentActions" class="button-group background d-flex flex-row justify-content-end">
        <button onclick="postSelectedStudents('{% url 'teacher_dismiss_students' class.access_code %}')"
        id="dismissSelectedStudents" class="button--small button--primary disabled">Release</button>
        <button onclick="postSelectedStudents('{% url 'teacher_move_students' class.access_code %}');"
        id="moveSelectedStudents" class="button--small button--primary disabled">Move</button>
        <button onclick="resetStudentPasswords('{% url 'teacher_class_password_reset' class.access_code %}')"
        id="resetSelectedStudents" class="button--small button--primary disabled button--icon">Reset password and login link
        <span class="iconify" data-icon="mdi:shield-refresh-outline"></span></button>
        <button onclick="deleteStudentsConfirmation('{% url 'teacher_delete_students' class.access_code %}')"
        id="deleteSelectedStudents" class="button--small button--primary--danger disabled button--icon">
        Delete<span class="iconify" data-icon="mdi:delete-outline"></span></button>
    </div>
</div>

<div id="add_new_students" class="background background--primary">
    <div class="container">
        <h4>Add new students</h4>

        <p>Add the student names to the box with one name per line or separated by a comma.</p>
        <p>Student names and the class access code are required to sign in.</p>

        <div class="mt-5">
            <button id="studentsCsvButton" type="button" class="button button--secondary button--secondary--dark button--icon">
                Import CSV file<span class="iconify" data-icon="mdi:upload"></span>
            </button>
        </div>
        <div class="mt-4">
            <small><strong>Please note: if using the import option, student names must be under a heading labelled 'name'.</strong></small>
        </div>
    </div>

    <div class="container">
        <form id="form-create-students" method="POST">

            {% csrf_token %}

            {{ new_students_form.non_field_errors }}

            <div class="row d-flex align-items-end">
                <div class="col-md-9 col-xs-9 d-flex">
                    {{ new_students_form.names.errors }}
                    {{ new_students_form.names }}
                </div>

                <div class="col-md-3 col-xs-3">
                    <button id="submitStudents" type="submit" class="button button--primary button--icon m-0" name="new_students" value="Add students">
                        Add students<span class="iconify" data-icon="mdi:plus"></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="background container">
    <h4>Additional class details</h4>
    <p>Here you can change settings and permissions for the class and the students accessing it.
         You can also delete classes and change level access.</p>
    <div class="background button-group">
        <a id="class_settings_button" href="{% url 'teacher_edit_class' class.access_code %}" class="button button--primary button--icon">Edit details
            <span class="iconify" data-icon="mdi:pencil"></span>
        </a>
        <button onclick="deleteClassConfirmation('{% url 'teacher_delete_class' class.access_code %}')"
                id="deleteClass" class="button button--primary button--primary--danger button--icon">Delete class
                <span class="iconify" data-icon="mdi:delete-outline"></span>
        </button>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#form-create-students').submit(disableOnClick('#submitStudents'));

        importStudentsFromCsv('#studentsCsvButton', '#{{ new_students_form.names.auto_id }}')
    });
</script>

{% endblock content %}
