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

  {% story default with {
    args: {
      required: true,
      type: "text",
      name: "first_name",
      label: "This is a label",
      label_display: "before",
      description: {"content": "This is help text."},
      description_display: "after",
      disabled: false
    }
  } %}

    {# Render label #}
    {% set label_attributes = create_attribute() %}
    {% set label %}
        {{ include('tailpine:form-element--label', {title:label, title_display:label_display, required, attributes: label_attributes}) }}
    {% endset %}

    {# Render input as children #}
    {% set input_attributes = create_attribute({'type': type, 'name': name}) %}
    {% set input %}
      {% embed 'tailpine:input' with {attributes:input_attributes} %}
      {% endembed %}
    {% endset %}

    {# Render the actual Form element #}
    {% set attributes = create_attribute() %}
    {% embed 'tailpine:form-element' with {
      attributes: attributes,
      type: type,
      name: name,
      label: label,
      label_display: label_display,
      description: description,
      description_display: description_display,
    } %}
      {% block children %}
        {{ input }}
      {% endblock %}
    
    {% endembed %}

  {% endstory %}

{% endstories %}