<template>
  <footer class="footer">
    <ul class="link-list">
      <li class="link-item">
        <div class="link">
          <Link
            :text="$t('general.footer.panoramax_site')"
            type="external"
            target="_blank"
            path-external="https://panoramax.fr/"
            look="link"
            :image="{
              url: 'logo.jpeg',
              alt: $t('general.footer.gitlab_logo')
            }"
          />
        </div>
      </li>
      <li class="link-item">
        <div class="link">
          <Link
            :text="$t('general.footer.information_gitlab')"
            type="external"
            target="_blank"
            path-external="https://gitlab.com/geovisio"
            look="link"
            :image="{
              url: 'gitlab-logo.svg',
              alt: $t('general.footer.gitlab_logo')
            }"
          />
        </div>
      </li>
      <li v-if="isInstanceIGN" class="link-item">
        <div class="link">
          <Link
            :text="$t('general.footer.ay11_text')"
            :route="{ name: 'ay11' }"
            look="link link--grey"
          />
        </div>
      </li>
    </ul>
  </footer>
</template>

<script setup lang="ts">
import Link from './Link.vue'
import { computed } from 'vue'

const isInstanceIGN = computed((): boolean =>
  window.location.href.includes('.ign.')
)
</script>

<style scoped lang="scss">
ul {
  padding: 0;
  margin: 0;
}
.footer {
  padding: toRem(1.5) toRem(3);
  border-top: toRem(0.1) solid var(--grey);
}
.link-list {
  display: flex;
  justify-content: center;
  width: 100%;
}
.logo-list {
  display: flex;
  align-items: center;
}

.link-item {
  width: fit-content;
  margin-right: toRem(2);
  &:last-child {
    margin-right: 0;
  }
}
.link {
  color: var(--blue-dark);
  @include text(s-regular);
  height: toRem(2);
  width: fit-content;
}
.logo {
  margin-right: toRem(2);
  height: toRem(2);
}
@media (max-width: toRem(76.8)) {
  .footer {
    padding: toRem(1);
    height: toRem(6.5);
  }
  .link-list {
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
  }
  .logo {
    margin-right: toRem(0.5);
    height: toRem(1.5);
  }
  .link-item {
    margin-right: toRem(1);
    margin-bottom: toRem(1);
  }
  .link {
    height: toRem(1.5);
  }
}
@media (max-width: toRem(50)) {
  .title {
    margin-bottom: 0;
  }
}
</style>
