{% extends "anatomy/base.html" %}

{% load static %}

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

<script type="text/javascript">

    function add_input_form() {
        var form_idx = $('#id_answers-TOTAL_FORMS').val();
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_answers-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    }

    $(document).ready(function () {
        $('#add_more').click(() => {
            add_input_form()
        });
    });

</script>

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

{% if object %}
    {% include 'anatomy/question_link_header.html' %}
{% endif %}
<h2>Question Answers</h2>
<details class="help-text">
    <summary><i class="bi bi-info-circle"></i> Help</summary>
<p>This page can be used to add and modify answers associated with a question. Answers in here will be used for automarking submitted answers so it is best not to remove. Updating an answer here will not automatically update a submitted answers (scores cache would need to be refreshed)</p>
</details>
<form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
    {% csrf_token %}
    <h3>Answers:</h3>
    <div id="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">
    <p>
    <input type="submit" class="submit-button btn btn-primary" value="Submit" name="submit">
    </p>
</form>
<div id="empty_form" style="display:none">
    <ul class='no_error answer-formset'>
        {{ answer_formset.empty_form.as_ul }}
    </ul>
</div>
{% endblock %}