{% comment %}
Cotton Button Component - Django Template Version of shadcn/ui Button
Converts existing button component to use Django Cotton's component system
{% endcomment %}

{% load static %}

<!-- Cotton Button Component -->
<c-vars
  variant="variant|default:'default'"
  size="size|default:'default'"
  button_classes="button_classes|default:''"
  type="type|default:'button'"
  disabled="disabled|default:''"
  onclick="onclick|default:''"
  x_data="x_data|default:''"
  x_on="x_on|default:''"
  hx_get="hx_get|default:''"
  hx_post="hx_post|default:''"
  hx_target="hx_target|default:''"
  hx_swap="hx_swap|default:''"
  icon_left="icon_left|default:''"
  icon_right="icon_right|default:''"
  text="text|default:''"
  attrs="attrs|default:''"
/>

<button 
  class="
    inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium 
    ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 
    focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
    {% if variant == 'default' %}
      bg-primary text-primary-foreground hover:bg-primary/90
    {% elif 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
    {% endif %}
    {% if size == 'default' %}
      h-10 px-4 py-2
    {% elif size == 'sm' %}
      h-9 rounded-md px-3
    {% elif size == 'lg' %}
      h-11 rounded-md px-8
    {% elif size == 'icon' %}
      h-10 w-10
    {% endif %}
    {{ button_classes }}
  "
  type="{{ type }}"
  {% if onclick %}onclick="{{ onclick }}"{% 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 x_data and x_data != 'x_data' and x_data != '' %}x-data="{{ x_data }}"{% endif %}
  {% if x_on %}{{ x_on }}{% endif %}
  {% if disabled and disabled != '' %}disabled{% endif %}
  {{ attrs }}
>
  {% if icon_left %}
    <i class="{{ icon_left }} w-4 h-4"></i>
  {% endif %}
  
  <!-- Button Text Content -->
  <c-slot name="content">
    {% if text %}
      {{ text }}
    {% endif %}
  </c-slot>
  
  {% if icon_right %}
    <i class="{{ icon_right }} w-4 h-4"></i>
  {% endif %}
</button>