{%- set containerClasses = [params.classes] if params.classes else [] -%}
{%- set classes = containerClasses | join(' ') -%}
<nav class="tna-index-grid{% if classes %} {{ classes }}{% endif %}" aria-label="{{ params.title }}"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
  {%- if params.headingLevel > 0 %}
  <div class="tna-container">
    <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
    {%- if params.supertitle %}
      <hgroup class="tna-hgroup-{{ params.headingSize or 'l' }} tna-index-grid__heading">
        <p class="tna-hgroup__supertitle">{{ params.supertitle }}</p>
        <h{{ params.headingLevel }} class="tna-hgroup__title">
          {%- if params.href %}
          <a href="{{ params.href }}" class="tna-index-grid__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.title }}</a>
          {%- else %}
          {{ params.title }}
          {%- endif %}
        </h{{ params.headingLevel }}>
      </hgroup>
    {%- else %}
      <h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'l' }} tna-index-grid__heading">
        {%- if params.href %}
        <a href="{{ params.href }}" class="tna-index-grid__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.title }}</a>
        {%- else %}
        {{ params.title }}
        {%- endif %}
      </h{{ params.headingLevel }}>
    {%- endif %}
      {%- if params.text %}
        <p>{{ params.text }}</p>
      {%- else %}
        {{ params.body | safe }}
      {%- endif %}
    </div>
  </div>
  {%- endif %}
  <ul class="tna-index-grid__items tna-container">
    {%- set itemClasses = ['tna-index-grid__item-wrapper', 'tna-column'] %}
    {%- if params.columns == 1 %}
      {%- set itemClasses = itemClasses.concat('tna-column--full') %}
    {%- else %}
      {%- set itemClasses = itemClasses.concat('tna-column--width-1-' ~ params.columns) %}
    {%- endif %}
    {%- if params.columnsMedium %}
      {%- if params.columnsMedium == 1 %}
        {%- set itemClasses = itemClasses.concat('tna-column--full-medium') %}
      {%- else %}
        {%- set itemClasses = itemClasses.concat('tna-column--width-1-' ~ params.columnsMedium ~ '-medium') %}
      {%- endif %}
    {%- endif %}
    {%- if params.columnsSmall %}
      {%- if params.columnsSmall == 1 %}
        {%- set itemClasses = itemClasses.concat('tna-column--full-small') %}
      {%- else %}
        {%- set itemClasses = itemClasses.concat('tna-column--width-1-' ~ params.columnsSmall ~ '-small') %}
      {%- endif %}
    {%- endif %}
    {%- if params.columnsTiny %}
      {%- if params.columnsTiny == 1 %}
        {%- set itemClasses = itemClasses.concat('tna-column--full-tiny') %}
      {%- else %}
        {%- set itemClasses = itemClasses.concat('tna-column--width-1-' ~ params.columnsTiny ~ '-tiny') %}
      {%- endif %}
    {%- endif %}
    {%- for item in params.items %}
    <li class="{{ itemClasses | join(' ') }}">
      <a href="{{ item.href }}" class="tna-index-grid__item">
        <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}"{%- if params.lazyImages %} loading="lazy"{% endif %}>
        <span class="tna-index-grid__item-content">
          {%- if item.label %}
          <span class="tna-chip tna-index-grid__item-label">{{ item.label }}<span class="tna-!--visually-hidden">:</span></span>
          {%- endif %}
          <span class="tna-index-grid__item-title">{{ item.title }}</span>
          {%- if item.subtitle %}
          <br>
          <span class="tna-index-grid__item-subtitle">
            <span class="tna-visually-hidden">(</span>{{ item.subtitle }}<span class="tna-visually-hidden">)</span></span>
          {%- endif %}
        </span>
      </a>
    </li>
    {%- endfor %}
  </ul>
</nav>