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

{% block css %}
<style>
    /* Turn the existing form-check radio markup into horizontal button-like radios */
    #div_id_collection_type .form-check { display: inline-block; margin-right: .5rem; }
    #div_id_collection_type .form-check-input {
        /* visually hide the native radio but keep it focusable */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }
    #div_id_collection_type .form-check-label {
        display: inline-block;
        padding: .375rem .75rem;
        border: 1px solid #0d6efd;
        border-radius: .375rem;
        color: #0d6efd;
        cursor: pointer;
        user-select: none;
    }
    #div_id_collection_type .form-check-input:focus + .form-check-label {
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    }
    #div_id_collection_type .form-check-input:checked + .form-check-label {
        background-color: #0d6efd;
        color: #fff;
    }
    /* small spacing tweak when legend present */
    #div_id_collection_type fieldset { border: 0; padding: 0; margin: 0 0 1rem 0; }
</style>
{% 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 ol').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 %}
    
    {% if collection %}
    <h2>Update Collection</h2>

    {% else %}
    <h2>Create Collection</h2>
    Use this form to create a collection of cases
        
    {% endif %}
        
    <form class="highlight" action="" method="post" enctype="multipart/form-data" id="atlas-form">
        {% csrf_token %}

        {% crispy form form.helper %}
        {% comment %} <h3>Cases:</h3>
        Add cases here. These can only be added once created (they can also be added to cases on creation). Click and drag to change order.
        <input type="button" value="Add More Cases" id="add_more_case">
        <input type=button id="case-order-button" title="click and drag to update case order" value="Update case order" />
        <div id="case_formset" class="sortable list_formset">
            <ol>
            {% for form in case_formset %}
                <li class="no-error case-formset">
                    {{form.non_field_errors}}
                    {{form.errors}}
                    {{ form }}
                </li>
            {% endfor %}
            </ol>

        </div>
        {{ case_formset.management_form }}
    </form>
    <div id="empty_case_form" style="display:none">
        <li class='no_error case-formset'>
            {{ case_formset.empty_form }}
        </li>
    </div> {% endcomment %}
        {% comment %} <input type="submit" class="submit-button" value="Submit" name="submit"> {% endcomment %}
    </form>
    <script>
$(document).ready(() => {
    sortable('.sortable');

    $("#case-order-button").click((e) => {
       let cases = $("#case_formset ul");
       cases.each((n, el) => {
           input_el = $(el).find("input[name$='sort_order']");
           console.log(input_el);
           input_el.val(n+1);
       })
       evt.preventDefault()
    })
})
    </script>

{% endblock %}