<script setup lang="ts">
import ClockHeader from "@/components/header/partials/ClockHeader.vue";
import ClockContent from "@/components/header/partials/ClockContent.vue";


//ToDo: items must be called from backend
const items = [
    {
      id: 1,
      name: "Trasmissione 1",
      type: "show",
      when: "11:00"
    },
    {
      id: 2,
      name: "Spot antimilitarista",
      type: "ad",
      when: "12:00"
    },
    {
      id: 3,
      name: "Musichetta buffa",
      type: "jingle",
      when: "12:10"
    },
  ];
</script>

<template>
  <v-card>
    <ClockHeader />
    <ClockContent v-if="items.length > 0" v-for="item in items" :key="item.id" :item="item" />
    <v-card-text v-else>
      {{ $t('header.clock.nothingfound') }}
    </v-card-text>
  </v-card>
</template>

<style scoped>
  .v-card {
    min-width: 25vw;
  }
</style>