{% extends 'base.html' %}
{% block title %}{{ title }} | Learning management system{% endblock title %}
{% load i18n %}
{% load static %}

{% block content %}
<style>.bg-light-warning{background-color: rgb(252, 217, 111) !important;}</style>

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="{% url 'programs' %}">Programs</a></li>
        <li class="breadcrumb-item"><a href="{% url 'program_detail' pk=1 %}">{{ course.program }}</a></li>
        <li class="breadcrumb-item"><a href="{{ course.get_absolute_url }}">{{ course }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Quizzes</li>
    </ol>
</nav>

{% if request.user.is_superuser or request.user.is_teacher %}
<div class="manage-wrap">
    <a class="btn btn-primary" href="{% url 'quiz_create' course.slug %}"><i class="fas fa-plus"></i> Add Quiz</a>
</div>
{% endif %}

<div class="title-1">Quizzes [{{ course|truncatechars:25 }}]</div>
<br>
<br>

{% include 'snippets/messages.html' %}

<div class="container">

    <div class="row">
        {% for quiz in quizzes %}
        <div class="col-md-4 mb-2">
            <div class="card p-2 quiz-wrapper">
                <div class="d-flex justify-content-between align-items-center text-success mb-4">
                    <em class="text-left">{{ quiz.category|title }} Quiz</em>
                    <div class="text-right text-light bg-danger px-2 small rounded">
                        {{ quiz.get_questions.count }} Questions
                    </div>
                </div>

                <h6>{{ quiz.title|title }}</h6>

                {% if quiz.description %}
                <p class="text-muted small">{{ quiz.description }}</p>
                {% else %}
                <p class="text-muted small">No description set.</p>
                {% endif %}

                {% if quiz.single_attempt %}
                <p class="p-2 bg-light-warning small">{% trans "You will only get one attempt at this quiz" %}.</p>
                {% endif %}

                <div class="d-flex align-items-center">
                    <a class="btn btn-block btn-secondary w-100" href="{% url 'quiz_take' pk=course.pk slug=quiz.slug %}">{% trans "Start quiz" %} &raquo;</a>

                    {% if request.user.is_superuser or request.user.is_teacher %}
                        <div class="dropup">
                            <button class="btn btn-sm p-0 ms-2" type="button" data-bs-toggle="dropdown"><i class="fas fa-ellipsis-v m-0"></i></button>
                            <div class="dropdown-menu" aria-labelledby="dropdown01">
                                <div class="dropdown-item">
                                    <a href="{% url 'quiz_update' slug=course.slug pk=quiz.id %}" class="update"><i class="fas fa-pencil-alt"></i> Edit</a>
                                </div>
                                <div class="dropdown-item">
                                    <a href="{% url 'quiz_delete' slug=course.slug pk=quiz.id %}" class="delete"><i class="fas fa-trash-alt"></i> Delete</a>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

</div>
{% endblock %}

{% block js %}
<script>
    // #####################################
    // loader
    // document.getElementById('progress-main').style.display = 'none';
    var timer = setInterval(function(){
        document.getElementById('progress-card').style.display = 'none';
        document.getElementById('progress-main').style.display = 'block';
        clearInterval(timer)
    }, 8000);           
</script>
{% endblock js %}