{% extends 'assignment_base.html' %}
{% load static %}
{% load widget_tweaks %}
{% load crispy_forms_tags %}
{% block title %} Assignment-Create {% endblock title %}

{% block content %}
<form action ="{% url 'classroom:assignment_create' %}" method="POST" enctype='multipart/form-data'>
    {% csrf_token %}
    <nav class="navbar navbar-light bg-light">
        <div class="navbar-brand">
            <a href="{% url 'classroom:home' %}"><i class="fas fa-times"></i></a>
            <div class="pl-3 float-right">Assignment</div>
        </div>
        <div class="form-inline">
            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                <button type="submit" class="btn btn-secondary">Assign</button>
                
                <div class="btn-group" role="group">
                    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    </button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="#">Dropdown link</a>
                        <a class="dropdown-item" href="#">Dropdown link</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <!-- Make a form here -->
    <div class="row m-3">
        <div class="col-lg-8">
            <div class="form-group">
                <label for="title">Title</label>
                {{ form.title|attr:"class:form-control" }}
            </div>
            <hr>
            <div class="form-group">
                <label for="description">Description</label>
                {{ form.description|attr:"class:form-control" }}
            </div>
            <hr>
            {{ form.file_field|attr:"class:choose" }}
        </div>
        <!-- <div class="col-1">
            <div class="vl d-sm-none d-md-block"></div>
        </div> -->
        <!-- The selection stuff -->
        <div class="col-lg-4 vl v p-3 mt-sm-2">
            <!-- For -->
            <hr class='d-lg-none d-sm-block'>
            <h5>For</h5>
            <div class="row">
                <div class="col">
                    {{ form.classrooms|attr:"class:form-control" }}
                </div>
                <!-- <div class="col">
                    <select id="" class="form-control" name="">
                        <option value="">Classroom1</option>
                        <option value="">Classroom2</option>
                        <option value="">Classroom3</option>
                    </select>
                </div> -->
            </div>
            <hr>
            
            <!-- Points -->
            <h5>Points</h5>
            <div class="row">
                <div class="col">
                    {{ form.points|attr:"class:form-control" }}
                </div>
            </div>
            <hr>

            <!-- Due -->
            <h5>Due</h5>
            <div class="row">
                <div class="col">
                    {{ form.due_date|attr:"class:form-control"|attr:"type:datetime-local" }}
                </div>
            </div>
            <hr>
            
            <!-- Topic -->
            <h5>Topic</h5>
            <div class="row">
                <div class="col">
                    {{ form.topics|attr:"class:form-control" }}
                </div>
            </div>
            <hr>

        </div>

    </div>
</form>
{% endblock content %}