{% load crispy_forms_tags i18n %}
{% if inline_form.empty_form %}

    {% if inline_form.non_form_errors %}
        <div class="alert alert-danger">
            <ul>
                {% for error in inline_form.non_form_errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}

    <table class="table inline-form-table" id="formset-{{ inline_form_prefix }}">
        {{ inline_form.management_form|crispy }}
        <thead>
            <tr>
                {% for field in inline_form.empty_form.visible_fields %}
                    <th {% if field.name == 'DELETE' %}style="width: 40px"{% endif %}>{{ field.label }}</th>
                {% endfor %}
            </tr>
        </thead>

        <tbody class="formset-items">
            {% for form in inline_form.forms %}
                <tr class="formset-item {% if form.non_field_errors %}border-danger{% endif %}">
                    {% for field in form.visible_fields %}
                    <td>
                        {% if forloop.first %}
                            {% for hidden in form.hidden_fields %}
                                {{ hidden }}
                            {% endfor %}
                        {% endif %}
                        {% if field.name == 'DELETE' %}
                            <input type="checkbox" name="{{ field.html_name }}" class="delete-item-checkbox" style="display: none">
                            <a href="#" class="btn btn-flat btn-block btn-danger delete-item">Delete</a>
                        {% else %}
                            {{ field|as_crispy_field }}
                        {% endif %}
                    </td>
                    {% endfor %}
                </tr>
                {% if form.non_field_errors %}
                    <tr class="bg-danger text-danger">
                        <td colspan="9999">
                            {{ form.non_field_errors }}
                        </td>
                    </tr>
                {% endif %}
            {% endfor %}
            <tr class="template" style="display: none">
                {% for field in inline_form.empty_form.visible_fields %}
                    <td>
                        {% if forloop.first %}
                            {% for hidden in form.hidden_fields %}
                                {{ hidden }}
                            {% endfor %}
                        {% endif %}
                        {% if field.name == 'DELETE' %}
                            <input type="checkbox" name="{{ field.html_name }}" class="delete-item-checkbox" style="display: none">
                            <a href="#" class="btn btn-flat btn-block btn-danger delete-item">Delete</a>
                        {% else %}
                            {{ field|as_crispy_field }}
                        {% endif %}
                    </td>
                {% endfor %}
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="999">
                    <a href="#" class="btn btn-flat btn-block btn-success add-item">{% trans 'Add ' %} {{ inline_form_verbose_name }}</a>
                </td>
            </tr>
        </tfoot>
    </table>
    <script>
        function txInlineForm(prefix) {
            var totalForms = $('#id_' + prefix + '-TOTAL_FORMS');
            var itemParentSelector = '#formset-' + prefix + ' .formset-items';
            var itemSelector = '#formset-' + prefix + ' .formset-item';
            var templateSelector = '#formset-' + prefix + ' .template';

            $('#formset-' + prefix + ' .add-item').click(function (ev) {
                ev.preventDefault();
                var count = $(itemSelector).length;
                var tmplMarkup = $(templateSelector).html();
                var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
                var newItem = $('<tr class="formset-item"></tr>').append(compiledTmpl);

                /* Remove generated select2 html and data attributes */
                newItem.find('.select2').remove();
                newItem.find('select').removeClass('select2-hidden-accessible');
                newItem.find('select')
                    .removeAttr('data-live-search')
                    .removeAttr('data-select2-id')
                    .removeAttr('aria-hidden')
                    .removeAttr('tabindex');
                newItem.find('select option').removeAttr('data-select2-id');

                $(itemParentSelector).append(newItem);

                totalForms.attr('value', count + 1);
                addDeleteHandler();
                trionyxInitialize();
            });

            function addDeleteHandler() {
                $(itemSelector).on('click', '.delete-item', function (ev) {
                    ev.preventDefault();
                    var itemElement = $(this).closest('.formset-item');
                    itemElement.css('display', 'none');
                    itemElement.find('.delete-item-checkbox').prop( "checked", true );
                });
            }
            addDeleteHandler();
        }

        if (document.readyState === "complete") {
            txInlineForm('{{ inline_form_prefix }}');
        } else {
            window.addEventListener('load', function () {
                txInlineForm('{{ inline_form_prefix }}');
            });
        }
    </script>
{% else %}
    {% crispy inline_form %}
{% endif %}