{{ attach_library('goizueta_theme/card-container') }}

{# Preserve the Drupal attributes if they're available. #}
{% set component_classes = 'card-container' %}
{% if cta %}
  {% set component_classes = component_classes ~ ' has-cta' %}
  {% set cta_icon = cta.icon ? cta.icon : 'submit' %}
{% endif %}
{% set attributes = attributes ? attributes.addClass(component_classes) : ' class="' ~ component_classes ~ '"' %}

{# Get count of news items. #}
{% set item_count = cards|length %}

<section {{ attributes|raw }}>
  <div class="card-container__title">
    {% include '@components/heading/heading.twig' with {
      "heading" : heading
    } only %}
  </div>
  <div class="card-container__carousel{% if item_count > 4 %} hide-dots--mobile{% endif %}">
    <ul class="card-container__cards">
      {% for item in cards %}
        <li class="card-container__cards--item">
          {% include '@components/card/card.twig' with {
            "card": {
                "program_name": item.program_name,
                "program_meta": item.program_meta,
                "link": item.link,
                "image": item.image,
                "title": item.title,
                "subhead": item.subhead,
                "body": item.body,
              }
            } only
          %}
          {% block program_compare %}
            {% if item.program_name and program_compare_enabled %}
              <div class="program__compare">
                <input
                  aria-describedby="program comparison card"
                  type="checkbox"
                  id="{{ item.program_name|clean_class }}"
                  name="{{ item.program_name }}"
                  value="{{ item.program_name }}"
                  class="card__program-compare">
                <label for="{{ item.program_name|clean_class }}" class="program__compare--label">{{ item.program_name }}</label>
              </div>
            {% endif %}
          {% endblock %}
        </li>
      {% endfor %}
    </ul>
    {# This is used as a container for slider's arrows and dots. #}
    <div class="card-container__pager slick-pager"></div>
  </div>

  {% if cta %}
    {% set button_classes = 'button--primary' %}
    {% if cta.cta_classes is not empty %}
      {% set button_classes = button_classes ~ ' ' ~ cta.cta_classes %}
    {% endif %}
    <div class="card-container__cta">
      {%
        include '@components/button/button.twig' with {
          "button": {
            "text": cta.text,
            "url": cta.url,
            "icon": cta_icon,
            "classes": button_classes
          }
        } only
      %}
    </div>
  {% endif %}
</section>