{% extends "base.html" %}{% load static %}
{% block title %} {{ title }}{% endblock %}

{% block page_heading %}
    <div class="row d-inline-flex">
        <div class="col">
            Multiple Lineup Edit
        </div>
    </div>

{% endblock %}
{% block content %}
    <form method="post" action="{% url 'teamsnap_choose_multiple_lineups' team_id=team_id%}">

        <div class="table-responsive">
            <table class="table table-striped table-sm">
                {{ formset.management_form }}
                {% csrf_token %}
                {#    <thead>#}
                {#    </thead>#}
                <tbody>
                {% for form in formset %}
                    <tr>
                        <th>Game {{ forloop.counter }}</th>
                        <td>{{ form.event_id }}</td>
                    </tr>
                {% endfor %}
                </tbody>

            </table>
        </div>
    <input class="btn btn-sm btn-primary" type="submit" value="Submit">
    </form>


    <!-- create_normal.html :: part 4 -->

    <script type='text/javascript'>
        function updateElementIndex(el, prefix, ndx) {
            var id_regex = new RegExp('(' + prefix + '-\\d+)');
            var replacement = prefix + '-' + ndx;
            if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
            if (el.id) el.id = el.id.replace(id_regex, replacement);
            if (el.name) el.name = el.name.replace(id_regex, replacement);
        }
        function cloneMore(selector, prefix) {
            var newElement = $(selector).clone(true);
            var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
            newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
                var name = $(this).attr('name').replace('-' + (total-1) + '-', '-' + total + '-');
                var id = 'id_' + name;
                $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
            });
            newElement.find('label').each(function() {
                var forValue = $(this).attr('for');
                if (forValue) {
                    forValue = forValue.replace('-' + (total-1) + '-', '-' + total + '-');
                    $(this).attr({'for': forValue});
                }
            });
            total++;
            $('#id_' + prefix + '-TOTAL_FORMS').val(total);
            $(selector).after(newElement);
            var conditionRow = $('.form-row:not(:last)');
            conditionRow.find('.btn.add-form-row')
                .removeClass('btn-success').addClass('btn-danger')
                .removeClass('add-form-row').addClass('remove-form-row')
                .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>');
            return false;
        }
        function deleteForm(prefix, btn) {
            var total = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
            if (total > 1){
                btn.closest('.form-row').remove();
                var forms = $('.form-row');
                $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
                for (var i=0, formCount=forms.length; i<formCount; i++) {
                    $(forms.get(i)).find(':input').each(function() {
                        updateElementIndex(this, prefix, i);
                    });
                }
            }
            return false;
        }
        $(document).on('click', '.add-form-row', function(e){
            e.preventDefault();
            cloneMore('.form-row:last', 'form');
            return false;
        });
        $(document).on('click', '.remove-form-row', function(e){
            e.preventDefault();
            deleteForm('form', $(this));
            return false;
        });
    </script>

{% endblock %}