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

    <UnderConstruction class="tw-right-0 tw-top-0">
      <template #title>
        <p>
          Der Dialog zur Bearbeitung der Shownotes wird demnächst auf eine separate Seite
          ausgelagert.
        </p>
        <p>
          Auch die Zuweisung der jeweiligen Playlist wird auf diese Unterseite verschoben bzw.
          ergänzt, so dass die Inhalte der Playlist sich direkt dort bearbeiten lassen und kein
          Wechsel zur Medienseite mehr notwendig ist.
        </p>
      </template>
      <TimeSlotList :show="show" />
    </UnderConstruction>
    <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 UnderConstruction from '@/components/UnderConstruction.vue'
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>