{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block content %}

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="{% url 'programs' %}">Programs</a></li>
        <li class="breadcrumb-item"><a href="{% url 'program_detail' course.program.id %}">{{ course.program }}</a></li>
        <li class="breadcrumb-item"><a href="{{ course.get_absolute_url }}">{{ course }}</a></li>
        <li class="breadcrumb-item"><a href="{% url 'quiz_index' course.slug %}">Quizzes</a></li>
        <li class="breadcrumb-item active" aria-current="page">MC Question Form</li>
    </ol>
</nav>

<div class="title-1">Add questions [{{ quiz_obj|truncatechars:15 }}]</div>
<br><br>

<div class="container">
    <div class="info-text bg-orange mb-3">{{ quizQuestions }} question added</div>

    <form action="#" method="POST">{% csrf_token %}
        {% if form.errors %}<p class="alert alert-danger">Correct the error(s) below.</p>{% endif %}
        <div class="row">
            <div class="col mx-3 py-4 border bg-white">
                <div class="mb-2" hidden>
                    {{ form.quiz }}
                </div>
                {{ form.content|as_crispy_field }}
                {{ form.figure|as_crispy_field }}
                {{ form.explanation|as_crispy_field }}
            </div>
            <div class="col mx-3 py-4 border bg-white">
                {{ form.choice_order|as_crispy_field }}
                <div class="border p-2">
                    <label class="lead">Choices</label>
                {{ formset.management_form }}
                {% for fs in formset %}
                    <label for="username">{{ fs.label }}</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">{{ fs.correct }} <small class="ml-1">Correct</small></span>
                        </div>
                        {{ fs.choice }}
                        <div class="input-group-prepend">
                            <span class="input-group-text">{{ fs.DELETE }} <small class="ml-1">Delete</small></span>
                        </div>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
        <button type="submit" formnovalidate name="another" class="btn btn-outline-primary">
            Save and add another
        </button>
        <button class="btn btn-primary my-4" type="submit">Save</button>
    </form>
</div>

{% endblock %}