{% 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 %}
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h2 class="mb-0">Question Answers</h2>
        <small class="text-muted">Manage answer keys for auto-marking</small>
    </div>
    <div class="card-body">
        <details class="help-text mb-3">
            <summary><i class="bi bi-info-circle"></i> Help</summary>
            <p class="mb-0">This page can be used to add and modify answers associated with a question. Answers here are used for auto-marking submitted responses; avoid removing entries unless you intend to re-score submissions.</p>
        </details>

        <form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
            {% csrf_token %}

            <h3 class="h5 mt-2">Answers</h3>
            <div id="form_set" class="mt-3">
                {% for form in answer_formset %}
                    <div class="answer-card mb-3 p-3 border rounded bg-body-secondary">
                        {{form.non_field_errors}}
                        {{form.errors}}
                        <div class="answer-fields">
                            {{ form.as_ul }}
                        </div>
                    </div>
                {% endfor %}
            </div>

            {{ answer_formset.management_form }}

            <div class="d-flex gap-2 align-items-center mt-3">
                <button type="button" id="add_more" class="btn btn-outline-secondary btn-sm">Add another answer</button>
                <input type="submit" class="submit-button btn btn-primary btn-sm ms-auto" value="Save answers" name="submit">
            </div>
        </form>

        <div id="empty_form" class="d-none">
            <div class='answer-card p-3 mb-3 border rounded bg-body-secondary'>
                {{ answer_formset.empty_form.as_ul }}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block css %}
<style>
    /* Answer card layout */
    .answer-card label { font-weight: 600; }
    .answer-card li { list-style: none; margin-bottom: .5rem; }
    .answer-card input[type="text"], .answer-card textarea, .answer-card select { width: 100%; }
    .help-text summary { cursor: pointer; font-weight:600; }
    /* Make the Add button more prominent on small screens */
    @media (max-width: 576px) {
        .submit-button { width: 100%; }
    }
</style>
{% endblock %}