<template>
  <div class="startpage">
    <TitleBox />
    <PlayButton class="startpage__buttonline" />
    <div class="startpage__video">
      <a href="https://www.sirlab.de/knowyt/know-your-teammates-kurzanleitung.mp4" target="_blank">
        🎬 {{ $t('video-user') }}
      </a>
    </div>
    <CreateTeam v-if="!$store.state.engine.user" class="startpage__creategame" />
    <div class="startpage__copyright">
      v{{ $config.version }}, © 2021-2022, Settel
    </div>
  </div>
</template>

<script>
export default {
  beforeMount() {
    this.$i18n.map({
      'video-user': { de: 'Erklärvideo (3min)', en: 'Video (3 mins, german)' },
    })
  },
}
</script>

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

.startpage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  &__buttonline {
    display: flex;
    justify-content: center;
  }

  &__creategame {
    margin: auto 0 2em 2em;
  }

  &__video {
    margin: 2em 0;
    text-align: center;
    font-family: $secondary-font;
    font-size: 24px;
    font-weight: 800;
    color: $text-secondary-text-color;

    &:hover {
      color: $text-secondary-hover-text-color;
    }
  }

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