<script setup>
import data from "@/data.json";
import { useStore } from "@/stores";

const store = useStore();
const language = store.language;

const translationKey = "languages_id";
const scores = data.filter((score) => {
  return (
    !!score.translations.find(
      (translation) => translation[translationKey] == language
    ) &&
    score.results.length &&
    score.questions.length
  );
});
function getTranslation(translations, key) {
  return translations.find((translation) => translation[key] == language);
}
</script>

<template>
  <header>
    <h1>Ceiba Scores App</h1>
  </header>
  <main>
    <div class="container" v-if="scores">
      <ul>
        <li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
          <router-link :to="{ name: 'score', params: { id: score.id } }">{{
            getTranslation(score.translations, "languages_id").title1
          }}</router-link>
        </li>
      </ul>
    </div>
  </main>
</template>

<style lang="sass" scoped>
header
  height: var(--header-size)
  overflow: hidden
  display: flex
  justify-content: center
  align-items: center
  border-bottom: 2px solid var(--color-white)
  background: var(--color-green)

  h1
    text-align: center

main
  width: 100%
  height: calc(100% - var(--header-size))
  padding: 1rem
  display: flex
  justify-content: center
  align-items: center
  overflow: hidden
  background-color: var(--color-highlight)

.container
  position: relative
  width: 100%
  max-width: 440px
  max-height: 100%
  padding-top: calc(100% / (724 / 1136))

  @media only screen and (min-width: 472px)
    padding-top: 0
    width: 440px
    height: calc(440px * 1136 / 724)

ul
  margin: 0
  padding: 0
  list-style: none

  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0

  background-image: url(/arbre.png)
  background-position: center
  background-repeat: no-repeat
  background-size: contain

  // border: 2px solid var(--color-white)
  border-radius: 10px

  li
    display: none

    background: rgba(0, 0, 0, .5)
    border-radius: 10px
    position: absolute
    border: 2px solid var(--color-white)

    &#score_1
      display: flex
      top: 40%
      bottom: 35%
      left: 20%
      right: 20%

    &#score_6
      display: flex
      top: 72%
      bottom: 5%
      left: 6%
      right: 6%

  a
    color: var(--color-white)
    display: block
    width: 100%
    height: 100%
    display: flex
    align-items: center
    justify-content: center
    text-align: center
</style>
