{% extends "admin/change_form.html" %}
{% block admin_change_form_document_ready %}
{% if tabs %}
<style>
section.tabs-component-panel fieldset table{
    width: 100%;
}
</style>
<script type="text/javascript" charset="utf-8">
django.jQuery(document).ready(function() {
    var $ = django.jQuery;
    add_tabs('#{{ opts.model_name }}_form tabs.django_vue_tabs');
    $('#{{ opts.model_name }}_form div.django_vue_tabs .tabs-component-panels section').each(function (i, item){
        var data_from = $(item).attr('data-from');
        if (data_from) {
            var content;
            var data_from_items = data_from.split(',');
            for (var n in data_from_items) {
                content = $('.' + data_from_items[n]);
                content.appendTo($(item));
            }
        }
        if ($(item).has('.errorlist').length > 0) {
          setTimeout(function () {
            var node = $('#{{ opts.model_name }}_form div.django_vue_tabs ul.tabs-component-tabs li:nth-child('+(i+1)+') a');
            node.css('color', '#ba2121');
          }, 0);
        }
    });
});
</script>
{% endif %}
{{ block.super }}
{% endblock %}
{% block field_sets %}
{% if tabs %}
<tabs class="django_vue_tabs">
    {% for tab in tabs %}
      <tab name="{{ tab.0 }}" data-from="{{ tab.1|join:',' }}"></tab>
    {% endfor %}
</tabs>
{% endif %}
{{ block.super }}
{% endblock %}
