{#
/**
 * @file
 * CivicTheme Social Links component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - with_border: [boolean] Whether icons have borders.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 * - items: [array] Social media links:
 *   Each item contains:
 *   - icon: [string] Icon identifier.
 *   - icon_html: [string] Custom HTML for icon.
 *   - url: [string] Link URL.
 *   - title: [string] Link title attribute.
 *
 * Blocks:
 * - items_block
 */
#}

{% set with_border_class = with_border ? 'ct-social-links--with-border' : '' %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s %s'|format(theme_class, with_border_class, modifier_class|default('')) %}

{% if items is not empty %}
  <div class="ct-social-links {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>

    {% block items_block %}
      {% set items_rendered = [] %}
      {% for item in items %}
        {%- set item_rendered %}
          {% include 'civictheme:button' with {
            theme: theme,
            kind: 'link',
            type: 'tertiary',
            icon: item.icon_html is not defined or item.icon_html is empty ? item.icon : null,
            text: item.icon_html|default(null),
            url: item.url,
            is_external: false,
            is_new_window: true,
            allow_html: true,
            modifier_class: 'ct-social-links__button',
            attributes: item.title is defined and item.title is not empty ? create_attribute({title: item.title}) : '',
          } only %}
        {% endset -%}
        {% set items_rendered = items_rendered|merge([item_rendered]) %}
      {% endfor %}

      {% include 'civictheme:item-list' with {
        items: items_rendered,
        direction: 'horizontal',
        modifier_class: 'ct-social-links__list',
      } only %}
    {% endblock %}

  </div>
{% endif %}
