{% load humanize %}
<div class="tabs is-boxed mx-5 mb-3">
  <ul>
    {% for tab_id, tab_data in tabset_data.items %}
      <li{% if forloop.first %} class="is-active"{% endif %}>
        <a {% if tab_data.disabled %}class="is-disabled" {% else %}data-target="tab-{{ tab_id }}{% endif %}">
          {% if tab_data.icon_class %}
            <span class="icon is-small"><i class="{{ tab_data.icon_class }}"></i></span>
          {% endif %}
          <span>
            {% if tab_data.verbose_name %}
              {{ tab_data.verbose_name }}
            {% else %}
              {{ tab_id|capfirst }}
            {% endif %}
          </span>
          {% if tab_data.label_count %}
            <span class="tag is-rounded">{{ tab_data.label_count|intcomma }}</span>
          {% endif %}
        </a>
      </li>
    {% endfor %}
  </ul>
</div>

{% for tab_id, tab_data in tabset_data.items %}
  {% if not tab_data.disabled %}
    <section id="tab-{{ tab_id }}" class="tab-content mx-5 px-1 mb-3{% if forloop.first %} is-active{% endif %}">
      {% if tab_data.template %}
        {% include tab_data.template with tab_data=tab_data %}
      {% else %}
        {% include 'scanpipe/tabset/tab_default.html' with tab_data=tab_data only %}
      {% endif %}
    </section>
  {% endif %}
{% endfor %}