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

<!-- Cotton Input Component -->
<c-vars
  type="type|default:'text'"
  placeholder="placeholder|default:''"
  name="name|default:''"
  value="value|default:''"
  id="id|default:''"
  input_classes="input_classes|default:''"
  disabled="disabled|default:''"
  required="required|default:''"
  readonly="readonly|default:''"
  x_model="x_model"
  x_data="x_data"
  x_on="x_on"
  hx_get="hx_get|default:''"
  hx_post="hx_post|default:''"
  hx_target="hx_target|default:''"
  hx_swap="hx_swap|default:''"
  attrs="attrs|default:''"
/>

<input 
  type="{{ type }}"
  {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
  {% if name %}name="{{ name }}"{% endif %}
  {% if value %}value="{{ value }}"{% endif %}
  {% if id %}id="{{ id }}"{% endif %}
  class="
    flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 
    ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 
    placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 
    focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed 
    disabled:opacity-50 {{ input_classes }}
  "
  {% if disabled %}disabled{% endif %}
  {% if required %}required{% endif %}
  {% if readonly %}readonly{% endif %}
  {% if x_model %}x-model="{{ x_model }}"{% endif %}
  {% if x_data and x_data != 'x_data' %}x-data="{{ x_data }}"{% endif %}
  {% if x_on %}{{ x_on }}{% 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 %}
  {{ attrs }}
/>