<template>
	<private-view :title="title">
		<template #navigation>
			<slot name="navigation" />
		</template>

		<template #title-outer:after>
			<v-notice v-if="notice" :type="notice.type" @close="$emit('close-notice')" dismissible>
				{{ notice.message }}
			</v-notice>
		</template>

		<div class="mintel-manager-layout">
			<div v-if="isEmpty" class="empty-state">
				<v-info :title="emptyTitle" :icon="emptyIcon" center>
					<slot name="empty-state" />
				</v-info>
			</div>

			<template v-else>
				<header class="mintel-header">
					<div class="header-left">
						<h1 class="mintel-title">{{ itemTitle }}</h1>
						<p class="mintel-subtitle">
							<slot name="subtitle" />
						</p>
					</div>
					<div class="header-right">
						<slot name="actions" />
					</div>
				</header>

				<v-divider />

				<div class="mintel-content">
					<slot />
				</div>
			</template>
		</div>
	</private-view>
</template>

<script setup lang="ts">
defineProps<{
	title: string;
	itemTitle?: string;
	isEmpty?: boolean;
	emptyTitle?: string;
	emptyIcon?: string;
	notice?: { type: string; message: string } | null;
}>();

defineEmits(['close-notice']);
</script>

<style scoped>
.mintel-manager-layout {
	padding: 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.mintel-header {
	margin-bottom: 24px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.mintel-title {
	font-size: 24px;
	font-weight: 800;
	margin-bottom: 4px;
	color: var(--theme--foreground);
}

.mintel-subtitle {
	color: var(--theme--foreground-subdued);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-right {
	display: flex;
	gap: 12px;
}

.empty-state {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mintel-content {
	margin-top: 32px;
}
</style>
