<script setup lang="ts">
import PageLayout from '../../layouts/PageLayout.vue'
import CrudWorkspaceLayout from '../../layouts/CrudWorkspaceLayout.vue'
import StandardScreenBoundary from './StandardScreenBoundary.vue'
import type { StandardScreenProps } from '../../contracts/screenContract'

const props = defineProps<StandardScreenProps>()
defineEmits<{ retry: [] }>()
</script>

<template>
  <PageLayout :title="props.title" :subtitle="props.subtitle" :status="props.state" :as-of="props.evidence?.asOf" :version="props.evidence?.version">
    <template #actions><slot name="actions" /></template>
    <template #commandBar><slot name="commandBar" /></template>
    <template #summary><slot name="summary" /></template>
    <template #filters><slot name="filters" /></template>

    <StandardScreenBoundary style="height: 100%; min-height: 0; display: flex; flex-direction: column; flex: 1;" :state="props.state" :warning="props.warning" :stale-at="props.evidence?.asOf" @retry="$emit('retry')">

      <CrudWorkspaceLayout :initial-ratio="props.initialRatio ?? 50" :storage-key="props.storageKey ?? 'ks_crud_splitter_ratio_50'">
        <slot />
        <template v-if="$slots.detail" #aside><slot name="detail" /></template>
      </CrudWorkspaceLayout>
    </StandardScreenBoundary>
    <template v-if="$slots.footer" #footer><slot name="footer" /></template>
  </PageLayout>
</template>
