{#
/**
 * @file
 * CivicTheme Button component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - kind: [string] Button kind (submit, reset, button, link).
 * - type: [string] Button type (primary, secondary, tertiary).
 * - size: [string] Button size (large, regular, small).
 * - icon: [string] Icon name.
 * - icon_placement: [string] Icon position (before or after).
 * - icon_group_disabled: [boolean] Disable icon and last word grouping.
 * - icon_single_only: [boolean] Only show 1 icon (if both icon and is_external are present, external takes preference).
 * - text: [string] Button text.
 * - url: [string] URL for the link button.
 * - allow_html: [boolean] Allow HTML in text.
 * - is_new_window: [boolean] Open in a new window.
 * - is_external: [boolean] Indicates if the link is external.
 * - is_disabled: [boolean] Indicates if the button is disabled.
 * - is_dismissable: [boolean] Indicates if the button can be dismissed.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 */
#}

{% set kind = kind in ['button', 'link', 'reset', 'submit'] ? kind : 'button' %}
{% set type = type in ['primary', 'secondary', 'tertiary'] ? type : null %}
{% set size = size in ['large', 'regular', 'small'] ? size : 'regular' %}
{% set icon_placement = icon_placement in ['before', 'after'] ? icon_placement : 'after' %}
{% set type_class = type ? 'ct-button--%s'|format(type) : '' %}
{% set kind_class = kind ? 'ct-button--%s'|format(kind) : '' %}
{% set size_class = 'ct-button--%s'|format(size) %}
{% set dismiss_class = is_dismissable ? 'ct-button--dismiss' : '' %}
{% set is_external = is_external ? 'ct-button--external' : '' %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s %s %s %s %s %s'|format(theme_class, type_class, kind_class, size_class, dismiss_class, is_external, modifier_class|default('')) %}

{% set button_content %}
  {%- if allow_html -%}
    {% set icon_markup %}
      {%- include 'civictheme:icon' with {
        symbol: icon,
        modifier_class: 'ct-button__icon',
      } only -%}
    {% endset %}
    {% if icon_placement == 'before' %}
      {{- icon_markup -}}{{ text }}
    {% else %}
      {{ text }}{{- icon_markup -}}
    {% endif %}
  {%- else -%}
    {%- include 'civictheme:text-icon' with {
      text: text,
      is_new_window: is_new_window,
      is_external: is_external,
      icon: icon,
      icon_placement: icon_placement,
      icon_group_disabled: icon_group_disabled is defined ? icon_group_disabled : false,
      icon_single_only: icon_single_only is defined ? icon_single_only : false,
      icon_class: 'ct-button__icon',
    } only -%}
  {%- endif -%}
{% endset %}

{% if kind == 'button' %}
  <button
    class="ct-button {{ modifier_class -}}"
    data-component-name="button"
    {% if is_disabled %}disabled="disabled" aria-disabled="true"{% endif %}
    {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
  >
    {{- button_content -}}
  </button>
{% elseif kind == 'link' %}
  <a
    class="ct-button {{ modifier_class -}}"
    role="button"
    data-component-name="button"
    {% if url %}href="{{ url }}"{% endif %}
    {% if is_disabled %}disabled="disabled" aria-disabled="true"{% endif %}
    {% if is_new_window %}target="_blank"{% endif %}
    {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
  >
    {{- button_content -}}
  </a>
{% elseif kind in ['reset', 'submit'] %}
  <input
    type="{{ kind }}"
    class="ct-button {{ modifier_class -}}"
    data-component-name="button"
    value="{{- text -}}"
    {% if is_disabled %}disabled="disabled" aria-disabled="true"{% endif %}
    {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
  />
{% endif %}
