{% extends 'admin/change_form.html' %}
{% load static i18n admin_urls %}

{% block extrastyle %}
  {{ block.super }}

  {% comment %} <link rel="stylesheet" type="text/css" href="{% static "jquery-ui-1.12.1/jquery-ui.min.css" %}"> {% endcomment %}
  <link rel="stylesheet" type="text/css" href="{% static "jquery-ui-1.12.1/themes/smoothness/jquery-ui.css" %}">
  {% comment %} <link rel="stylesheet" type="text/css" href="{% static "css/tabs.css" %}"> {% endcomment %}

{% endblock %}

{% block field_sets %}

  {% comment %} fieldset.name 为空的放在最前面 {% endcomment %}
  {% for fieldset in adminform %}
    {% if forloop.counter0 == 0 %}
        {% include "admin/jqueryui_tabs/includes/fieldset.html" %}
    {% endif %}
  {% endfor %}

  {% comment %} 渲染 tabs {% endcomment %}
  <div id="tabs">

    <ul>
      {% for fieldset in adminform %}
        {% if forloop.counter0 != 0 %}
          <li><a href="#fieldset-{{ forloop.counter0 }}">{{ fieldset.name }}</a></li> 
        {% endif %}
      {% endfor %}

      {% for inline_admin_formset in inline_admin_formsets %}
          <li><a href="#{{ inline_admin_formset.formset.prefix }}-group">{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</a></li> 
      {% endfor %}

    </ul>

    {% comment %} 渲染 tabs 的内容 {% endcomment %}
    {% for fieldset in adminform %}
      {% if forloop.counter0 != 0 %}
        {% include "admin/jqueryui_tabs/includes/fieldset.html" %}
      {% endif %}
    {% endfor %}

    {% for inline_admin_formset in inline_admin_formsets %}
        {% include inline_admin_formset.opts.template %}
    {% endfor %}

  </div>

{% endblock %}

{% block inline_field_sets %}
  {% comment %} 覆写为空 {% endcomment %}
{% endblock %}

{% block admin_change_form_document_ready %}
  {{ block.super }}

  <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
  <script type="text/javascript" src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}"></script>

  <script type="text/javascript">
      (function($) {
          $("#tabs").tabs({
            active: localStorage.getItem("tabCurrIdx"),
            activate: function(event, ui) {
                localStorage.setItem("tabCurrIdx", $(this).tabs('option', 'active'));
            }
          });
      })($);
  </script>

{% endblock %}