<template>
  <div>
    <TitleBox />
    <div class="page-index__action-box">
      <div class="page-index__space" />
      <div class="page-index__login">
        <LoginBox />
      </div>
      <div class="page-index__separator" />
      <div class="page-index__create-team">
        <Button disabled>{{ $t('create-team') }}</Button>
      </div>
      <div class="page-index__space" />
    </div>
    <div class="page-index__copyright-notice">
      v{{ config.version }}, © 2021-2022, Settel
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRuntimeConfig, navigateTo } from '#app'
import useAuth from '@/composables/useAuth'
import useI18n from '@/composables/useI18n'

const { $t } = useI18n({
  'create-team': { en: 'Create Team', de: 'Team erstellen' },
})

const config = useRuntimeConfig()

try {
  await useAuth().authenticateAndLoadUserInfo()
  navigateTo('/play', { replace: true })
} catch (e) {
  // nop
}
</script>

<style lang="scss">
@import '~/assets/css/components';

body {
  background-color: $background-primary-color;
  color: $text-primary-color;

  margin: 0;
}

.page-index {
  &__action-box {
    display: flex;
    width: 100%;
    height: 120px;
  }

  &__login,
  &__create-team {
    width: 320px;
    align-self: center;
  }

  &__separator {
    width: 1px;
    margin: 0 48px;
    border-left: $box-primary-border;
  }

  &__space {
    flex-grow: 1;
  }

  &__copyright-notice {
    position: absolute;
    right: 1em;
    bottom: 0;
    color: #000000;
  }
}
</style>