{{ 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">
    <ul class="recent-events__list recent-events__slider">
      {% block items %}
        {% for item in events %}
          <li class="recent-events__item">
            {% include '@components/event-card/event-card.twig' with {
              "event_card": item
            } only %}
          </li>
        {% endfor %}
      {% endblock %}
    </ul>

    {# This is used as a container for slider's arrows and dots. #}
    <div class="recent-events__pager slick-pager"></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>