{#- If an id 'prefix' is not passed, fall back to using the name attribute
   instead. We need this for error messages and hints as well -#}
{% set idPrefix = params.idPrefix if params.idPrefix %}

<div {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="tabs">
  <h2 class="govuk-tabs__title">
    {{ params.title | default ("Contents") }}
  </h2>

  {% if(params.items) %}
  <ul class="govuk-tabs__list">
    {% for item in params.items %}
    {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
      <li class="govuk-tabs__list-item">
        <a class="govuk-tabs__tab" href="#{{ id }}">
          {{ item.label }}
        </a>
      </li>
    {% endfor %}
  </ul>
  {% endif %}

  {% for item in params.items %}
  {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
  <section class="govuk-tabs__panel" id="{{ id }}">
    {{ item.panel.html | safe if item.panel.html else item.panel.text }}
  </section>
  {% endfor %}
</div>