{% extends 'templates/layouts/page.njk' %}

{% set pageConfig = {
  useStyleguide: true,
  useSidebarBefore: false
} %}

{% set pageProps = {
  heading: {
    breadcrumbs: [
      { text: 'Home page' },
      { text: 'Form' }
    ],
    title: 'Form'
  }
} %}

{% block content %}
  {% from 'styleguide/sg-section/sg-section.njk' import SGSection %}

  {% call SGSection({
    className: 'sg-section--reset-grid sg-section--non-padding-sides',
    title: 'Default form controls',
    titleTag: 'h2',
    grid: false
  }) %}
    {% call FormBuilder.Form({
      className: 'form--sg'
    }) %}
      {% call FormBuilder.FormGroup({
        title: 'Text field',
        id: 'text-field',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Text field'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Default readonly field',
              value: 'Readonly value',
              attrs: {
                readonly: 'true'
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Default readonly field - disabled',
              attrs: {
                disabled: 'disabled'
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Textarea field',
        id: 'textarea-field',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Textarea field',
              type: 'textarea',
              rows: '4'
            }) }}
          {% endcall %}

          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Textarea readonly field',
              type: 'textarea',
              value: 'Textarea value',
              rows: '4',
              attrs: {
                readonly: true
              }
            }) }}
          {% endcall %}

          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Textarea disabled field',
              type: 'textarea',
              rows: '4',
              attrs: {
                disabled: true
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Password field',
        id: 'password-field',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Password field',
              type: 'password'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Password field',
              value: 'password1',
              type: 'password'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Password field - desabled',
              type: 'password',
              attrs: {
                disabled: 'disabled'
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Email field',
        id: 'email-field',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Email field',
              type: 'mail'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Email readonly field',
              value: 'Email@Mail.com',
              type: 'mail',
              pattern: 'email'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Email disabled field ',
              type: 'mail',
              attrs: {
                disabled: 'disabled'
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Phone field',
        id: 'phone-field',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Phone field',
              type: 'tel',
              pattern: 'phoneWithoutNumberMask',
              attrs: {
                required: true,
                minLength: 3,
                maxLength: 20
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Phone readonly field',
              value:'+380755674333',
              type: 'tel',
              pattern: 'phoneWithoutNumberMask',
              attrs: {
                required: true,
                minLength: 3,
                maxLength: 20
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Phone disabled field',
              type: 'tel',
              pattern: 'phoneWithoutNumberMask',
              attrs: {
                disabled: 'disabled',
                required: true,
                minLength: 3,
                maxLength: 20
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Number field',
        id: 'number-field',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Number field',
              type: 'number'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Number field',
              type: 'number',
              value: 4
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Number field - disabled',
              type: 'number',
              attrs: {
                disabled: 'disabled'
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Number min and max',
              type: 'number',
              attrs: {
                min: 1,
                max: 25
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Number min and max',
              type: 'number',
              value: 4,
              attrs: {
                min: 1,
                max: 25
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Number min and max - disabled',
              type: 'number',
              attrs: {
                disabled: 'disabled'
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Search',
        id: 'search',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4}) %}
            {{ FormBuilder.FormControl({
              type: 'search',
              label: 'Search'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4}) %}
            {{ FormBuilder.FormControl({
              type: 'search',
              value: 'Text ',
              label: 'Search',
              attrs: {
                required: true
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4}) %}
            {{ FormBuilder.FormControl({
              type: 'search',
              label: 'Search - disabled',
              attrs: {
                disabled: 'disabled'
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Date field',
        id: 'date-field',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Date field',
              type: 'date',
              attrs: {
                min: '1980-01-001',
                max: '2999-12-31'
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Date field',
              value: '2023-01-12',
              type: 'date',
              attrs: {
                min: '1980-01-01',
                max: '2999-12-31'
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Date field - disabled',
              type: 'date',
              attrs: {
                disabled: 'disabled'
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Time field',
        id: 'time-field',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Time field',
              type: 'time'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Time field',
              value: '11:15',
              type: 'time'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Time field - disabled',
              type: 'time',
              attrs: {
                disabled: 'disabled'
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Select field',
        id: 'select-field',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Select field',
              type: 'select'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Select field',
              type: 'select',
              value: 'tiger',
              options: [
                { text: 'Option 1', value: 'Option-1' },
                { text: 'Option 2', value: 'Option-2' },
                { text: 'Option 3', value: 'Option-3' }
              ]
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Select field - disabled',
              type: 'select',
              attrs: {
                disabled: true
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Url field',
        id: 'url-field',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Url field with prepend slot',
              type: 'url',
              prependElement: 'https://'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Url field with prepend slot',
              value: 'company.com',
              type: 'url',
              prependElement: 'https://'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Url field with prepend slot - disabled',
              type: 'url',
              prependElement: 'https://',
              attrs: {
                disabled: true
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Url field with append slot',
              type: 'url',
              appendElement: '.com'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Url field with append slot',
              value: 'https://company',
              type: 'url',
              appendElement: '.com'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Url field with append slot - disabled',
              type: 'url',
              appendElement: '.com',
              attrs: {
                disabled: true
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Url prepend and append slot',
              type: 'url',
              prependElement: 'https://',
              appendElement: '.com'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Url prepend and append slot',
              value: 'company',
              type: 'url',
              prependElement: 'https://',
              appendElement: '.com'
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Url prepend and append slot - disabled',
              type: 'url',
              prependElement: 'https://',
              appendElement: '.com',
              attrs: {
                disabled: true
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Checkbox',
        id: 'checkbox',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 12 }) %}
            {% call FormBuilder.FormFieldGroup() %}
              {{ FormBuilder.FormCheckbox({
                label: 'Disabled checkbox',
                attrs: {
                  disabled: true
                }
              }) }}

              {{ FormBuilder.FormCheckbox({
                label: 'Default checkbox'
              }) }}

              {{ FormBuilder.FormCheckbox({
                controlClassName: 'js-indeterminate',
                label: 'Indeterminate state'
              }) }}

              {{ FormBuilder.FormCheckbox({
                controlClassName: 'js-indeterminate',
                label: 'Disabled and indeterminate state',
                attrs: {
                  disabled: true
                }
              }) }}

              {{ FormBuilder.FormCheckbox({
                label: 'Checked state',
                attrs: {
                  checked: true
                }
              }) }}

              {{ FormBuilder.FormCheckbox({
                label: 'Disabled and checked state',
                attrs: {
                  checked: true,
                  disabled: true
                }
              }) }}
            {% endcall %}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Radio',
        id: 'radio',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 12 }) %}
            {% call FormBuilder.FormFieldGroup() %}
              {{ FormBuilder.FormRadio({
                name: 'radio_group_1',
                label: 'Default radio',
                value: 1
              }) }}

              {{ FormBuilder.FormRadio({
                name: 'radio_group_1',
                label: 'Disabled radio',
                value: 2,
                attrs: {
                  disabled: true
                }
              }) }}

              {{ FormBuilder.FormRadio({
                name: 'radio_group_1',
                label: 'Checked radio',
                value: 3,
                attrs: {
                  checked: true
                }
              }) }}

              {{ FormBuilder.FormRadio({
                name: 'radio_group_2',
                label: 'Disabled and checked radio',
                value: 4,
                attrs: {
                  checked: true,
                  disabled: true
                }
              }) }}
            {% endcall %}
          {% endcall %}

          {% call GridBuilder.GridColumn({ xl: 12 }) %}
            {% call FormBuilder.FormFieldGroup() %}
              {% call FormBuilder.FormRadio({
                label: 'Radio subgroup 1',
                name: 'radio_with_subgroup_1',
                attrs: {
                  checked: true
                }
              }) %}
                {% call FormBuilder.FormFieldGroup({
                  className: 'form__field-group--subgroup'
                }) %}
                  {{ FormBuilder.FormRadio({
                    name: 'radio_subgroup_1',
                    label: 'Default radio',
                    value: 1,
                    attrs: {
                      checked: true
                    }
                  }) }}

                  {{ FormBuilder.FormRadio({
                    name: 'radio_subgroup_1',
                    label: 'Default radio',
                    value: 2
                  }) }}
                {% endcall %}
              {% endcall %}

              {% call FormBuilder.FormRadio({
                label: 'Radio subgroup 2',
                name: 'radio_with_subgroup_1'
              }) %}
                {% call FormBuilder.FormFieldGroup({
                  className: 'form__field-group--subgroup'
                }) %}
                  {{ FormBuilder.FormRadio({
                    name: 'radio_subgroup_2',
                    label: 'Default radio',
                    value: 1
                  }) }}

                  {{ FormBuilder.FormRadio({
                    name: 'radio_subgroup_2',
                    label: 'Default radio',
                    value: 2
                  }) }}
                {% endcall %}
              {% endcall %}
            {% endcall %}
          {% endcall %}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormGroup({
        title: 'Fields group',
        id: 'fields-group' ,
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid({}) %}
          {% call GridBuilder.GridColumn({ xl: 12 }) %}
            {% call FormBuilder.FormFieldGroup() %}
              {{ FormBuilder.FormControl({
                label: 'Fields group'
              }) }}
              {{ FormBuilder.FormCheckbox() }}
              {% call FormBuilder.FormActions() %}
                {{ Button({
                  className: 'button--error-outline button--lg',
                  text: 'Reset',
                  type: 'reset'
                }) }}
                {{ Button({
                  className: 'button--primary button--lg',
                  text: 'Submit',
                  type: 'submit'
                }) }}
              {% endcall %}
            {% endcall %}
          {% endcall %}
        {% endcall %}
      {% endcall %}
    {% endcall %}
  {% endcall %}

  {% call SGSection({
    className: 'sg-section--reset-grid sg-section--non-padding-sides',
    title: 'Advanced form controls',
    titleTag: 'h2',
    grid: false
  }) %}
    {% call FormBuilder.Form({
      className: 'form--sg'
    }) %}
      {% call FormBuilder.FormGroup({
        title: 'File upload',
        id: 'file-upload',
        legendClassName: ''
      }) %}
        {% call GridBuilder.Grid() %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Default file field',
              type: 'file',
              attrs: {
                accept: '.jpeg, .png, .jpg, .jpe'
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Default file field - filled',
              value: 'Picture.png',
              type: 'file',
              attrs: {
                accept: '.jpeg, .png, .jpg, .jpe'
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 4 }) %}
            {{ FormBuilder.FormControl({
              label: 'Disabled file field',
              type: 'file',
              attrs: {
                disabled: true
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 6 }) %}
            {{ FormBuilder.FormControl({
              type: 'custom_file',
              label: 'Single file upload',
              attrs: {
                accept: '.jpeg, .png, .jpg, .jpe'
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 6 }) %}
            {{ FormBuilder.FormControl({
              type: 'custom_file',
              label: 'Single file upload - Disabled',
              classNameCustomFile: 'form-file-field--disabled',
              attrs: {
                disabled: true
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 6 }) %}
            {{ FormBuilder.FormControl({
              type: 'custom_file',
              label: 'Multiple files upload',
              attrs: {
                multiple: true,
                accept: '.jpeg, .png, .jpg, .jpe'
              }
            }) }}
          {% endcall %}
          {% call GridBuilder.GridColumn({ xl: 6 }) %}
            {{ FormBuilder.FormControl({
              type: 'custom_file',
              label: 'Multiple file upload - Disabled',
              attrs: {
                disabled: true
              }
            }) }}
          {% endcall %}
        {% endcall %}
      {% endcall %}

      {% call FormBuilder.FormActions() %}
        {{ Button({
          className: 'button--lg',
          text: 'Prev',
          type: 'submit',
          attrs: {
            name: '__currentPage',
            value: '0'
          }
        }) }}
        {{ Button({
          className: 'button--primary button--lg',
          text: 'Next',
          type: 'submit',
          attrs: {
            name: '__currentPage',
            value: '1'
          }
        }) }}
      {% endcall %}
    {% endcall %}
  {% endcall %}

  {% call SGSection({
    className: 'sg-section--reset-grid sg-section--non-padding-sides sg-section--non-padding',
    title: 'Example personal data form',
    titleTag: 'h2',
    id: 'example-form',
    grid: false
  }) %}
    {% call FormBuilder.Form({
      className: 'form--sg'
    }) %}
      {% call GridBuilder.Grid() %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'First name *',
            placeholder: 'Alex',
            attrs: {
              required: true
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'First name - filled *',
            value: 'Valentin',
            placeholder: 'Alex',
            attrs: {
              required: true
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'Last name *',
            placeholder: 'Khoman',
            attrs: {
              required: true
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'Last name - filled *',
            value: 'Mikhailov',
            placeholder: 'Khoman',
            attrs: {
              required: true
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'Upload new avatar',
            type: 'file',
            attrs: {
              accept: '.jpeg, .png, .jpg, .jpe'
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'Upload new avatar - filled',
            value: 'images.png',
            type: 'file',
            attrs: {
              accept: '.jpeg, .png, .jpg, .jpe'
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            type: 'mail',
            label: 'Add email address *',
            placeholder: 'example@mail.com',
            attrs: {
              required: true
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            type: 'mail',
            label: 'Add email address - filled *',
            placeholder: 'example@mail.com',
            value: 'valentin@mail.com',
            pattern: 'email',
            attrs: {
              required: true
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'Password *',
            placeholder: 'Create password',
            type: 'password',
            name: 'password',
            id: 'password',
            attrs: {
              required: true,
              minlength: 8,
              maxlength: 128
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'Password - filled *',
            placeholder: 'Create password',
            type: 'password',
            value: 'password2222',
            name: 'password',
            id: 'password1',
            attrs: {
              required: true,
              minlength: 8,
              maxlength: 128
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'Confirm password *',
            placeholder: 'Confirm password',
            type: 'password',
            name: 'password-confirmation',
            attrs: {
              required: true,
              minlength: 8,
              maxlength: 128,
              'data-equal-to': 'password'
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'Confirm password - filled *',
            placeholder: 'Confirm password',
            value: 'password2222',
            type: 'password',
            name: 'password-confirmation',
            attrs: {
              required: true,
              minlength: 8,
              maxlength: 128,
              'data-equal-to': 'password1'
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'Age',
            type: 'number'
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'Age - filled',
            value: '23',
            type: 'number'
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            label: 'About myself',
            type: 'textarea',
            rows: '4',
            attrs: {
              minLength: 3,
              maxlength: 500
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ xl: 6 }) %}
          {{ FormBuilder.FormControl({
            value: 'Description about myself',
            label: 'About myself - filled',
            type: 'textarea',
            rows: '4',
            attrs: {
              minLength: 3,
              maxlength: 500
            }
          }) }}
        {% endcall %}
      {% endcall %}
      {% call FormBuilder.FormActions() %}
        {{ Button({
          className: 'button--lg',
          text: 'Prev',
          type: 'submit',
          attrs: {
            name: '__currentPage',
            value: '0'
          }
        }) }}
        {{ Button({
          className: 'button--primary button--lg',
          text: 'Next',
          type: 'submit',
          attrs: {
            name: '__currentPage',
            value: '1'
          }
        }) }}
      {% endcall %}
    {% endcall %}
  {% endcall %}

  {# for test start #}
  <script>
    const indeterminateCheckboxArr = [...document.querySelectorAll('.js-indeterminate')];
    indeterminateCheckboxArr.forEach((checkbox) => {
      checkbox.indeterminate = true;
    });
  </script>
  {# for test end #}
{% endblock %}