<template>
  <div class="tw-max-w-5xl">
    <PageHeader :lead="show.name" :title="t('navigation.show.episodes')" :editing-metadata="show" />

    <TimeSlotList :show="show" />
    <ShowSchedules :show="show" />
  </div>
</template>

<script setup lang="ts">
import { Show } from '@/types'
import TimeSlotList from '@/components/shows/TimeSlotList.vue'
import ShowSchedules from '@/components/shows/Schedules.vue'
import PageHeader from '@/components/PageHeader.vue'
import { useI18n } from '@/i18n'
import { useBreadcrumbs } from '@/stores/nav'

const props = defineProps<{
  show: Show
}>()

const { t } = useI18n()

useBreadcrumbs(() => [
  { title: t('navigation.shows'), route: { name: 'shows' } },
  { title: props.show.name, route: { name: 'show', params: { showId: props.show.id.toString() } } },
  t('navigation.show.episodes'),
])
</script>