<script setup lang="ts">
import type { StandardScreenState } from '../ui/contracts/screenContract'
import PageLayout from '../ui/layouts/PageLayout.vue'
import FormPageLayout from '../ui/layouts/FormPageLayout.vue'
import StandardScreenBoundary from '../ui/screen-types/v2/StandardScreenBoundary.vue'
withDefaults(defineProps<{ title: string; subtitle?: string; state?: StandardScreenState; dirty?: boolean; readonly?: boolean; asOf?: string; version?: string }>(), { state: 'READY', dirty: false, readonly: false })
const emit = defineEmits<{ retry: []; submit: []; cancel: [] }>()
</script>
<template>
  <PageLayout :title="title" :subtitle="subtitle" :status="readonly ? 'READONLY' : state" :as-of="asOf" :version="version">
    <StandardScreenBoundary :state="readonly ? 'READONLY' : (dirty ? 'DIRTY' : state)" :stale-at="asOf" @retry="emit('retry')">
      <FormPageLayout @submit="emit('submit')">
        <slot />
        <template v-if="$slots.aside" #preview><slot name="aside" /></template>
      </FormPageLayout>
    </StandardScreenBoundary>
    <template #footer><slot name="actions" /></template>
  </PageLayout>
</template>
