{% extends "templates/base.html" %}
{% block title %}
    {{ _("Quiz List") }}
{% endblock %}


{% block content %}
<div class="common-page-style">
    <div class="container form-width">
        {{ Header() }}
        {% if quiz_list | length %}
        {{ QuizList(quiz_list) }}
        {% else %}
        {{ EmptyState() }}
        {% endif %}
    </div>
</div>
{% endblock %}

{% macro Header() %}
<header class="sticky">
    <div class="edit-header">
        <div class="page-title">
            {{ _("Quiz List") }}
        </div>

        <a class="btn btn-primary btn-sm align-self-center" href="/quizzes/new-quiz">
            {{ _("Add Quiz") }}
        </a>
    </div>
</header>
{% endmacro  %}

{% macro QuizList(quiz_list) %}
<div class="mt-5">
    <ul class="list-unstyled">
       {% for quiz in quiz_list %}
       <li class="outline-lesson">
            <a class="clickable" href="/quizzes/{{ quiz.name }}">
                <span>
                    {{ loop.index }}.
                </span>
                <span>
                    {{ quiz.title }}
                </span>
            </a>
        </li>
    {% endfor %}
    </ul>
</div>
{% endmacro %}

{% macro EmptyState() %}
<div class="empty-state mt-5">
    <img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
    <div class="empty-state-text">
        <div class="empty-state-heading">
            {{ _("You have not created any quiz yet.") }}
        </div>
        <div class="course-meta ">
            {{ _("Create a quiz and add it to your course to engage your users.") }}
        </div>
    </div>
</div>
{% endmacro %}