{% load i18n adminmedia grp_tags %}

<!-- group -->
<div class="group stacked {% if inline_admin_formset.opts.classes %} {{ inline_admin_formset.opts.classes|join:" " }}{% endif %}"
    id="{{ inline_admin_formset.formset.prefix }}-group">
    <h2 class="collapse-handler">{{ inline_admin_formset.opts.verbose_name_plural|title }}</h2>
    <ul class="tools">
        <li class="open-handler-container"><a href="javascript://" class="icon open-handler" title="{% trans 'Open All Items' %}"></a></li>
        <li class="close-handler-container"><a href="javascript://" class="icon close-handler" title="{% trans 'Close All Items' %}"></a></li>
        <li class="add-handler-container"><a href="javascript://" class="icon add-handler" title="{% trans 'Add Item' %}"> </a></li>
    </ul>
    {{ inline_admin_formset.formset.management_form }}
    {{ inline_admin_formset.formset.non_form_errors }}
    <!-- container -->
    <div class="items">
        {% with inline_admin_formset.opts.sortable_field_name|default:"" as sortable_field_name %}
        {% for inline_admin_form in inline_admin_formset|formsetsort:sortable_field_name %}
            <!-- element -->
            <div class="module collapse closed{% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last %} empty-form{% endif %}"
                id="{{ inline_admin_formset.formset.prefix }}{% if forloop.last %}-empty{% else %}{{ forloop.counter0 }}{% endif %}">
                <h3 class="collapse-handler">{{ inline_admin_formset.opts.verbose_name|title }}&nbsp;&nbsp;{% if inline_admin_form.original %}{{ inline_admin_form.original }}{% endif %}</h3>
                <ul class="tools">
                    {% if inline_admin_form.show_url %}<li class="viewsite-link-container"><a href="../../../r/{{ inline_admin_form.original.content_type_id }}/{{ inline_admin_form.original.id }}/" class="icon viewsite-link" title="{% trans 'View on Site' %}" target="_blank"></a></li>{% endif %}
                    {% if inline_admin_formset.opts.sortable_field_name %}
                        <li class="drag-handler-container"><a href="javascript://" class="icon drag-handler" title="{% trans 'Move Item' %}"></a></li>
                    {% endif %}
                    {% if inline_admin_formset.formset.can_delete %}
                        {% if inline_admin_form.original %}
                            <li class="delete-handler-container">{{ inline_admin_form.deletion_field.field }}<a href="javascript://" class="icon delete-handler" title="{% trans 'Delete Item' %}"></a></li>
                        {% else %}
                            <li class="remove-handler-container">{{ inline_admin_form.deletion_field.field }}<a href="javascript://" class="icon remove-handler" title="{% trans 'Delete Item' %}"></a></li>
                        {% endif %}
                    {% endif %}
                </ul>
                {% if inline_admin_form.form.non_field_errors %}
                    <ul class="errorlist">
                        <li>{{ inline_admin_form.form.non_field_errors }}</li>
                    </ul>
                {% endif %}
                {% for fieldset in inline_admin_form %}
                    {% include "admin/includes/fieldset_inline.html" %}
                {% endfor %}
                {{ inline_admin_form.pk_field.field }}
                {{ inline_admin_form.fk_field.field }}
            </div>
        {% endfor %}
        {% endwith %}
        {{ inline_admin_formset.extra_forms }}
    </div>
    <div class="module add-item">
        <a href="javascript://" class="add-handler">{% blocktrans with inline_admin_formset.opts.verbose_name|title as verbose_name %}Add another {{ verbose_name }}{% endblocktrans %}</a>
        <ul class="tools">
            <li class="add-handler-container"><a href="javascript://" class="icon add-handler" title="{% trans 'Add Item' %}"> </a></li>
        </ul><br clear="all" />
    </div>
</div>

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        
        $("#{{ inline_admin_formset.formset.prefix }}-group").grp_inline({
            prefix: "{{ inline_admin_formset.formset.prefix }}",
            onAfterRemoved: function(inline) {},
            onAfterAdded: function(form) {
                grappelli.reinitDateTimeFields(form);
                grappelli.updateSelectFilter(form);
                form.find("input.vForeignKeyRawIdAdminField").grp_related_fk({lookup_url:"{% url grp_related_lookup %}"});
                form.find("input.vManyToManyRawIdAdminField").grp_related_m2m({lookup_url:"{% url grp_m2m_lookup %}"});
                form.find("input[name*='object_id']").grp_related_generic({lookup_url:"{% url grp_related_lookup %}"});
                form.grp_collapsible();
            }
        });
        
        {% if inline_admin_formset.opts.sortable_field_name %}
        $("#{{ inline_admin_formset.formset.prefix }}-group > div.items").sortable({
            handle: "a.drag-handler",
            items: "div.dynamic-form",
            axis: "y",
            appendTo: 'body',
            forceHelperSize: true,
            containment: '#{{ inline_admin_formset.formset.prefix }}-group > div.items',
            tolerance: 'pointer',
        });
        $("#{{ opts.module_name }}_form").bind("submit", function(){
            var sortable_field_name = "{{ inline_admin_formset.opts.sortable_field_name }}";
            var i = 0;
            $("#{{ inline_admin_formset.formset.prefix }}-group").find("div.dynamic-form").each(function(){
                var fields = $(this).find("fieldset :input[value]");
                if (fields.serialize()) {
                    $(this).find("input[name$='"+sortable_field_name+"']").val(i);
                    i++;
                }
            });
        });
        {% endif %}
        
    });
})(django.jQuery);
</script>
