<script setup>
import { inject } from 'vue';

import { post } from '#/src/api.js';

const pageContext = inject('pageContext');

async function initCaches() {
	await post('/caches', null, {
		successFeedback: 'Reloaded caches',
		errorFeedback: 'Failed to reload caches',
		appendErrorMessage: true,
	});
}
</script>

<template>
	<div class="page">
		<nav class="nav">
			<ul class="nav-items nolist">
				<li class="nav-item">
					<a
						href="/admin/actors"
						class="nav-link nolink"
						:class="{ active: pageContext.routeParams.section === 'actors' }"
					>Actors</a>
				</li>

				<li class="nav-item">
					<a
						href="/admin/revisions/scenes"
						class="nav-link nolink"
						:class="{ active: pageContext.routeParams.section === 'revisions' && pageContext.routeParams.domain === 'scenes' }"
					>Scene Revisions</a>
				</li>

				<li class="nav-item">
					<a
						href="/admin/revisions/actors"
						class="nav-link nolink"
						:class="{ active: pageContext.routeParams.section === 'revisions' && pageContext.routeParams.domain === 'actors' }"
					>Actor Revisions</a>
				</li>

				<li class="nav-item">
					<a
						href="/admin/entities"
						class="nav-link nolink"
						:class="{ active: pageContext.routeParams.section === 'entities' }"
					>Entity Health</a>
				</li>
			</ul>

			<button
				class="button"
				@click="initCaches"
			><Icon icon="database-refresh" />Reload caches</button>
		</nav>

		<div class="content">
			<slot />
		</div>
	</div>
</template>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	background: var(--background-base-10);
}

.nav {
	display: flex;
	justify-content: space-between;
	padding: 1rem 1rem .75rem 1rem;
	border-bottom: solid 1px var(--shadow-weak-30);
	margin-bottom: .25rem;
	overflow-x: auto;
}

.nav-items {
	display: flex;
	gap: .5rem;
}

.nav-item {
	display: block;
	flex-shrink: 0;
	background: var(--background-dark-20);
	border-radius: 1rem;
	color: var(--glass-strong-20);
	font-size: .9rem;
	font-weight: bold;
}

.nav-link {
	display: block;
	padding: .5rem 1rem;
	font-weight: bold;

	&.active {
		color: var(--primary);
	}

	&:hover {
		color: var(--primary);
	}
}

.content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1rem;
}
</style>
