{% extends 'cjkcms/pages/web_page.html' %}
{% load static wagtailcore_tags wagtailimages_tags bootstrap_icons %}
{% block content_body %}

<div id="qapp" quiz_id="{{ quiz.id }}" class="container">
     {% csrf_token %}
    <div id="lxp-content">
    {% user_can_see course_page user 'SECURITY_QUIZZES' as can_see_quizzes %}
    {% if can_see_quizzes %}
        {% if course_page.navbar %}
            {% include 'lxp/snippets/activity_sidenav.html' %}
        {% endif %}
        {% if quiz.description %}
            <div>{{ quiz.description | richtext }}</div>
        {% elif quiz.summary %}
            <div>{{ quiz.summary | richtext }}</div>
        {% endif %}
        <!-- div>This quiz contains {{ num_items }} questions.</div -->

        {% with blocks=self.content %}

            {% for block in blocks %}
                {% if block.is_item %}
                    {% with 'lxp/quiz_blocks/'|add:block.block_type|add:'.html' as template %}
                    {% include template %}
                    {% endwith %}
                {% else %}
                    {% with 'lxp/activity_blocks/'|add:block.block_type|add:'.html' as template %}
                    {% include template %}
                    {% endwith %}
                {% endif %}
            {% endfor %}

        {% endwith %}

        <div id="score_section" v-cloak v-if="score_visible" class="d-flex justify-content-between">
            <h2>You have scored <span class="fw-bold text-warning" v-html="score"></span>%</h2>
            <button class="btn btn-primary"
                @click="resetQuiz()"
            >Try again</button>
            <div class="my-4">
                <a href="{{ page.get_parent.get_parent.url }}" class="btn btn-dark btn-sm">Return to Course Index</a>
            </div>

        </div>

        <div class="d-flex justify-content-between" id="submit_section" v-else>
            <div class="my-4 d-flex gap-2">
                <button class="btn btn-outline-primary"
                    @click="confirmClearAnswers()"
                >Clear all answers</button>
                <button class="btn btn-primary"
                    @click="confirmSubmitAnswers()"
                >Submit your answers</button>
            </div>
            <div class="my-4">
                <a href="{{ page.get_parent.get_parent.url }}" class="btn btn-dark btn-sm">Return to Course Index</a>
            </div>
        </div>
    {% else %}
    <h3>You do not have permissions to see this task. Please sign in.</h3>
    {% endif %}
    </div>
</div>

{% endblock content_body %}

{% block custom_assets %}
<link rel="stylesheet" href="{% static 'lxp/css/lxp.css' %}" />
{% if course_page.navbar %}
<link rel="stylesheet" href="{% static 'lxp/css/sidenav.css' %}" />
{% endif %}
{% endblock custom_assets %}

{% block custom_scripts %}
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="{% static 'lxp/js/quiz_page.js' %}"></script>
<script src="{% static 'lxp/js/activity_page.js' %}"></script>
<!-- https://unpkg.com/browse/vue@3.0.11/dist/vue.global.prod.js -->
{% endblock custom_scripts %}
