{% load wagtailimages_tags %}

<footer class="bg-black text-white __js-root py-4 xl:py-24 pb-8 xl:pb-24">
  <ui-app inline-template>
    <div
      class="
        container--wide gap-16 grid grid-cols-1
        lg:grid-cols-2 lg:gap-2
      "
    >
      <section class="text-white md:flex md:flex-col md:justify-between gap-8">
        {% for other_link in page.root_page.footer_other_links %}
          <div class="py-4 xl:py-0">
            <ui-footer-collapsible label="{{ other_link.value.title }}">
              <ul
                class="
                  text-white py-8 max-w-max text-xl flex flex-col gap-3

                  md:text-base md:grid md:grid-cols-2 md:auto-rows-auto md:gap-y-5 md:gap-x-14
                "
              >
                {% for link_list in other_link.value.list %}
                  <li>
                    <a href="{{ link_list.link }}">{{ link_list.text }}</a>
                  </li>
                {% endfor %}
              </ul>
            </ui-footer-collapsible>
          </div>
        {% endfor %}
      </section>

      <section class="flex flex-col xl:items-end">
        <div class="flex flex-col gap-12">
          {% if page.root_page.footer_person_list %}
            {% for person in page.root_page.footer_person_list %}
              {% image person.value.person.profile_image fill-256x256 as person_profile_image %}

              {% firstof person.value.position person.value.person.position as position %}

              {% include 'styleguide2/includes/molecules/contact/contact_footer_box.html' with image=person_profile_image url=person.value.person.url name=person.value.person.title function=position telephone=person.value.person.phone mail=person.value.person.email %}
            {% endfor %}
          {% endif %}
        </div>
      </section>
    </div>
  </ui-app>

  <div class="container--wide flex flex-col gap-8 pt-16 xl:pt-8">
    <section>
      <div
        class="
          flex flex-col items-start gap-y-4
          xl:flex-row xl:items-center xl:gap-x-8
        "
      >
        {% for social_link_block in page.root_page.social_links %}
          <a href="{{ social_link_block.value.link }}" class="flex gap-2 items-center hover:no-underline">
            <i class="{{ social_link_block.value.icon }}"></i>
            <span class="text-sm">{{ social_link_block.value.text }}</span>
          </a>
        {% endfor %}
      </div>
    </section>

    <section>
      <span class="text-xs text-grey-350">
        <span class="-scale-x-100 inline-block">{{ copyleft_sign }}</span>
        {{ copyleft_text|safe }}
        <a href="#" class="underline">{{ privacy_text }}</a>
      </span>
    </section>
  </div>
</footer>