<template>
  <div class="auth-layout">
    <header class="auth-header">
      <NuxtLink to="/projects">
        <img
          src="/logo.svg"
          alt="logo"
          draggable="false"
        >
      </NuxtLink>

      <UiButton
        v-if="headerAction"
        class="ml-a"
        type="ghost"
        :href="headerAction.link"
        size="large"
      >
        {{ headerAction.name }}
      </UiButton>

      <LangSwitcher />
    </header>

    <main class="auth-main">
      <slot />
    </main>

    <footer class="auth-footer">
      <div class="auth-footer__left">
        <UiButton
          type="link"
          color="secondary"
          href="#"
        >
          {{ $t('privacy_policy') }}
        </UiButton>
      </div>

      <div class="auth-footer__middle">
        <span class="auth-footer__copyright">
          {{ $t('copyright', { year }) }}
        </span>
      </div>

      <div class="auth-footer__right">
        <UiButton
          icon="circle-question"
          type="link"
          color="secondary"
          href="#"
        >
          {{ $t('support') }}
        </UiButton>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const { t } = useI18n({ useScope: 'global' })
const year = computed(() => new Date().getFullYear())

const headerAction = computed(() => {
  switch (route.name) {
    case 'login':
      return {
        name: t('register'),
        link: '/register',
      }
    case 'register':
      return {
        name: t('login'),
        link: '/login',
      }
    default:
      return undefined
  }
})
</script>

<style lang="scss">
.auth-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-header {
  display: flex;
  padding: 32px 56px 0 56px;
  justify-content: space-between;
  align-items: center;
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 30px;
}

.auth-footer {
  padding: 24px 56px 32px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  > * {
    flex: 1;
  }

  &__left {
    text-align: start;
  }

  &__middle {
    text-align: center;
  }

  &__right {
    text-align: end;
  }

  &__copyright {
    color: $clr-grey-400;
  }
}
</style>
