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

    <ShowJumbotron />

    <div class="tw-grid tw-gap-x-6 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3">
      <ShowMetaSimpleTypes />
      <hr class="tw-col-span-full tw-w-full" />
      <ShowMetaArrays />
      <hr class="tw-col-span-full tw-w-full" />
      <ShowMetaImages />
      <ShowMetaOwners />
    </div>
  </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 { useStore } from 'vuex'
import PageHeader from '@/components/PageHeader.vue'
import { useAuthStore, useUserStore } from '@/stores/auth'
import { useI18n } from '@/i18n'
import { Show } from '@/types'

defineProps<{
  show: Show
}>()

const authStore = useAuthStore()
const userStore = useUserStore()
const store = useStore()
const { t } = useI18n()

store.dispatch('shows/fetchMetaArray', { property: 'types', onlyActive: true })
store.dispatch('shows/fetchMetaArray', {
  property: 'fundingCategories',
  onlyActive: true,
})
store.dispatch('shows/fetchMetaArray', { property: 'categories' })
store.dispatch('shows/fetchMetaArray', { property: 'topics' })
store.dispatch('shows/fetchMetaArray', { property: 'musicFocus' })
store.dispatch('shows/fetchMetaArray', { property: 'languages' })
store.dispatch('shows/fetchMetaArray', { property: 'hosts' })
if (authStore.isSuperuser) {
  userStore.list()
}
</script>