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

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

{% if classes %}
<div class="background container">
    <div class="row">
        <div class="form col-sm-12">
            {% for class in classes %}
            <section class="background">
                <h3>It looks like you've already created a class ({{ class.name }}) in your school ({{ user.new_teacher.school.name }})</h3>
                <a id="add_students" href="{% url 'onboarding-class' class.access_code %}" class="button button--primary" >Add students</a>
            </section>
            {% endfor %}
        </div>
    </div>
</div>
{% else %}
<div class="background container">
    <div class="row">
        <div class="form col-sm-12">
            <h4>Create a class</h4>

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

            <p>
                When you set up a new class, a unique class access code will automatically be generated, with you being
                identified as the teacher for that class.
            </p>

            <form id="form-create-class" method="post">

                {% csrf_token %}

                {{ form.non_field_errors }}

                <div class="row form--row">
                    <div class="form--row__input col-sm-6 col-md-4">
                        <div class="input--icon">
                            {{ form.class_name }}
                            <span class="iconify" data-icon="mdi:account-multiple"></span>
                        </div>
                        <small>{{ form.class_name.help_text }}</small>
                        {{ form.class_name.errors }}
                    </div>
                </div>
                <div class="row form--row">
                    <div class="form--row__input col-sm-12 col-md-12">
                        <div class="form__checkbox">
                            <div class="form__checkbox-input">
                                {{ form.classmate_progress }}
                            </div>
                            <label for="id_{{ form.classmate_progress.html_name }}" class="font-weight-normal">{{ form.classmate_progress.label }}</label>
                        </div>
                        {{ form.classmate_progress.errors }}
                    </div>
                </div>

                <button id="create_class_button" type="submit" class="button button--primary">Create class</button>
            </form>
        </div>
    </div>
</div>
{% endif %}

{% endblock content %}
