<script setup>
import { Head, Link } from '@inertiajs/vue3'
import CustomerLayout from '@/Layouts/CustomerLayout.vue'
import WpStagingTab from '@/Components/WpStagingTab.vue'
import { ArrowLeftIcon } from '@heroicons/vue/24/outline'

const props = defineProps({
    site: Object,
    stagings: { type: Array, default: () => [] },
})
</script>

<template>
    <Head :title="`Staging — ${site.site_title}`" />
    <CustomerLayout>
        <template #header>Staging: {{ site.site_title }}</template>

        <Link :href="route('customer.wp.show', site.id)" class="mb-4 inline-flex items-center gap-1 text-sm text-slate-600 hover:text-indigo-700">
            <ArrowLeftIcon class="h-4 w-4" /> {{ site.site_title }}
        </Link>

        <WpStagingTab :site="site" :stagings="stagings" />
    </CustomerLayout>
</template>
