<template>
  <footer class="ais-footer box-border bg-secondary font-sans text-white pt-10 pb-4">
    <div class="grid gap-5 mx-5 md:mx-12 2xl:mx-auto md:min-w-fit 2xl:max-w-screen-2xl">
      <div class="flex flex-col md:flex-row gap-y-5 gap-x-4">
        <!-- margin 0 1.25rem-->
        <div class="grow-2 shrink basis-0">
          <div class="grid gap-y-5">
            <AisLogo class="px-0 py-0 mr-2.5 w-[120px] md:w-[145px]"/>

            <div v-if="site" class="text-[1.7rem] text-white font-black">
              <AisLink v-bind="site" class="!text-white" />
            </div>

            <address class="">
              <!-- physical address, defined by address prop-->
              <div class="font-light text-lg leading-6 not-italic text-ui-gray-100">
                <div v-for="line in props.address">{{ line }}</div>
              </div>
              <!-- list of contact info, defined by contacts prop -->
              <ul class="list-none pl-0 my-0 font-normal">
                <li v-for="contact in props.contacts">
                  <a class="!text-ui-gold not-italic" :href="contact.href">
                    <AisIcon :icon="contact.icon" class="text-ui-gray-100 text-sm mr-3"/>
                    <span class="text-lg">{{ contact.label }}</span>
                  </a>
                </li>
              </ul>
            </address>

            <nav v-if="hasSocials" class="flex flex-row gap-4 text-2xl">
              <div v-for="social in props.socials">
                <a :href="social.href">
                  <AisIcon :icon="social.icon" class="!text-white hover:!text-ui-gold"/>
                </a>
              </div>
            </nav>
          </div>
        </div>

        <!--
          lists of relevant links
          3 slots - only the first has default content
        -->
        <div v-if="$slots.primary" class="grow shrink basis-0">
          <slot name="primary"></slot>
        </div>

        <div v-if="$slots.secondary" class="grow shrink basis-0">
          <slot name="secondary"></slot>
        </div>

        <div v-if="$slots.tertiary" class="grow shrink basis-0">
          <slot name="tertiary"></slot>
        </div>

        <!--
          @slot The admin slot exposes an area to include administrative tools & links.
        No default content is included.-->
        <slot name="admin"></slot>
      </div>

      <!-- copyright and policy information is not configurable -->
      <div class="policy col-span-full text-sm leading-loose font-normal">
        <div>© {{ new Date().getFullYear() }} The University of Iowa</div>
        <ul class="mt-0 p-0 flex flex-wrap gap-x-2.5 divide-x divide-ui-gray list-none">
          <li class="">
            <a href="https://uiowa.edu/privacy">Privacy Notice</a>
          </li>
          <li class="pl-2.5">
            <a
              href="https://opsmanual.uiowa.edu/community-policies/nondiscrimination-statement"
            >Nondiscrimination Statement</a>
          </li>
          <li class="pl-2.5">
            <a href="https://uiowa.edu/accessibility">Accessibility</a>
          </li>
          <li class="pl-2.5">
            <a href="https://nativeamericancouncil.org.uiowa.edu">UI Indigenous Land Acknowledgement</a>
          </li>
        </ul>
      </div>
    </div>
  </footer>
</template>


<script setup>
import AisLogo from '@/components/logo/AisLogo.vue'
import AisLink from '@/components/link/AisLink.vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faPhone, faEnvelope, faComment } from '@fortawesome/free-solid-svg-icons'
import AisIcon from '@/components/icon/AisIcon.vue'

library.add(faPhone, faEnvelope, faComment)

const props = defineProps({
  site: { type: Object, required: false, default: null },

  address: { type: Array, default: ['Iowa City, Iowa 52242'] },

  contacts: {
    type: Array,
    default: [
      { icon: faPhone, label: '319-384-4357', href: 'tel:319-384-4357' },
      { icon: faEnvelope, label: 'its-helpdesk@uiowa.edu', href: 'mailto:its-helpdesk@uiowa.edu' },
      { icon: faComment, label: 'Help Desk Online Chat', href: 'https://helpdesk.its.uiowa.edu/connect' },
    ]
  },

  socials: { type: Array, default: [] },
})

const hasSocials = props.socials.length !== 0

</script>
