{% extends 'base.html' %}
{% load static %}
{% load widget_tweaks %}
{% load crispy_forms_tags %}
{% block title %} Classwork {% endblock title %}

{% block content %}
<style media="screen">
    .card:hover {
      transform: scale(1);
      box-shadow: 0 5px 5px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
    }
</style>
<div class="row">

<div class="col-12">
    <div class="accordion" id="accordionExample">
        <!-- first card -->
        <div class="col-9 mx-auto mb-5">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Create</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="{% url 'classroom:assignment_create' %}">Assignment</a>
            </div>
        </div>
        <br>
        {% for assignment in assignments %}
        <div class="col-lg-9 mx-auto">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="" id="headingOne">
                    <div class="card" type="card" data-toggle="collapse" data-target="#collapse{{ assignment.pk }}" aria-expanded="true" aria-controls="collapseOne">
                        <div class="card-body">
                        <i class="fas fa-clipboard"></i> 
                        <a class="text-decoration-none" href="{% url 'classroom:assignment_submit' assignment.pk %}">{{ assignment.title }}</a>
                        
                        <em class="text-muted d-inline float-right">Due on {{ assignment.due_date }}</em>
                        </div>
                    </div>
                    </div>

                    <div id="collapse{{ assignment.pk }}" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                    <div class="card-body">
                        <p>No due date</p>
                        <div class="row">
                            {% for resource in assignment.resources %}
                                <div class="col-6">
                                    <div class="card mb-3 ml-2" style="max-width: 400px; max-height:100px;">
                                        <div class="row no-gutters">
                                            <div class="col-md-4">
                                                <img src="{{ resource.files.url }}" class="card-img img-fluid d-none d-lg-block" alt="...">
                                            </div>
                                            <div class="col-md-8">
                                                <div class="card-body">
                                                <h5 class="card-title "><a href="{{ resource.files.url }}">{{ resource.filename }}</a>
                                                </h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <hr class="p-2">
                        <a href="#" class="card-link">Edit assignment</a>
                    </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
        {% endfor %}
        <!-- end first card -->
    </div>
</div>
 
{% endblock content %}