{% set logosFooter = footer.logosAndLinks.all() ?? [] %}
{% set menusFooter = navegation.groupsOfSubmenu.all() ?? [] %}
{% set itemnewsletter =   footer.newsletter %}
{% import '_macros/setFieldForm' as _set %}

<footer class="footer-21a47">
  <section class="container p-0 d-none d-lg-block">
    <div class="row">
      <div class="col-lg-4 ">
        <div class="mh-50 w-100 p-3 border-f-r border-f-bl pt-5">
          {% for i in menusFooter %}
          {% set links = i.links.all() ?? [] %}
          {% if (links|length) > 0 %}
          <nav class="p-0">
            {% if (i.groupTitle|length) > 0 %}
            <p class="m-0 groupTitle">
              {{ i.groupTitle }}
            </p>
            {% endif %}
            <ul class="p-0 m-0 footer-21a47__menu">
              {% for j in links %}
              <li class="m-2">
                {{
                j.itemLink.getLink({
                class: 'footer-21a47__menu--link',
                text: j.itemLink.getCustomText()
                })
                }}
              </li>
              {% endfor %}
            </ul>
          </nav>
          {% endif %}
          {% endfor %}
        </div>
        <div class="mh-50 w-100 p-3 border-f-r">
          {% if footer.legalNotice is not empty %}
          <p><strong>{{footer.legalNotice.titleblock}}</strong></p> <br>
          <div class="footer-21a47-leganotice">
            {{footer.legalNotice.contentblock}}
          </div>
          {% endif %}
        </div>
      </div>
      <div class="col-lg-4">
        {% set notice = craft.entries.section('pressReleasesEntries').with(['image']).orderBy(
          'postDate desc'
        ).limit(1).one %}

        <div class="footer-21a47-secondcol">
          <div class="footer-blog pt-3 pb-3">
            <p><strong>{{'Boletín informativo'|t}}</strong></p>
            {% if notice is not empty %}
            <a href="{{notice.url}}" class="footer-21a47-blog">
              {% set img = notice.image[0] ?? null %}
              {% if img %}
                  <img loading="lazy" alt="{{img.title}}" class="footer-21a47-blog__img lazyload" data-src="{{img.getUrl('imageMedium')}}">
              {% endif %}
              <div>
                <p><strong>{{'Articulo'|t}}</strong></p>
                <div class="content">{{notice.description|chop(limit=18, unit='w')}}</div>
              </div>
            </a>
            {% endif %}
          </div>
          <div class="footer-21a47_Newsletter">
          
          {% if itemnewsletter is not empty and itemnewsletter.showNewsletter is same as (true) %}
            <p class="text-center footer-21a47_Newsletter--title">{{itemnewsletter.titleOfForm|t}}</p>
            {% set form = craft.freeform.form('newsletter') ?? null %}
            <section class="Newsletterform">
             {% if form %}
              {{
                form.renderTag({
                  class: 'row gx-3 gx-lg-5 gy-4 FormNewsletter pt-4',
                  id: 'FormNewsletter',
                  formAttributes: {
                    'data-skip-html-reload': true
                  }
                })
              }}

              {% if form.hasErrors %}
                <div class="freeform-form-has-errors d-none">
                  {{ '¡Ocurrió un error! Por favor, revise los datos ingresados e intente enviarlo de nuevo.'|t }}
                </div>
              {% endif %}
              {% set groups = [
                 {
                  childrens: false,
                  field: form.get('email'),
                },
              ] %}
              <input type="hidden" value="{{ form.handle|base64enc }}" name="form_qr" /> 
              <div class="freeform-row">
              {% 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 %}
                
                <div class="freeform-column col-12 col-lg-12">
                 <div class=" d-flex justify-content-end">
                    <button type="submit" class="px-4 py-2 FormNewsletter__btn">
                      {{ 'Enviar'|t|upper }}
                    </button>
                  </div>
                </div>
              </div>
                 {{ form.renderClosingTag }}
            {% endif %}
          </section>
          {% endif %}
          {% if itemnewsletter is not empty and itemnewsletter.linkItem is not empty %}
          <a class="footer-21a47_Newsletter--link mt-2" {{itemnewsletter.linkItem.getLinkAttributes()}}>{{itemnewsletter.linkItem.customText}}</a>
          {% endif %}
          </div>
        </div>
      </div>
      <div class="col-lg-4 midlecol">
        <div class="w-100 py-3 px-5  border-f-br border-f-l pt-5">
          <p><strong>Sigue a UNOPS en redes sociales</strong></p>
          {% if footer.socialMedia.count() > 0 %}
          <ul
            class="m-0 p-0 footer-21a47__socialMedia justify-content-center justify-content-md-start align-items-center">
            {% for item in footer.socialMedia.all() ?? [] %}
            <li class="{{ loop.first ? 'me-2' : 'm-2' }}">
              <a {{ item.slink.getLinkAttributes() }}
                class="d-flex align-items-center justify-content-center flex-column">
                {% set icon = item.icon[0] ?? null %}
                {% if icon %}
                {{svg(icon)|attr({
                class: 'social-icon'
                })}}
                {% endif %}
              </a>
            </li>
            {% endfor %}
          </ul>
          {% endif %}
          {% if (footer.fieldEmail|length) > 0 %}
          <p class="footer-21a47__contact mt-3 mb-2 text-center text-md-start">
            <a href="mailto:{{ footer.fieldEmail }}" class="footer-21a47__contact--email">
              Contáctanos
            </a>
          </p>
          {% endif %}
        </div>
        <div class="w-100 p-3 px-5 border-f-l d-flex justify-content-center align-items-center">
          {% if (footer.fieldRedactor|length) > 0 %}
          <div class="footer-21a47__address text-center text-lg-start w-100">
            {{ footer.fieldRedactor }}
          </div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="row py-3 border-f-t">
      <div class="col-md-4 d-flex align-items-center">
        <p class="mb-0">{{'Proyecto Salud HONDURAS ' ~ 'now' | date('Y')}}</p>
      </div>
      <div class="col-md-4 d-flex justify-content-center align-items-center">
        <section class="content__img d-flex justify-content-center justify-content-md-evenly flex-wrap">
          {% for i in logosFooter %}
          {% set img = i.logo[0] %}
          {% if img %}
          <a {{ i.itemLink.getLinkAttributes() }} class="my-3 my-md-0 d-flex">
            <img src="" data-src="{{ img.url }}" alt="{{ img.title }}" width="{{ img.getWidth() }}"
              height="{{ img.getHeight() }}" class="lazyload img-fluid mx-3 footer-21a47__logosGrid" loading="lazy" />
          </a>
          {% endif %}
          {% endfor %}
        </section>
      </div>
      <div class="col-md-4 d-flex justify-content-center align-items-center">
        <p class="mb-0">{{'TODOS LOS DERECHOS RESERVADOS'}}</p>
      </div>
    </div>
  </section>
  <section class="container d-block d-lg-none">
    <div class="row py-5">
      <div class="col-lg-12 my-2 footer-21a47-mb">
        <section class="content__img d-flex justify-content-center align-content-center flex-wrap flex-column">
          {% for i in logosFooter %}
          {% set img = i.logo[0] %}
          {% if img %}
          <a {{ i.itemLink.getLinkAttributes() }} class="my-3 my-md-0 d-flex">
            <img src="" data-src="{{ img.url }}" alt="{{ img.title }}" width="{{ img.getWidth() }}"
              height="{{ img.getHeight() }}" class="lazyload img-fluid mx-3 footer-21a47__logosGrid" loading="lazy" />
          </a>
          {% endif %}
          {% endfor %}
        </section>
      </div>
      <div class="col-lg-12 my-2 footer-21a47-mb">
        <div class="w-100 pb-3">
          {% for i in menusFooter %}
          {% set links = i.links.all() ?? [] %}
          {% if (links|length) > 0 %}
          <nav class="p-0">
            {% if (i.groupTitle|length) > 0 %}
            <p class="m-0 groupTitle">
              {{ i.groupTitle }}
            </p>
            {% endif %}
            <ul class="p-0 m-0 footer-21a47__menu align-items-center">
              {% for j in links %}
              <li class="m-2">
                {{
                j.itemLink.getLink({
                class: 'footer-21a47__menu--link',
                text: j.itemLink.getCustomText()
                })
                }}
              </li>
              {% endfor %}
            </ul>
          </nav>
          {% endif %}
          {% endfor %}
        </div>
      </div>
      <div class="col-lg-12 my-2 footer-21a47-mb">
        <div class="w-100 text-center">
          <p><strong>Sigue a UNOPS en redes sociales</strong></p>
          {% if footer.socialMedia.count() > 0 %}
          <ul
            class="m-0 p-0 footer-21a47__socialMedia justify-content-center align-items-center">
            {% for item in footer.socialMedia.all() ?? [] %}
            <li class="{{ loop.first ? 'me-2' : 'm-2' }}">
              <a aria-label="Link a redes sociales" {{ item.slink.getLinkAttributes() }}
                class="d-flex align-items-center justify-content-center flex-column">
                {% set icon = item.icon[0] ?? null %}
                {% if icon %}
                {{svg(icon)|attr({
                class: 'social-icon'
                })}}
                {% endif %}
              </a>
            </li>
            {% endfor %}
          </ul>
          {% endif %}
          {% if (footer.fieldEmail|length) > 0 %}
          <p class="footer-21a47__contact mt-3 mb-3 text-center text-md-center">
            <a href="mailto:{{ footer.fieldEmail }}" class="footer-21a47__contact--email">
              Contáctanos
            </a>
          </p>
          {% endif %}
        </div>
      </div>
      <div class="col-lg-12 my-3 footer-21a47-mb">
        <div class="w-100 p-3 text-center">
          {% if footer.legalNotice is not empty %}
          <p class="mb-0"><strong>{{footer.legalNotice.titleblock}}</strong></p> <br>
          <div>
            {{footer.legalNotice.contentblock}}
          </div>
          {% endif %}
        </div>
      </div>
      <div class="col-lg-12 my-3 footer-21a47-mb">
        <div class="footer-21a47_Newsletter mb-3">
          <p><strong>{{'Suscríbete a nuestro boletín informativo'|t}}</strong></p>
          {% set form = craft.freeform.form('newsletter') ?? null %}
          <section class="Newsletterform ">
           {% if form %}
              {{
                form.renderTag({
                  class: 'row gx-3 gx-lg-5 gy-4 FormNewsletter__mobile pt-4',
                  id: 'FormNewsletter',
                  formAttributes: {
                    'data-skip-html-reload': true
                  }
                })
              }}

              {% if form.hasErrors %}
                <div class="freeform-form-has-errors d-none">
                  {{ '¡Ocurrió un error! Por favor, revise los datos ingresados e intente enviarlo de nuevo.'|t }}
                </div>
              {% endif %}
              {% set groups = [
                 {
                  childrens: false,
                  field: form.get('email'),
                },
              ] %}
              <input type="hidden" value="{{ form.handle|base64enc }}" name="form_qr" /> 
              <div class="freeform-row">
              {% 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 %}
                
                <div class="freeform-column col-12 col-lg-12">
                 <div class=" d-flex justify-content-end">
                    <button type="submit" class="px-4 py-2 FormNewsletter__btn">
                      {{ 'Enviar'|t|upper }}
                    </button>
                  </div>
                </div>
              </div>
                 {{ form.renderClosingTag }}
            {% endif %}
          </section>
        </div>
      </div>
      <div class="col-lg-12 my-3 ">
        <p class="mb-2 text-center">{{'Proyecto Salud HONDURAS ' ~ 'now' | date('Y')}}</p>
        <p class="mb-2 text-center">{{'TODOS LOS DERECHOS RESERVADOS'}}</p>
      </div>
    </div>
  </section>
</footer>