<template>
  <div class="info__container">
    <div class="info__box">
      <h1 class="info__title">Know Your Teammates</h1>
      <h2 class="info__subtitle">{{ $t('credits') }}</h2>
      <table class="info__table">
        <tr>
          <td class="info__table-key">Settel</td>
          <td>idea, code, add. design</td>
        </tr>
        <tr>
          <td class="info__table-key">Denis</td>
          <td>design</td>
        </tr>
      </table>
      <h2 class="info__subtitle">{{ $t('technologies') }}</h2>
      <table class="info__table">
        <tr>
          <td class="info__table-key">Frontend</td>
          <td>Vue3 + Nuxt3</td>
        </tr>
        <tr>
          <td class="info__table-key">Backend</td>
          <td>Go</td>
        </tr>
        <tr>
          <td class="info__table-key">Tools</td>
          <td>Podman/Docker, GNU Make, VS Code, Figma</td>
        </tr>
      </table>
      <Button class="info__button" :border="true" @click="navigateTo('/')">{{ $t('back') }}</Button>
    </div>
  </div>
</template>

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

const { $t } = useI18n({
  back: { en: 'back', de: 'zurück' },
  credits: { en: 'Credits', de: 'Mitwirkende' },
  technologies: { en: 'Technologies used', de: 'verwendete Technologien' },
})
</script>

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

.info {
  &__container {
    display: flex;
    width: 100%;
    height: 100%;
    font-family: $font-primary;
    color: $text-primary-color;
  }

  &__box {
    display: flex;
    flex-direction: column;
    min-width: 600px;
    margin: auto;
    padding: 32px;
    border: 1px solid white;
    border-radius: 16px;
  }

  &__title {
    margin: 0 32px 32px 0;
    font-size: 48px;
  }

  &__subtitle {
    margin: 32px 0 8px 0;
    font-size: 24px;
    font-family: $font-secondary;
  }

  &__table {
    font-family: $font-secondary;

    &-key {
      width: 6em;
    }
  }

  &__button {
    margin: 64px 0 0 auto;
  }
}
</style>