<template>
	<div class="page">
		<div class="header">
			<h2 class="title">{{ tag.name }}</h2>
		</div>

		<div class="content">
			<div
				v-if="description"
				class="description"
				v-html="description"
			/>

			<Scenes />
		</div>
	</div>
</template>

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

import Scenes from '#/components/scenes/scenes.vue';

const pageContext = inject('pageContext');
const { tag, description } = pageContext.pageProps;
</script>

<style>
.description .link {
	color: var(--primary);
}
</style>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.content {
	flex-grow: 1;
	overflow-y: auto;
}

.header {
	padding: .5rem 1rem;
	color: var(--text-light);
	background: var(--grey-dark-40);
}

.title {
	margin: 0;
	text-transform: capitalize;
}

.description {
	padding: 0 1rem .5rem 1rem;
	color: var(--text-light);
	background: var(--grey-dark-40);
	line-height: 1.5;
}
</style>
