{% stories form_element with { title: 'Components/Form Element' } %}

{% story default with {
    name: '1. Form Element with Text Input',
    args: { 
      type: 'textfield',
      name: 'username',
      title_display: 'before',
      description_display: 'after',
      disabled: false,
      errors: false,
      label: 'Username',
      children: '<input type="text" name="username" placeholder="Enter your username" class="bg-white border-2 border-gray-300 text-gray-900 text-base focus:ring-2 focus:ring-primary focus:border-primary block w-full px-4 py-3 transition-all placeholder:text-gray-400 hover:border-gray-400" />
'
    }
  } %}
{% embed 'components:form-element' with { 
  type: type,
  name: name,
  title_display: title_display,
  description_display: description_display,
  disabled: disabled,
  errors: errors
} %}
  {% block label %}
    {{ label }}
  {% endblock %}
  {% block children %}
    {{ children }}
  {% endblock %}
{% endembed %}
{% endstory %}

{% story with_description with {
    name: '2. Form Element with Description',
    args: { 
      type: 'email',
      name: 'email',
      title_display: 'before',
      description_display: 'after',
      disabled: false,
      errors: false,
      label: 'Email Address',
      children: '<input type="email" name="email" placeholder="your.email@example.com" class="bg-white border-2 border-gray-300 text-gray-900 text-base focus:ring-2 focus:ring-primary focus:border-primary block w-full px-4 py-3 transition-all placeholder:text-gray-400 hover:border-gray-400" />
'
    }
  } %}
{% embed 'components:form-element' with { 
  type: type,
  name: name,
  title_display: title_display,
  description_display: description_display,
  disabled: disabled,
  errors: errors
} %}
  {% block label %}
    {{ label }}
  {% endblock %}
  {% block children %}
    {{ children }}
  {% endblock %}
{% endembed %}
{% endstory %}

{% story with_error with {
    name: '3. Form Element with Error',
    args: { 
      type: 'password',
      name: 'password',
      title_display: 'before',
      description_display: 'after',
      disabled: false,
      errors: true,
      label: 'Password',
      children: '<input type="password" name="password" class="bg-white border-2 border-error text-gray-900 text-base focus:ring-2 focus:ring-error focus:border-error block w-full px-4 py-3 transition-all" />
'
    }
  } %}
{% embed 'components:form-element' with { 
  type: type,
  name: name,
  title_display: title_display,
  description_display: description_display,
  disabled: disabled,
  errors: errors
} %}
  {% block label %}
    {{ label }}
  {% endblock %}
  {% block children %}
    {{ children }}
  {% endblock %}
{% endembed %}
{% endstory %}

{% endstories %}
