{% extends "shorts/base.html" %}
{% load static from static %}

{% block js %}
<!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->

<script type="text/javascript">
    let csrf_token = "{{csrf_token}}";

    function add_answers_input_form() {
        var form_idx = $('#id_sample_answers-TOTAL_FORMS').val();
        $('#answer_form_set').append($('#answer_empty_form').html().replace(/__prefix__/g, form_idx));
        $(`#id_sample_answers-${form_idx}-status`).val(2);
        $('#id_sample_answers-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    }



    $(document).ready(function () {

        $('#add_more_answers').click(() => {
            add_answers_input_form()
        });



    });








</script>

{{ form.media }}
{% endblock %}
{% block content %}

{% if object %}
    {% include "shorts/question_link_header.html" %}
{% endif %}
    
<h2>Update Sample Answers</h2>
<p>This page allows you to update sample answers for the question.</p>

<p>Sample answers are used to aid marking of a question and providing feedback to candidates.</p>

<p>Ideally there should be a selection of answers that cover the available scores</p>


<form action="" method="post" enctype="multipart/form-data" id="shorts-form">
    {% csrf_token %}
    <h3>Answers:</h3>
    <div id="answer_form_set">
        {% for form in answer_formset %}
        <ul class="no-error answer-formset">
            {{form.non_field_errors}}
            {{form.errors}}
            {{ form.as_ul }}
        </ul>
        {% endfor %}
    </div>
    {{ answer_formset.management_form }}
    <input type="button" value="Add More Answers" id="add_more_answers">
    <p>
    <input type="submit" class="submit-button btn btn-primary" value="Submit" name="submit">
    </p>
</form>
<div id="answer_empty_form" style="display:none">
    <ul class='no_error answer-formset'>
        {{ answer_formset.empty_form.as_ul }}
    </ul>
</div>

{% endblock %}