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


{% block head_include %}
    {% include "public/icons/symbol-defs.svg" %}
{% endblock %}


{% block content %}
<div class="common-page-style" style="background-color: var(--fg-color);">
    <div class="container">
        {{ BreadCrumb(quiz) }}
        {{ QuizCard(quiz) }}
    </div>
</div>
{% endblock %}


{% macro BreadCrumb(quiz) %}
<div class="breadcrumb">
    <a class="dark-links" href="/courses">{{ _("Quizzes") }}</a>
    <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
    <span class="breadcrumb-destination">{{ quiz.title if quiz.title else _("New Quiz") }}</span>
</div>
{% endmacro %}


{% macro QuizCard(quiz) %}
<div style="width: 60%;">

    <div class="course-home-headings mb-2" data-placeholder="{{ _('Quiz Title') }}" id="quiz-title"
        contenteditable="true">{% if quiz.title %}{{ quiz.title }}{% endif %}</div>

    <div class="mt-4">
        <button class="btn btn-secondary btn-sm btn-question"> {{ _("New Question") }} </button>
        <button class="btn btn-primary btn-sm btn-save-question ml-2 hide"> {{ _("Save") }} </button>
    </div>


    {% if quiz.question %}
    {% for question in quiz.questions %}
    <div class="quiz-card">
        <div contenteditable="true" data-placeholder="{{ _('Question') }}"
        class="mb-4">{% if question.question %} {{ question.question }} {% endif %}</div>

        {% for num in range(1,5) %}
        {% set option = question["option_" + frappe.utils.cstr(num)] %}
        {% set explanation = question["explanation_" + frappe.utils.cstr(num)] %}

        <div class="mt-4">
            <label class=""> {{ _("Option") }} {{ frappe.utils.cstr(num) }} </label>
            <div class="d-flex justify-content-between">
                <div contenteditable="true" data-placeholder="{{ _('Option') }}"
                    class="option-input">{% if option %}{{ option }}{% endif %}</div>
                <div contenteditable="true" data-placeholder="{{ _('Explanation') }}"
                    class="option-input">{% if explanation %}{{ explanation }}{% endif %}</div>
                <div class="option-checkbox">
                    <input type="checkbox" {% if question['is_correct_' + frappe.utils.cstr(num)] %} checked {% endif %}>
                    <label class="mb-0"> {{ _("Is Correct") }} </label>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% endfor %}
    {% endif %}
</div>
{% endmacro %}