{% 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 showEditPopup(url) {
            var win = window.open(url, "Edit",
                'height=500,width=800,resizable=yes,scrollbars=yes');
            return false;
        }
        function showAddPopup(triggeringLink) {
            var name = triggeringLink.id.replace(/^add_/, '');
            href = triggeringLink.href;
            var win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
            win.focus();
            return false;
        }
        function closePopup(win, newID, newRepr, id) {
            console.log(id)
            $(id + "_to").append('<option value=' + newID + ' title=' + newRepr + ' >' + newRepr + '</option>')
            win.close();
        }


        function add_series_input_form() {
            var form_idx = $('#id_Case_series-TOTAL_FORMS').val();
            $('#series_formset').append($('#empty_series_form').html().replace(/__prefix__/g, form_idx));
            $('#id_Case_series-TOTAL_FORMS').val(parseInt(form_idx) + 1);
        }

        function add_differential_input_form() {
            var form_idx = $('#id_differentialcase-TOTAL_FORMS').val();
            $('#casedifferential_formset').append($('#empty_casedifferential_form').html().replace(/__prefix__/g, form_idx));
            $('#id_differentialcase-TOTAL_FORMS').val(parseInt(form_idx) + 1);
        }

        $(document).ready(function () {
            $('#add_more_series').click(() => { add_series_input_form() });
            $('#add_more_differential').click(() => { add_differential_input_form() });
        })

    </script>

    <!-- {{ form.media }} -->
{% endblock %}
{% block content %}
    <h2>Submit Case</h2>
    Use this form to create a atlas case. Existing associated image sets can be added using this form.
    <form action="" method="post" enctype="multipart/form-data" id="atlas-form">
        {% csrf_token %}

        <table>
            {{ form.as_table }}
        </table>
        <h3>Series:</h3>
        Add image sets here. These can only be added once created (they can also be added to cases on creation).
        <input type="button" value="Add More Series" id="add_more_series">
        <div id="series_formset">
            {% for form in series_formset %}
                <ul class="no-error series-formset">
                    {{form.non_field_errors}}
                    {{form.errors}}
                    {{ form.as_ul }}
                </ul>
            {% endfor %}
        </div>
        {{ series_formset.management_form }}
        <h3>Differential:</h3>
        Add differential here.
        <input type="button" value="Add Another Differential" id="add_more_differential">
        <div id="casedifferential_formset">
            {% for form in casedifferential_formset %}
                <ul class="no-error casedifferential_formset">
                    {{form.non_field_errors}}
                    {{form.errors}}
                    {{ form.as_ul }}
                </ul>
            {% endfor %}
        </div>
        {{ casedifferential_formset.management_form }}
        <input type="submit" class="submit-button" value="Submit" name="submit">
    </form>
    <div id="empty_series_form" style="display:none">
        <ul class='no_error series-formset'>
            {{ series_formset.empty_form.as_ul }}
        </ul>
    </div>
    <div id="empty_casedifferential_form" style="display:none">
        <ul class='no_error casedifferential_formset'>
            {{ casedifferential_formset.empty_form.as_ul }}
        </ul>
    </div>
{% endblock %}