<div class="uw-tabs{% if tabs_modifier_class %} {{ tabs_modifier_class }}{% endif %}">

  <div class="uw-tab" role="tablist" aria-label="Multi-tab-list">
    {% for type in content_list %}
      {% if tab_type == "link" %}
        <a href="{{ type.url }}" class="uw-tablinks {{ button_modifier_classes }}{% if type.active %} active{% endif %}">{{ type.text }}</a>
      {% elseif tab_type == "button" %}
        {% set button_class -%}
          uw-tablinks {{ button_modifier_classes }}{% if type.button_class %} {{ type.button_class }}{% endif %}
        {%- endset %}
        <button class="{{ button_class }}">{{ type.text }}</button>
      {% else %}
        {% set button_class -%}
          uw-tablinks {{ button_modifier_classes }}{% if type.button_class %} {{ type.button_class }}{% endif %}
        {%- endset %}
        <button role="tab" class="{{ button_class }}" {% if loop.index == 1 %} aria-selected="true"  {% else %} aria-selected="false" {%  endif %} aria-controls="{{ type }}" id="tab-{{ loop.index }}" tabindex="0">{{ type }}</button>
      {% endif %}
    {% endfor %}
  </div>

  {% if tab_type == "content" %}
    {% for type in content_list %}
      <h2 class="hide-js"> {{ type }}</h2>
      <div id="{{ type }}" class="uw-tabcontent" role="tabpanel" tabindex="0" aria-labelledby="tab-{{ loop.index }}" {% if loop.index > 1 %} hidden {%  endif %} >

        {% if loop.index == 1 %}
          {% block content_area_1 %}
            Content area 1
          {% endblock %}
        {% elseif loop.index == 2 %}
          {% block content_area_2 %}
            Content area 2
          {% endblock %}
        {% elseif loop.index == 3 %}
          {% block content_area_3 %}
            Content area 3
          {% endblock %}
        {% elseif loop.index == 4 %}
          {% block content_area_4 %}
            Content area 4
          {% endblock %}
        {% elseif loop.index == 5 %}
          {% block content_area_5 %}
            Content area 5
          {% endblock %}
        {% endif %}

      </div>
    {% endfor %}
  {% endif %}
</div>