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

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

<div class="background container">
    <div class="row">
        <div class="form col-sm-12">
            <h4>Add students to class</h4>

            <p class="mb-3">Progress &lt; 3 of 4 &gt;</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
                    <span class="sr-only">75% Complete</span>
                </div>
            </div>

            <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>

            <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-6 col-xs-9 d-flex">
                        {{ new_students_form.names.errors }}
                        {{ new_students_form.names }}
                    </div>

                    <div class="col-md-6 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>

<script>
  $(document).ready(function(){
    $('#form-create-students').submit(disableOnClick('#submitStudents'));

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


{% endblock content %}
