{% comment %}
Component: Button (c-button)
Props:
  label: Button text / accessible label
  variant: primary | secondary | ghost | danger | link (default: primary)
  size: sm | md | lg (default: md)
  icon: icon name (optional)
  icon_position: start | end (default: start)
  href: url if rendering as link
  type: button | submit | reset (default: button)
  loading: boolean (default: false)
  disabled: boolean (default: false)
  attrs: extra HTML attributes dict
  classes: extra CSS classes string
{% endcomment %}
{% if href %}
<a href="{{ href }}"
   class="c-button c-button--{{ variant|default:'primary' }} c-button--{{ size|default:'md' }}{% if classes %} {{ classes }}{% endif %} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2"
   {% if disabled %}aria-disabled="true" tabindex="-1"{% endif %}
   {% if not label and icon %}aria-label="{{ icon }}"{% elif label %}aria-label="{{ label }}"{% endif %}
   {% for k, v in attrs.items %} {{ k }}="{{ v }}"{% endfor %}>
    {% if icon and icon_position != "end" %}<span class="inline-flex items-center" aria-hidden="true">{% include "components/_icon_render.html" with name=icon %}</span>{% endif %}
    {% if label %}<span>{{ label }}</span>{% endif %}
    {% if icon and icon_position == "end" %}<span class="inline-flex items-center" aria-hidden="true">{% include "components/_icon_render.html" with name=icon %}</span>{% endif %}
</a>
{% else %}
<button type="{{ type|default:'button' }}"
        class="c-button c-button--{{ variant|default:'primary' }} c-button--{{ size|default:'md' }}{% if classes %} {{ classes }}{% endif %} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2"
        {% if disabled %}disabled aria-disabled="true"{% endif %}
        {% if loading %}aria-busy="true"{% endif %}
        {% if not label and icon %}aria-label="{{ icon }}"{% elif label %}aria-label="{{ label }}"{% endif %}
        {% for k, v in attrs.items %} {{ k }}="{{ v }}"{% endfor %}>
    {% if loading %}
    <svg class="animate-spin w-4 h-4 text-current" fill="none" viewBox="0 0 24 24" aria-hidden="true">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
    </svg>
    {% endif %}
    {% if icon and icon_position != "end" and not loading %}<span class="inline-flex items-center" aria-hidden="true">{% include "components/_icon_render.html" with name=icon %}</span>{% endif %}
    {% if label %}<span>{{ label }}</span>{% endif %}
    {% if icon and icon_position == "end" %}<span class="inline-flex items-center" aria-hidden="true">{% include "components/_icon_render.html" with name=icon %}</span>{% endif %}
</button>
{% endif %}