{% extends 'base.html' %}
{% load i18n %}
{% load static carer_tags %}

{% block title %}{% trans "Quiz" %}{% endblock %}

{% block content %}
<section class="intro overflow-hidden">
    <form method="post" action="">
        {% csrf_token %}

<h1>{{ quiz.name }}</h1>

<!-- Progress Bar -->
<div class="progress-bar-container mt-4 w-full bg-gray-300 rounded-full h-4">
    <div
        class="progress-bar bg-primary h-4 rounded-full"
        style="width: {{ progress_percentage }}%;">
    </div>
</div>

        {% for question in current_questions %}
            {% include "quiz/partials/question_input.html" with question=question %}
        {% endfor %}

<div class="mt-4 flex gap-3">
    {% if page_obj.has_previous %}
        <button type="submit" name="previous" value="{{ page_obj.previous_page_number }}" class="btn btn-back">
            Previous
        </button>
    {% endif %}
    {% if page_obj.has_next %}
        <button type="submit" name="next" value="{{ page_obj.next_page_number }}" class="btn btn-primary">
            Next
        </button>
    {% endif %}
    {% if not page_obj.has_next %}
        <button type="submit" class="btn btn-primary">
            Submit Quiz
        </button>
    {% endif %}
</div>

    </form>
</section>
{% endblock %}