{% extends 'frontend/index.html' %}
{% load static %}
{% load crispy_forms_tags %}



{% block head %}

    <link rel="stylesheet" type="text/css" href="{% static "login/css/index.css" %}"
    /><!--===============================================================================================-->
    <link rel="icon" type="image/png" href="{% static "login/images/icons/favicon.ico" %}"/>
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static "login/vendor/bootstrap/css/bootstrap.min.css" %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css"
          href="{% static "login/fonts/font-awesome-4.7.0/css/font-awesome.min.css" %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css"
          href="{% static "login/fonts/iconic/css/material-design-iconic-font.min.css" %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static "login/vendor/animate/animate.css" %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static "login/vendor/css-hamburgers/hamburgers.min.css" %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static "login/vendor/animsition/css/animsition.min.css" %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static "login/vendor/select2/select2.min.css" %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static "login/vendor/daterangepicker/daterangepicker.css" %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static "login/css/util.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "login/css/main.css" %}">
    <!--===============================================================================================-->
{% endblock head %}

{% block content %}
    <div class="login_container">
        <div class="container-login100">
        <div class="wrap-login100 p-l-55 p-r-55 p-t-80 p-b-30">
            <form class="login100-form validate-form" method="POST">
                {% csrf_token %}
                <span class="login100-form-title p-b-37">
					Create a new class!
				</span>

                {% for field in form %}
                    <div class="wrap-input100 validate-input m-b-10" data-validate="Enter {{ field.label }}">
                        <p style="color: red;">{{ field.errors }}</p>
                        <input type="{{ field.field.widget.input_type }}" name="{{ field.html_name }}"
                               id="{{ field.auto_id }}" required class="input100" placeholder="{{ field.label }}">
                        <span class="focus-input100"></span>
                    </div>
                {% endfor %}
                <div class="container-login100-form-btn m-b-10">
                    <button class="login100-form-btn">
                        Create!
                    </button>
                </div>
                <div class="text-center">
                    <a href="{% url 'home' %}" class="txt2 hov1">
                        Back
                    </a>
                </div>
            </form>
        </div>
    </div>
    <div id="dropDownSelect1"></div>
{% endblock content %}

{% block js %}

    <!--===============================================================================================-->
    <script src="{% static "login/vendor/jquery/jquery-3.2.1.min.js" %}"></script>
    <!--===============================================================================================-->
    <script src="{% static "login/vendor/animsition/js/animsition.min.js" %}"></script>
    <!--===============================================================================================-->
    <script src="{% static "login/vendor/bootstrap/js/popper.js" %}"></script>
    <script src="{% static "login/vendor/bootstrap/js/bootstrap.min.js" %}"></script>
    <!--===============================================================================================-->
    <script src="{% static "login/vendor/select2/select2.min.js" %}"></script>
    <!--===============================================================================================-->
    <script src="{% static "login/vendor/daterangepicker/moment.min.js" %}"></script>
    <script src="{% static "login/vendor/daterangepicker/daterangepicker.js" %}"></script>
    <!--===============================================================================================-->
    <script src="{% static "login/vendor/countdowntime/countdowntime.js" %}"></script>
    <!--===============================================================================================-->
    <script src="{% static "login/js/main.js" %}"></script>
{% endblock js %}