{% extends "templates/base.html" %}
{% block title %}
    {{ quiz.title if quiz.name else _("Quiz Details") }}
{% endblock %}


{% block content %}
<div class="common-page-style">
    {{ Header() }}
    <div class="container form-width">
        {{ QuizForm(quiz) }}
    </div>
</div>
{% endblock %}

{% macro QuizForm(quiz) %}
<div id="quiz-form" {% if quiz.name %} data-name="{{ quiz.name }}" data-index="{{ quiz.questions | length }}" {% endif %}>
    {{ QuizDetails(quiz) }}
    <div class="field-group">
        <div class="questions-table"></div>
    </div>
</div>
{% endmacro %}


{% macro Header() %}
<header class="sticky">
    <div class="container form-width">
        <div class="edit-header">
            <div>
                <div class="page-title">
                    {{ _("Quiz Details") }}
                </div>
                <div class="vertically-center small">
                    <a class="dark-links" href="/quizzes">
                        {{ _("Quiz List") }}
                    </a>
                    <img class="icon icon-sm mr-0" src="/assets/lms/icons/chevron-right.svg">
                    <span class="breadcrumb-destination">
                        {{ quiz.title if quiz.title else _("New Quiz") }}
                    </span>
                </div>
            </div>

            <div class="align-self-center">
                <button class="btn btn-primary btn-sm btn-save-quiz">
                    {{ _("Save") }}
                </button>
            </div>

        </div>
    </div>
</header>
{% endmacro  %}

{% macro QuizDetails(quiz) %}
<div class="field-parent">
    <div class="field-group">
        <div>
            <div class="field-label reqd">
                {{ _("Title") }}
            </div>
            <div class="field-description">
                {{ _("Add a title for the quiz") }}
            </div>
        </div>
        <div class="">
            <input type="text" class="field-input" id="quiz-title" {% if quiz.name %} value="{{ quiz.title }}" data-title="{{ quiz.title }}" {% endif %}>
        </div>
    </div>

    <div class="field-group">
        <div class="field-label">
            {{ _("Max Attempts") }}
        </div>
        <div class="field-description">
            {{ _("Enter the maximum number of times a user can attempt this quiz") }}
        </div>
        <div>
            {% set max_attempts = quiz.max_attempts if quiz.name else 0 %}
            <input type="number" class="field-input" id="max-attempts" value="{{ max_attempts }}">
        </div>
    </div>

    <div class="field-group">
        <div class="field-label reqd">
            {{ _("Passing Percentage") }}
        </div>
        <div class="field-description">
            {{ _("Minimum percentage required to pass this quiz.") }}
        </div>
        <div>
            <input type="number" class="field-input" id="passing-percentage" value="{{ quiz.passing_percentage }}">
        </div>
    </div>

    <div class="field-group vertically-center">
        {% set show_answers = quiz.show_answers or not quiz.name %}
        <label for="show-answers" class="vertically-center mb-0">
            <input type="checkbox" id="show-answers" {% if show_answers %} checked {% endif %}>
            {{ _("Show Answers") }}
        </label>
        <label for="show-submission-history" class="vertically-center mb-0 ml-20">
            <input type="checkbox" id="show-submission-history" {% if quiz.show_submission_history %} checked {% endif %}>
            {{ _("Show Submission History") }}
        </label>
    </div>
</div>
{% endmacro %}

{% macro Question(question, index) %}
{% set type = question.type if question.type else "Choices" %}
<div class="list-row question-row" role="button" data-question="{{ question.name }}">
    <div class="flex clickable">
       <span class="mr-1">
            {{ index }}.
        </span>
        {{ question.question.split("\n")[0] }}
    </div>
</div>
{% endmacro %}

{% macro EmptyState() %}
<article class="empty-state my-5">
    <div class="text-center">
        <div class="bold-heading">
            {{ _("You have not added any question yet") }}
        </div>
        <div>
            {{ _("Create and manage questions from here.") }}
        </div>
        <div class="mt-4">
            <button class="btn btn-default btn-sm btn-add-question">
                <span>
                    {{ _("Add Question") }}
                </span>
            </button>
        </div>
    </div>
</article>
{% endmacro %}

{%- block script %}
    {{ super() }}
    {% if has_course_instructor_role() or has_course_moderator_role() %}
    <script>
        const quiz_questions = {{ quiz.questions or [] }}
    </script>
    {% endif %}
{% endblock %}