{% load i18n gadjo %}
<div class="pk-tabs--tab-list" role="tablist" aria-label="{{ tabs_label }}">
  {% for tab in tabs %}
    <button role="tab"
            type="button"
            aria-selected="{{ forloop.first|yesno:"true,false" }}"
            aria-controls="panel-{{ tabs_uid }}-{{ tab.slug }}"
            id="tab-{{ tabs_uid }}-{{ tab.slug }}"
            tabindex="{{ forloop.first|yesno:"0,-1" }}"
            {% if tab.is_not_default %}class="pk-tabs--button-marker"{% endif %}>{{ tab.label }}</button>
  {% endfor %}
</div>
<div class="pk-tabs--container">
  {% for tab in tabs %}
    <div id="panel-{{ tabs_uid }}-{{ tab.slug }}"
         role="tabpanel" tabindex="0" {% if not forloop.first %}hidden{% endif %}
         data-tab-slug="{{ tab.slug }}"
         aria-labelledby="tab-{{ tabs_uid }}-{{ tab.slug }}">
      {% if tab.template %}{% include tab.template %}{% else %}{{ tab|with_template }}{% endif %}
    </div>
  {% endfor %}
</div>