{#
/**
 * @file
 * CivicTheme Tag component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - type: [string] Tag type (primary, secondary, tertiary).
 * - content: [string] Tag content.
 * - icon: [string] Icon name.
 * - icon_placement: [string] Icon position (before, after).
 * - url: [string] Optional URL to convert to a link.
 * - is_new_window: [boolean] Whether to open in a new window (only if URL is provided).
 * - is_external: [boolean] Whether the link is external.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 */
#}

{% set type = type in ['primary', 'secondary', 'tertiary'] ? type : 'primary' %}
{% set type_class = 'ct-tag--%s'|format(type) %}
{% set icon_class = icon is not empty ? 'ct-tag--with-icon' : '' %}
{% set icon_placement = icon_placement in ['before', 'after'] ? icon_placement : 'after' %}
{% set icon_placement_class = icon ? 'ct-tag--icon-%s'|format(icon_placement|default('before')) : '' %}
{% set is_external = is_external ? 'ct-tag--external' : '' %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s %s %s %s %s'|format(theme_class, type_class, icon_class, icon_placement_class, is_external, modifier_class|default('')) %}

{% if content|trim is not empty %}
  {% set content_markup %}
    {% if icon %}
      {% set icon_markup %}
        {% include 'civictheme:icon' with {
          symbol: icon,
          modifier_class: 'ct-tag__icon',
        } only %}
      {% endset %}

      {% if icon_placement == 'before' %}
        {{- icon_markup -}}{{- content|raw -}}
      {% else %}
        {{- content|raw -}}{{- icon_markup -}}
      {% endif %}

    {% else %}
      {{- content|raw -}}
    {% endif %}
  {% endset %}

  {% if is_new_window %}
    {% set is_new_window_content %}
      <span class="ct-visually-hidden">(Opens in a new tab/window)</span>
    {% endset %}
  {% endif %}

  {% if is_external %}
    {% set is_external_content %}
      {% include 'civictheme:icon' with {
        symbol: 'upper-right-arrow',
      } only %}
    {% endset %}
  {% endif %}

  {% set tag = url is not empty ? 'a' : 'span' %}
  <{{ tag }}
  class="ct-tag {{ modifier_class -}}"
  {% if url is not empty %}href="{{ url }}"{% endif %}
  {% if url is not empty %}title="{{- content -}}"{% endif %}
  {% if url is not empty and is_new_window %}target="_blank" aria-label="Opens in a new tab"{% endif %}
  {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
  >
  {{- content_markup -}}{{- is_new_window_content -}}{{- is_external_content -}}
  </{{ tag }}>
{% endif %}
