{% import '_macros/setFieldForm' as _set %}
{% include 'quarks/_loadCssComponent' with {
  name: '_contactForm'
} only %}
<section {{ dataComponent }} id="{{ id }}" class="container block_contactform bg-{{ index.index0 }} {{ separation }}">
    <div class="row">
        <div class="col-12 col-lg-6 col-xl-8 p-0 block_contactform__image">
        <h2 class="block_contactform__title">{{component.blockTitle}}</h2>
        <img  loading="lazy" data-src="{{component.image.one.getUrl('imageMedium')}}" src="{{component.image.one.getUrl('imageMedium')}}" alt="{{siteUrl}} - contacto" class="lazyload img-fluid">
        </div>
        <div class="col-12 col-lg-6 col-xl-4 p-0">
            <div class="block_contactform__content w-100 p-0">
                <div class="block_contactform__form p-5">
                    {% set form = craft.freeform.form(component.formfield.handle)  ?? null %}
                    {% if form %}
                      {{
                        form.renderTag({
                          class: 'row gx-3 gx-lg-5 gy-4 block_contactform__form--content pt-4',
                          id: 'formContact',
                          formAttributes: {
                            'data-skip-html-reload': true
                          }
                        })
                      }}

                    {% if form.hasErrors %}
                      <div class="freeform-form-has-errors">
                        {{ '¡Ocurrió un error! Por favor, revise los datos ingresados e intente enviarlo de nuevo.'|t }}
                      </div>
                    {% endif %}

                        {% set groups = [
                          {
                            childrens: false,
                            field: form.get('fullName')
                          },
                           {
                            childrens: false,
                            field: form.get('email'),
                          },
                          {
                            childrens: false,
                            field: form.get('consulta')
                          },
                          {
                            childrens: false,
                            field: form.get('message')
                          }
                        ] %}
                    {% endif %}
                     {% for item in groups %}
                  {% if item.childrens %}
                    <div class="freeform-column  col-12 col-lg-12">
                      {% for children in item.items %}
                        <section class="{{ children.parentClass }}">
                          {{ _set.field(children.field) }}
                        </section>
                      {% endfor %}
                    </div>
                  {% else %}
                    <div class="freeform-column  col-12 col-lg-12">
                      {{ _set.field(item.field) }}
                    </div>
                  {% endif %}
                {% endfor %}
                <input type="hidden" value="{{ form.handle|base64enc }}" name="form_qr" /> 
                <div class="col-12 col-lg-12">
                 <div class=" d-flex justify-content-end">
                    <button type="submit" class="px-4 py-2 submit">
                      {{ 'Enviar'|t|upper }}
                    </button>
                  </div>
                </div>
                
                 {{ form.renderClosingTag }}


                    {#
                      form.render({
                        labelClass: 'form-label',
                        inputClass: 'form-control',
                        selectClass:'form-select',
                        instructionsBelowField: true,
                        submitClass: 'submit',
                        formAttributes: {
                          class: 'block_contactform__form--content'
                        }
                      })
                    #}
                </div>
            </div>
        </div>
    </div>
    {% include 'quarks/_loadJsComponent' with {
      name:  '_' ~ component.type
    } only %}
</section>