<script setup lang="ts">
defineProps<{ title: string; subtitle?: string }>();
</script>

<template>
  <section class="table-page-layout">
    <header class="panel-header table-page-header">
      <div>
        <h2>{{ title }}</h2>
        <small v-if="subtitle">{{ subtitle }}</small>
      </div>
      <div v-if="$slots.actions" class="table-page-actions">
        <slot name="actions" />
      </div>
    </header>
    <div v-if="$slots.filters" class="table-page-filters">
      <slot name="filters" />
    </div>
    <slot />
    <footer v-if="$slots.pagination" class="table-page-pagination">
      <slot name="pagination" />
    </footer>
  </section>
</template>
