{#
/**
 * @file
 * CivicTheme Tag List component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - vertical_spacing: [string] Tag list vertical spacing (none, top, bottom, both).
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 * - tags: [array] Tags:
 *   Each item contains:
 *   - text: [string] Tag text.
 *   - url: [string] Tag URL.
 *   - is_new_window: [boolean] Whether to open the tag in a new window.
 *
 * Slots:
 * - content_top: Top content area.
 * - content_bottom: Bottom content area.
 *
 * Blocks:
 * - content_top_block
 * - content_block
 * - content_bottom_block
 */
#}

{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing--%s'|format(vertical_spacing) : '' %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s %s'|format(theme_class, vertical_spacing_class, modifier_class|default('')) %}

{% if tags is not empty %}
  <div class="ct-tag-list {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>
    {% block content_top_block %}
      {% if content_top is not empty %}
        <div class="ct-tag-list__content-top">
          {{- content_top|raw -}}
        </div>
      {% endif %}
    {% endblock %}

    {% block content_block %}
      {% if tags %}
        {% set tag_items = [] %}
        {% for tag in tags %}
          {% set tag_item %}
            {% include 'civictheme:tag' with {
              theme: theme,
              content: tag,
            } only %}
          {% endset %}
          {% set tag_items = tag_items|merge([tag_item]) %}
        {% endfor %}
        {% include 'civictheme:item-list' with {
          items: tag_items,
          size: 'small',
          modifier_class: 'ct-tag-list__content',
        } only %}
      {% endif %}
    {% endblock %}

    {% block content_bottom_block %}
      {% if content_bottom is not empty %}
        <div class="ct-tag-list__content-bottom">
          {{- content_bottom|raw -}}
        </div>
      {% endif %}
    {% endblock %}
  </div>
{% endif %}
