{{ attach_library('goizueta_theme/recent-events') }}

<section class="recent-events{% if events|length > 4 %} hide-dots--mobile{% endif %}">
  {% if heading %}
    <div class="recent-events__heading--wrapper">
      {% include '@components/heading/heading.twig' with {
        "heading" : heading
      } only %}
    </div>
  {% endif %}

  <div class="recent-events__schedule">
    <div class="recent-events__list recent-events__slider splide">
      <div class="splide__track">
        <ul class="splide__list">
          {% block items %}
            {% for item in events %}
              <li class="splide__slide recent-events__item">
                {% include '@components/event-card/event-card.twig' with {
                  "event_card": item
                } only %}
              </li>
            {% endfor %}
          {% endblock %}
        </ul>
      </div>

      {# This is used as a container for splide's arrows and pagination. #}
      <div class="recent-events__pager splide__arrows">
        <ul class="splide__pagination"></ul>
      </div>
    </div>

    {# CTA below events slider. #}
    {% if cta %}
      <div class="recent-events__cta">
        {%
          include '@components/button/button.twig' with {
            "button": {
              "text": cta.text,
              "url": cta.url,
              "icon": 'arrow-next-navy',
              "classes": 'button--primary button--wide'
            }
          } only
        %}
      </div>
    {% endif %}
  </div>
</section>