{% comment %}
Button Component - Unified Django Template Version of shadcn/ui Button

A versatile button component that supports multiple variants, sizes, icons, and both
button/link elements. Compatible with HTMX and Alpine.js.

ACCESSIBILITY REQUIREMENT:
  Icon-only buttons (size='icon') MUST include aria_label parameter.
  This is required for screen reader users to understand the button's purpose.

  Correct usage:
    {% include 'components/ui/button.html' with size='icon' icon=close_svg aria_label='Close dialog' %}

  INCORRECT - will be inaccessible:
    {% include 'components/ui/button.html' with size='icon' icon=close_svg %}

Usage Examples:
  Basic button:
    {% include 'components/ui/button.html' with text='Click me' %}

  With variant and size:
    {% include 'components/ui/button.html' with text='Submit' variant='default' size='lg' %}

  Link button:
    {% include 'components/ui/button.html' with href='/path' text='Go' type='link' %}

  With HTMX:
    {% include 'components/ui/button.html' with text='Load' hx_get='/api/data' hx_target='#target' %}

  With Alpine.js:
    {% include 'components/ui/button.html' with text='Toggle' x_on_click='open = !open' %}

  With SVG icon (preferred):
    {% include 'components/ui/button.html' with icon=search_icon_svg text='Search' %}

  Icon-only button (REQUIRES aria_label):
    {% include 'components/ui/button.html' with icon=icon_svg size='icon' aria_label='Close' %}

Parameters:
  - variant: 'default', 'destructive', 'outline', 'secondary', 'ghost', 'link' (default: 'default')
  - size: 'default', 'sm', 'lg', 'icon' (default: 'default')
  - type: 'button', 'submit', 'reset', 'link' (default: 'button')
  - text: Button text content
  - label: Alias for text (for backwards compatibility)
  - content: Alias for text (for backwards compatibility)
  - href: URL for link buttons (required when type='link')
  - icon: SVG icon content (will be sanitized)
  - icon_left: Font Awesome class for left icon (deprecated, prefer icon)
  - icon_right: Font Awesome class for right icon (deprecated)
  - disabled: Boolean to disable the button
  - class: Additional CSS classes
  - id: Element ID
  - aria_label: Accessibility label (REQUIRED for icon-only buttons)
  - onclick: JavaScript click handler
  - hx_get, hx_post, hx_target, hx_swap, hx_trigger, hx_indicator, hx_include: HTMX attributes
  - x_data, x_on_click, x_bind, x_show: Alpine.js attributes
  - attrs: Additional HTML attributes as string

Accessibility Features:
  - Focus ring: Visible focus indicator (focus-visible:ring-2)
  - Disabled state: Proper disabled attribute and opacity change
  - ARIA label: Required for icon-only buttons for screen reader support
  - Keyboard accessible: All buttons are focusable and activatable via keyboard

Security: Icon SVGs are sanitized using the sanitize_svg filter to prevent XSS attacks.
{% endcomment %}

{% load static safe_html %}

{% with variant=variant|default:'default' size=size|default:'default' btn_type=type|default:'button' btn_text=text|default:label|default:content %}

{% if btn_type == 'link' or href %}
{# Link element styled as button #}
<a
    href="{{ href|default:'#' }}"
    {% if id %}id="{{ id }}"{% endif %}
    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
    {% if variant == 'destructive' %}bg-destructive text-destructive-foreground hover:bg-destructive/90
    {% elif variant == 'outline' %}border border-input bg-background hover:bg-accent hover:text-accent-foreground
    {% elif variant == 'secondary' %}bg-secondary text-secondary-foreground hover:bg-secondary/80
    {% elif variant == 'ghost' %}hover:bg-accent hover:text-accent-foreground
    {% elif variant == 'link' %}text-primary underline-offset-4 hover:underline
    {% else %}bg-primary text-primary-foreground hover:bg-primary/90{% endif %}
    {% if size == 'sm' %}h-9 rounded-md px-3
    {% elif size == 'lg' %}h-11 rounded-md px-8
    {% elif size == 'icon' %}h-10 w-10
    {% else %}h-10 px-4 py-2{% endif %}
    {{ class|default:'' }}"
    {% if disabled %}aria-disabled="true" tabindex="-1"{% endif %}
    {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}
    {% if x_data %}x-data="{{ x_data }}"{% endif %}
    {% if x_on_click %}@click="{{ x_on_click }}"{% endif %}
    {% if x_bind %}x-bind="{{ x_bind }}"{% endif %}
    {% if x_show %}x-show="{{ x_show }}"{% endif %}
    {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
    {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
    {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
    {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
    {% if hx_trigger %}hx-trigger="{{ hx_trigger }}"{% endif %}
    {% if hx_indicator %}hx-indicator="{{ hx_indicator }}"{% endif %}
    {{ attrs|default:'' }}>

    {% if icon %}
        <span class="w-4 h-4 flex items-center justify-center">{{ icon|sanitize_svg }}</span>
        {% if btn_text %}<span>{{ btn_text }}</span>{% endif %}
    {% elif icon_left %}
        <i class="{{ icon_left }} w-4 h-4" aria-hidden="true"></i>
        {% if btn_text %}{{ btn_text }}{% endif %}
    {% else %}
        {{ btn_text }}
    {% endif %}

    {% if icon_right %}
        <i class="{{ icon_right }} w-4 h-4" aria-hidden="true"></i>
    {% endif %}

    {% block link_content %}{% endblock %}
</a>

{% else %}
{# Button element #}
<button
    type="{{ btn_type }}"
    {% if id %}id="{{ id }}"{% endif %}
    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
    {% if variant == 'destructive' %}bg-destructive text-destructive-foreground hover:bg-destructive/90
    {% elif variant == 'outline' %}border border-input bg-background hover:bg-accent hover:text-accent-foreground
    {% elif variant == 'secondary' %}bg-secondary text-secondary-foreground hover:bg-secondary/80
    {% elif variant == 'ghost' %}hover:bg-accent hover:text-accent-foreground
    {% elif variant == 'link' %}text-primary underline-offset-4 hover:underline
    {% else %}bg-primary text-primary-foreground hover:bg-primary/90{% endif %}
    {% if size == 'sm' %}h-9 rounded-md px-3
    {% elif size == 'lg' %}h-11 rounded-md px-8
    {% elif size == 'icon' %}h-10 w-10
    {% else %}h-10 px-4 py-2{% endif %}
    {{ class|default:'' }}"
    {% if disabled %}disabled{% endif %}
    {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}
    {% if onclick %}onclick="{{ onclick }}"{% endif %}
    {% if x_data %}x-data="{{ x_data }}"{% endif %}
    {% if x_on_click %}@click="{{ x_on_click }}"{% endif %}
    {% if x_bind %}x-bind="{{ x_bind }}"{% endif %}
    {% if x_show %}x-show="{{ x_show }}"{% endif %}
    {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
    {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
    {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
    {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
    {% if hx_trigger %}hx-trigger="{{ hx_trigger }}"{% endif %}
    {% if hx_indicator %}hx-indicator="{{ hx_indicator }}"{% endif %}
    {% if hx_include %}hx-include="{{ hx_include }}"{% endif %}
    {{ attrs|default:'' }}>

    {% if icon %}
        <span class="w-4 h-4 flex items-center justify-center">{{ icon|sanitize_svg }}</span>
        {% if btn_text %}<span>{{ btn_text }}</span>{% endif %}
    {% elif icon_left %}
        <i class="{{ icon_left }} w-4 h-4" aria-hidden="true"></i>
        {% if btn_text %}{{ btn_text }}{% endif %}
    {% else %}
        {{ btn_text }}
    {% endif %}

    {% if icon_right %}
        <i class="{{ icon_right }} w-4 h-4" aria-hidden="true"></i>
    {% endif %}

    {% block button_content %}{% endblock %}
</button>
{% endif %}

{% endwith %}