{% stories forms with { title: 'Atoms/Forms' } %}
  {% story textfields with {
    name: 'Textfields',
  } %}
    {% set file_description %}
      One file only
      <br>
      64 MB limit
      <br>
      Allowed types: gif, jpg, jpeg, png, bmp, eps, tif, pict, psd, txt, rtf, html, odf, pdf, doc, docx, ppt, pptx, xls, xlsx, xml, avi, mov, mp3, mp4, ogg, wav, bz2, dmg, gz, jar, rar, sit, svg, tar, zip.
    {% endset %}
    {% 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: {
        description: {
          attributes: create_attribute(),
          content: 'Normal textfield, has value, is required.',
        },
        name: 'A required field',
        type: 'textfield',
      },
      input: {
        attributes: create_attribute({
          class: 'form-text',
          maxlength: 128,
          name: 'another_textfield',
          placeholder: 'placeholder',
          required: true,
          size: 60,
          type: 'text',
          value: 'A value',
        }),
        title: 'Some value',
      },
      label: {
        required: true,
        title: 'Another textfield',
      },
    }, {
      form_element: {
        description: {
          attributes: create_attribute(),
          content: 'Normal textfield, no value, not required.',
        },
        name: 'Yet another textfield',
        type: 'textfield',
      },
      input: {
        attributes: create_attribute({
          class: 'form-text',
          maxlength: 128,
          name: 'some_textfield',
          placeholder: 'placeholder',
          size: 60,
          type: 'text',
        }),
        title: 'Some value',
      },
      label: {
        title: 'Yet another textfield',
      },
    }, {
      form_element: {
        description: {
          attributes: create_attribute(),
          content: 'Normal textfield, no value, is required.',
        },
        name: 'Fourth textfield',
        type: 'textfield',
      },
      input: {
        attributes: create_attribute({
          class: 'form-text',
          maxlength: 128,
          name: 'another_textfield',
          placeholder: 'placeholder',
          required: true,
          size: 60,
          type: 'text',
        }),
        title: 'Some value',
      },
      label: {
        required: true,
        title: 'Fourth textfield',
      },
    }, {
      form_element: {
        description: {
          attributes: create_attribute(),
          content: 'Normal textfield, with a prefix.',
        },
        name: ' This is a text with a prefix',
        prefix: '€',
        type: 'textfield',
      },
      input: {
        attributes: create_attribute({
          class: 'form-text',
          maxlength: 128,
          name: 'another_textfield',
          placeholder: 'placeholder',
          required: true,
          size: 60,
          type: 'text',
        }),
        title: 'Some value',
      },
      label: {
        required: true,
        title: 'This is a text with a prefix',
      },
    }, {
      form_element: {
        description: {
          attributes: create_attribute(),
          content: 'Normal textfield, with a suffix.',
        },
        name: 'This is a text with a suffix',
        suffix: 'Lorum ipsum',
        type: 'textfield',
      },
      input: {
        attributes: create_attribute({
          maxlength: 128,
          name: 'another_textfield',
          placeholder: 'placeholder',
          required: true,
          size: 60,
          type: 'text',
        }),
        title: 'Some value',
      },
      label: {
        required: true,
        title: 'This is a text with a suffix',
      },
    }, {
      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',
      },
    }, {
      form_element: {
        name: 'Date',
        type: 'date',
      },
      input: {
        attributes: create_attribute({
          class: 'form-text',
          maxlength: 128,
          name: 'date',
          placeholder: 'placeholder',
          required: true,
          size: 60,
          type: 'date',
        }),
        title: 'Some value',
      },
      label: {

        required: true,
        title: 'Date',
      },
    }, {
      form_element: {
        name: 'number',
        type: 'number',
      },
      input: {
        attributes: create_attribute({
          maxlength: 128,
          name: 'number',
          placeholder: 'placeholder',
          required: true,
          size: 60,
          type: 'number',
        }),
        title: 'Some value',
      },
      label: {
        required: true,
        title: 'Number',
      },
    }, {
      form_element: {
        name: 'phone',
        type: 'Phone',
      },
      input: {
        attributes: create_attribute({
          maxlength: 128,
          name: 'Phone',
          placeholder: 'placeholder',
          required: true,
          size: 60,
          type: 'phone',
        }),
        title: 'Some value',
      },
      label: {
        required: true,
        title: 'Phone',
      },
     }, {
      form_element: {
        name: 'upload-file',
        type: 'file',
      },
      input: {
        attributes: create_attribute({
          maxlength: 128,
          name: 'File upload',
          type: 'file',
        }),
        title: 'Some value',
      },
      label: {
        title: 'File upload',
      },
     }, {
      form_element: {
        description: {
          attributes: create_attribute(),
          content: file_description,
        },
        name: 'upload-file',
        type: 'managed_file',
      },
      input: {
        attributes: create_attribute({
          maxlength: 128,
          name: 'File upload',
          type: 'file',
        }),
        title: 'Some value',
      },
      label: {
        title: 'File upload',
      },
    }, {
      form_element: {
        description: {
          attributes: create_attribute(),
          content: file_description,
        },
        name: 'upload-file-ajax',
        type: 'managed_file_ajax',
      },
      input: {
        attributes: create_attribute({
          maxlength: 128,
          name: 'File upload',
          type: 'file',
        }),
        title: 'Some value',
      },
      label: {
        title: 'File upload',
      },
    }, {
       form_element: {
        name: 'uploaded-file',
        type: 'uploaded_file',
      },
      input: {
        attributes: create_attribute({
          maxlength: 128,
          name: 'File upload',
          type: 'file',
        }),
        title: 'Some value',
      },
      label: {
        title: 'File upload',
      },
    }, {
      form_element: {
        name: 'textarea',
        type: 'textarea',
      },
      input: {
        attributes: create_attribute({
          name: 'a message',
          type: 'textarea',
        }),
        title: 'a message',
      },
      label: {
        title: 'A message',
      },
    }] %}

    {% 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 %}
          {% if form_element.type == 'file' %}
            {% include "@rocketship-theme-starter-atoms/05-forms/upload/input--file.html.twig" with {
              attributes: input.attributes.setAttribute('id', id),
            } %}
          {% elseif form_element.type == 'managed_file' or form_element.type == 'managed_file_ajax' %}
            {% set element %}
              {% include "@rocketship-theme-starter-atoms/05-forms/upload/input--file.html.twig" with {
                attributes: input.attributes.setAttribute('id', id),
              } %}
              {% include "@rocketship-theme-starter-atoms/06-buttons/_button--master.twig" with {
                button_content: 'upload',
              } %}
              {% if form_element.type == 'managed_file_ajax' %}
                <div class="ajax-progress ajax-progress-throbber"><div class="throbber"></div></div>
              {% endif %}
            {% endset %}

            {% include "@rocketship-theme-starter-atoms/05-forms/upload/file-managed-file.html.twig" with {
              attributes: create_attribute(),
              element,
            } %}
          {% elseif form_element.type == 'uploaded_file' %}
            <div class="image-widget js-form-managed-file form-managed-file clearfix">
              {% embed "@rocketship-theme-starter-atoms/01-links/file/file-link.html.twig" with {
                attributes: create_attribute({ 'class': ['file--image'] }),
              } %}
                {% block content %}
                  <a href="#" {{ create_attribute({'class': ['link']}) }}>my-filename.jpg</a>
                {% endblock content %}
              {% endembed %}
              {% include "@rocketship-theme-starter-atoms/06-buttons/_button--master.twig" with {
                button_content: 'remove',
              } %}
            </div>
          {% elseif form_element.type == 'textarea' %}
            {% include "@rocketship-theme-starter-atoms/05-forms/textarea/textarea.html.twig" with {
              attributes: input.attributes.setAttribute('id', id),
            } %}

          {% else %}
            {% include "@rocketship-theme-starter-atoms/05-forms/input/input.html.twig" with {
              attributes: input.attributes.setAttribute('id', id),
            } %}
          {% endif %}
        {% endblock form_element_content %}
      {% endembed %}
    {% endfor %}
  {% endstory %}
{% endstories %}
