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

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

<section {{ attributes|raw }}>
  <div class="card-container__content">
    <div class="card-container__title">
      {% include '@components/heading/heading.twig' with {
        "heading" : heading
      } only %}
    </div>
    <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,
                "link": item.link,
                "image": item.image,
                "title": item.title,
                "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>
  </div>
</section>