{#
/**
 * Topic List
 *
 * A topic list is a media box with some basic info and a list of links.
 *
 * @var string $heading The main heading.
 * @var string $subheading An optional subheading, displayed unironically _above_ the heading.
 * @var string $description A short bit of text.
 * @var string $link_url The main link for the component.
 * @var string $link_text The main link text for the component.
 * @var array $items An array of link items. These must contain both `url` and `content` keys.
 * @var string $media Optional media (img, video, or any other CSS replaced element).
 * @var Drupal\Core\Template\Attribute $attributes Attributes (class, data, etc.) for the entire component.
 *
 * @see https://www.figma.com/file/uFwXUY837P752PL8MndgBN/ILR-Design-System?node-id=868%3A6877 Image + Articles (which this is based on) in Figma
 * @see https://www.figma.com/file/7bmAlNTcZzMQa1zB1d5QLZ/ILR-Pillar-Pages?node-id=1945%3A38902 Dave Yantorno's variation
 */
#}
{% set attributes = union_attributes(attributes|default([])) %}
{% set attributes = attributes.addClass(['cu-topic-list']) %}

<div{{ attributes }}>
  <div class="cu-topic-list__content">
    {% include '@union/_composite-heading.twig' with {
      icon_data: icon_data,
      eyebrow_heading: subheading,
      heading: heading,
      body: description,
      link: link_url ? {
        url: link_url,
        text: link_text
      },
      attributes: {
        class: [
          'cu-composite-heading--left',
        ]
      }
    } only %}
    <ul class="cu-topic-list__items">
    {% for item in items %}
      <li class="cu-topic-list__item">
        {% if item.url %}
        <a class="cu-topic-list__item-link" href="{{ item.url }}">{{ item.content }}</a>
        {% else %}
        {{ item.content }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  </div>
  {% if media %}
  <div class="cu-topic-list__media">
    {{ media }}
  </div>
  {% endif %}
</div>