<script setup lang="ts">
defineProps<{ title: string; description: string; emptyText: string; hasSelection: boolean }>();
</script>

<template>
  <div class="page-stack management-page">
    <header class="page-header master-detail-heading">
      <div>
        <h2>{{ title }}</h2>
      </div>
      <div class="page-actions"><slot name="header-actions" /></div>
    </header>
    <section class="master-detail-panel">
      <aside class="master-list">
        <div class="master-list-toolbar"><slot name="list-toolbar" /></div>
        <div class="master-list-items"><slot name="list" /></div>
      </aside>
      <section class="master-editor">
        <slot
          v-if="hasSelection"
          name="detail"
        />
        <div
          v-else
          class="master-empty"
        >
          {{ emptyText }}
        </div>
      </section>
    </section>
  </div>
</template>

<style scoped>
.master-detail-heading {
  align-items: center;
}
.master-detail-panel {
  display: grid;
  flex: none;
  height: max(760px, calc(100dvh - 118px));
  min-height: 760px;
  grid-template-columns: 300px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.master-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--color-border-light);
  background: #f8fafc;
}
.master-list-toolbar {
  padding: 16px;
  border-bottom: 1px solid var(--color-border-light);
}
.master-list-items {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}
.master-editor {
  min-width: 0;
  padding: 26px 30px;
  background: #fff;
}
.master-empty {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.master-detail-heading :deep(.page-actions) {
  align-items: center;
}
@media (max-width: 800px) {
  .master-detail-panel {
    display: grid;
    flex: none;
    height: auto;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .master-list {
    max-height: 280px;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-light);
  }
  .master-editor {
    padding: 20px 16px;
  }
}
</style>
