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

{% block content %}

<div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a> 
    <a href="{% url 'programs' %}" class="primary1"> Programs</a> 
    <a href="{% url 'program_detail' course.program.id %}" class="primary1"> {{ course.program }}</a> 
    <a href="{{ course.get_absolute_url }}" class="primary1">{{ course }}</a> 
    <a href="{% url 'quiz_index' course.slug %}" class="primary1">Quiz list</a> MC Question add for {{ quiz_obj }}</div>

<div class="container">

    <div class="header-title-md text-center mt-4">Add questions [{{ quiz_obj }}]</div>
    <div class="title-line mb-5"></div>

    <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>
                <div class="mb-2">
                    {{ form.content|as_crispy_field }}
                </div>
                <div class="mb-2">
                    {{ form.figure|as_crispy_field }}
                </div>
                <div class="mb-2">
                    {{ form.explanation|as_crispy_field }}
                </div>
            </div>
            <div class="col mx-3 py-4 border bg-white">
                <div class="mb-2">
                    {{ form.choice_order|as_crispy_field }}
                </div>
                <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>
        <center>
            <button type="submit" formnovalidate name="another" class="btn btn-lg btn-outline-primary">
                Save and add another
            </button>
            <button class="btn btn-lg btn-primary my-4" type="submit">Save</button>
        </center>
    </form>
</div>

{% endblock %}