{% extends "atlas/base.html" %}
<!-- {% load static from static %} -->

{% block css %}
{% endblock %}
{% block js %}
<!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
{{form.media}}

<script type="text/javascript">
    function add_case_input_form() {
        var form_idx = $('#id_casedetail_set-TOTAL_FORMS').val();
        $('#case_formset').append($('#empty_case_form').html().replace(/__prefix__/g, form_idx));
        $('#id_casedetail_set-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    }


    $(document).ready(function () {
        $('#add_more_case').click(() => { add_case_input_form() });
    })

</script>
<!-- {{ form.media }} -->
{% endblock %}
{% block content %}
<h2>Create Collection</h2>
Use this form to create a collection of cases
<form action="" method="post" enctype="multipart/form-data" id="atlas-form">
    {% csrf_token %}

    <table>
        {{ form.as_table }}
    </table>
    <h3>Cases:</h3>
    Add cases here. These can only be added once created (they can also be added to cases on creation).
    <input type="button" value="Add More Cases" id="add_more_case">
    <div id="case_formset">
        {% for form in case_formset %}
        <ul class="no-error case-formset">
            {{form.non_field_errors}}
            {{form.errors}}
            {{ form.as_ul }}
        </ul>
        {% endfor %}
    </div>
    {{ case_formset.management_form }}
    <input type="submit" class="submit-button" value="Submit" name="submit">
</form>
<div id="empty_case_form" style="display:none">
    <ul class='no_error case-formset'>
        {{ case_formset.empty_form.as_ul }}
    </ul>
</div>
{% endblock %}