<template>
  <div class="deck">
    <card
      v-for="track in tracks"
      :key="track.id"
      :track="track"
      :is-face-up="track.isFaceUp"
      @click="flipCard(track)"
    />
  </div>
</template>

<script setup>
import { useDataStore } from '~/store/data'
const tracks = ref([])
definePageMeta({
  layout: 'default'
})

onMounted(async () => {
  const dataStore = useDataStore()
  await dataStore.loadData()
  tracks.value = dataStore.getTracksByboxId('ES2025')
})

function flipCard(track) {
  track.isFaceUp = !track.isFaceUp
}
</script>

<style lang="scss" scoped>
.logo {
  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
}

.deck {
  position: relative;
  height: 80vh;

  .card {
    z-index: 10;
    position: relative;
  }
}
</style>
