{{ attach_library('goizueta_theme/give-grid-container') }}
{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('give-grid-container accessible-tabs') : ' class="give-grid-container accessible-tabs"'
%}
<section {{ attributes|raw }} aria-multiselectable="false">
  <header class="give-grid-container__header">
    {% if give_grid_container.eyebrow %}
      <div class="give-grid-container__eyebrow">
        {% include '@components/eyebrow/eyebrow.twig' with {
          "text": give_grid_container.eyebrow,
        } only %}
      </div>
    {% endif %}
    <div class="give-grid-container__heading">
      {% include '@components/heading/heading.twig' with {
        "heading" : give_grid_container.heading
      } only %}
    </div>
  </header>


  {% if give_grid_container.tabs %}
    <nav class="give-grid-container__tabs accessible-tabs__navigation">
      <ul class="give-grid-container__tab-list" role="tablist">
        {% for tab in give_grid_container.tabs %}
          <li class="give-grid-container__tab-item" role="presentation">
            <button
              class="give-grid-container__tab-label accessible-tabs__label"
              id="tab-label--{{ give_grid_container.instance }}--{{ loop.index }}"
              aria-controls="tab-panel--{{ give_grid_container.instance }}--{{ loop.index }}"
              aria-posinset="{{ loop.index }}"
              aria-setsize="{{ loop.length }}"
              aria-selected="{{ loop.index == 1 ? 'true' : 'false' }}"
              role="tab"
              tabindex="0"
            >
              {{ tab.tab_label }}
            </button>
          </li>
        {% endfor %}
      </ul>
    </nav>

    <div class="give-grid-container__panels">
      {% for content in give_grid_container.tabs %}
        <div
          class="give-grid-container__panel accessible-tabs__panel"
          id="tab-panel--{{ give_grid_container.instance }}--{{ loop.index }}"
          aria-hidden="{{ loop.index == 1 ? 'false' : 'true' }}"
          aria-labelledby="tab-label--{{ give_grid_container.instance }}--{{ loop.index }}"
          data-title="{{ content.tab_label }}"
          role="tabpanel"
          tabindex="-1"
        >
          <div class="give-grid-container__panel-container accessible-tabs__panel-container">
            {% if content.give_grid_cards %}

              <div class="give-grid-container__carousel {{ content.give_grid_cards_count > 4 ? 'hide-dots--mobile'}}" data-carousel-instance="{{ loop.index }}">
                {% block grid_cards %}
                {% for card in content.give_grid_cards %}
                  <div class="give-grid-container__carousel-item">
                    {% include '@components/give-grid/give-grid-card.twig' with {
                      "give_grid_card": card.give_grid_card
                    } only %}
                  </div>
                {% endfor %}
                {% endblock %}
              </div>

              {# This is used as a container for slider's arrows and dots. #}
              <div class="give-grid-container__pager slick-pager slick-pager--{{ loop.index }}"></div>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}
</section>