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

{% block css %}
{{ block.super }}
{% endblock css %}

{% block scripts %}
{{ block.super }}
{% endblock scripts %}

{% block pageID %}id="homeWrapper"{% endblock %}

{% block createJoinSchoolStep %}
<div class="onboarding-step onboarding-step--done">
    <p><img title="Done" alt="Step done" src="{% static 'portal/img/step_done.png' %}">Create / Join school</p>
</div>
{% endblock createJoinSchoolStep %}
{% block createClassStep %}
<div class="onboarding-step onboarding-step--in-progress">
    <p><img title="In progress" alt="Step in progress" src="{% static 'portal/img/step_in_progress.png' %}">Create class</p>
</div>
{% endblock createClassStep %}

{% block content %}
{{ block.super }}

<div id="onboarding_classes_page"></div>

{% if classes %}
<div class="background background--primary">
    <div class="form col-sm-8 col-center">
        {% for class in classes %}
        <section class="background">
            <h3>It looks like you&rsquo;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--regular button--primary--general-play" >Add students</a>
        </section>
        {% endfor %}
    </div>
</div>
{% else %}
<div class="background background--primary">
    <div class="form col-sm-4 col-center">
        <h4>{{ user.new_teacher.school.name }}</h4>
        <h3>Create a class</h3>
        <form id="form-create-class" method="post">

            {% csrf_token %}

            {{ form.non_field_errors }}

            <div class="section group">

                <label for="id_{{ form.class_name.html_name }}">{{ form.class_name.label }}</label>
                {{ form.class_name.errors }}
                {{ form.class_name }}
                <div class="col span_1_of_3">
                    <label for="id_{{ form.classmate_progress.html_name }}">{{ form.classmate_progress.label }}</label>
                    {{ form.classmate_progress.errors }}
                </div>
                <div class="col span_1_of_3">
                    {{ form.classmate_progress }}
                </div>
                <button id="create_class_button" type="submit" class="button--regular button-primary button--primary--general-play">Create class</button>
            </div>
        </form>
    </div>
</div>
{% endif %}

{% endblock content %}
