<template>
  <div id="danger-zone" class="tw-bg-stripes tw-p-4 [background-size:14.14px_14.14px] tw-rounded">
    <div class="tw-bg-white tw-p-6 tw-shadow">
      <h2 class="tw-text-xl tw-font-bold -tw-mt-2 tw-mb-3">{{ t('show.housekeeping.title') }}</h2>
      <div class="tw-flex tw-gap-6 tw-flex-wrap">
        <AHousekeepingSection :title="t('show.housekeeping.flows.archival')">
          <AShowArchivalFlow :show="show" />
        </AHousekeepingSection>
        <AHousekeepingSection :title="t('show.housekeeping.flows.deletion')">
          <AShowDeletionFlow :show="show" />
        </AHousekeepingSection>
        <AHousekeepingSection
          :title="t('show.housekeeping.flows.slugRenaming')"
          class="tw-flex-[2]"
        >
          <AShowSlugRenamingFlow :show="show" />
        </AHousekeepingSection>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Show } from '@/types'
import AShowArchivalFlow from '@/components/shows/AShowArchivalFlow.vue'
import AShowDeletionFlow from '@/components/shows/AShowDeletionFlow.vue'
import AShowSlugRenamingFlow from '@/components/shows/AShowSlugRenamingFlow.vue'
import AHousekeepingSection from '@/components/shows/AHousekeepingSection.vue'
import { useI18n } from '@/i18n'

defineProps<{
  show: Show
}>()

const { t } = useI18n()
</script>