<script setup>
/**
 * Base layout for index/list pages: card, optional title/subtitle, error, optional legacy toolbar (left/right), default slot.
 * For B2CDataTable list views, prefer `flush` and put the page title + actions in `B2CDataTable` slots (`#toolbar-title`, `#toolbar-title-right`, `#search-before`, `#controls-right`); see docs/architecture/frontend/b2c-datatable.md.
 */
defineProps({
  /** Card/page title (e.g. "Bedrijven"). Can be overridden by #title slot. */
  title: { type: String, default: "" },
  /** Optional subtitle below title (e.g. "Beheer bedrijven"). Can be overridden by #subtitle slot. */
  subtitle: { type: String, default: "" },
  /** Optional error message shown below title/subtitle. */
  error: { type: String, default: "" },
  /** Remove card padding and let content run edge-to-edge. */
  flush: { type: Boolean, default: false },
});
</script>

<template>
  <BaseCard :class="{ 'base-index-card--flush': flush }">
    <BaseTitle v-if="title || $slots.title" :level="1" class="mb-2">
      <slot name="title">{{ title }}</slot>
    </BaseTitle>
    <BaseSubtitle v-if="subtitle || $slots.subtitle" :level="2" class="mb-2">
      <slot name="subtitle">{{ subtitle }}</slot>
    </BaseSubtitle>
    <p v-if="error" class="text-color-error mb-2">{{ error }}</p>
    <div
      v-if="$slots['toolbar-left'] || $slots['toolbar-right']"
      class="border-b border-surface-200 dark:border-surface-700 bg-transparent mb-4 pb-4"
    >
      <div class="flex align-items-center gap-2 flex-wrap w-full">
        <div class="flex align-items-center gap-2">
          <slot name="toolbar-left" />
        </div>
        <div class="flex align-items-center gap-2 ml-auto">
          <slot name="toolbar-right" />
        </div>
      </div>
    </div>
    <div class="base-index-content">
      <slot />
    </div>
  </BaseCard>
</template>

<style scoped>
.base-index-content {
  min-width: 0;
}

.base-index-card--flush {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  margin-bottom: 0;
}

.base-index-card--flush .base-index-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
}
</style>
