{% stories forms with { title: 'Atoms/Forms' } %}
  {% story textfieldContainers with {
    name: 'Textfield containers',
  } %}
    {% set fields = [{
      form_element: {
        description: {
          attributes: create_attribute(),
          content: 'Normal textfield, has value, not required.',
        },
        name: 'Some textfield',
        type: 'textfield',
      },
      input: {
        attributes: create_attribute({
          class: 'form-text',
          maxlength: 128,
          name: 'some_textfield',
          placeholder: 'placeholder',
          size: 60,
          type: 'text',
          value: 'A value',
        }),
        title: 'Some value',
      },
      label: {
        title: 'Some textfield',
      },
    }, {
      form_element: {
        name: 'Email address',
        type: 'email',
      },
      input: {
        attributes: create_attribute({
          class: 'form-email',
          maxlength: 128,
          name: 'email',
          placeholder: 'placeholder',
          required: true,
          size: 60,
          type: 'email',
        }),
        title: 'Some value',
      },
      label: {
        required: true,
        title: 'Email address',
      },
    }] %}

    {% set container_content %}
      {% for field in fields %}
        {% set form_element = field.form_element %}
        {% set id = form_element.name|clean_class %}
        {% set label %}
          {% include "@rocketship-theme-starter-atoms/05-forms/form-label/form-element-label.html.twig" with {
            attributes: create_attribute({ 'for': id }),
            required: field.label.required,
            title: field.label.title,
          } %}
        {% endset %}
        {% embed "@rocketship-theme-starter-atoms/05-forms/form-element/form-element.html.twig" with {
          disabled: form_element.disabled,
          errors: form_element.errors,
          description: form_element.description,
          description_display: form_element.description_display,
          label,
          label_display: form_element.label_display,
          name: form_element.name,
          prefix: form_element.prefix,
          suffix: form_element.suffix,
          title_display: form_element.title_display,
          type: form_element.type,
        } %}
          {% block form_element_content %}
            {% set input = field.input %}
            {% include "@rocketship-theme-starter-atoms/05-forms/input/input.html.twig" with {
              attributes: input.attributes.setAttribute('id', id),
            } %}
          {% endblock form_element_content %}
        {% endembed %}
      {% endfor %}
    {% endset %}

    {% include "@rocketship-theme-starter-atoms/05-forms/fieldset/fieldset.html.twig" with {
      attributes: create_attribute(),
      children: container_content,
      errors: 'This is a fieldgroup error message',
      legend: {
        title: 'Web and Email Address (fieldset example)',
      },
    } %}

    {% include "@rocketship-theme-starter-atoms/details/details.html.twig" with {
      children: container_content,
      error: 'This is a Details error message',
      title: 'Web and Email Address (details example)',
    } %}
  {% endstory %}
{% endstories %}
