<template>
  <div>
    <PageHeader
      :title="t('navigation.show.basicData')"
      :lead="show.name"
      :editing-metadata="show"
    />

    <ShowJumbotron />

    <div class="tw-grid tw-gap-x-6 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3">
      <ShowMetaSimpleTypes :show="show" />
      <hr class="tw-col-span-full tw-w-full" />
      <ShowMetaArrays :show="show" />
      <hr class="tw-col-span-full tw-w-full" />
      <ShowMetaImages :show="show" />
      <ShowMetaOwners :show="show" />
    </div>

    <hr />

    <p class="tw-text-sm">
      <ATimeEditInfo
        v-if="show.updatedAt"
        :edit-info="{ time: show.updatedAt, author: show.updatedBy }"
        type="modified"
      />
      <br />
      <ATimeEditInfo :edit-info="{ time: show.createdAt, author: show.createdBy }" type="created" />
    </p>
  </div>
</template>

<script lang="ts" setup>
import ShowJumbotron from '../components/shows/Jumbotron.vue'
import ShowMetaSimpleTypes from '../components/shows/MetaSimpleTypes.vue'
import ShowMetaArrays from '../components/shows/MetaArrays.vue'
import ShowMetaOwners from '../components/shows/MetaOwners.vue'
import ShowMetaImages from '../components/shows/MetaImages.vue'
import PageHeader from '@/components/PageHeader.vue'
import { useI18n } from '@/i18n'
import { Show } from '@/types'
import { useBreadcrumbs } from '@/stores/nav'
import ATimeEditInfo from '@/components/generic/ATimeEditInfo.vue'

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.basicData'),
])
</script>