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

import Domains from '#/components/domains/domains.vue';
import Movies from '#/components/movies/movies.vue';
import Scenes from '#/components/scenes/scenes.vue';
import Heart from '#/components/stashes/heart.vue';
import Photos from '#/components/tags/photos.vue';

const pageContext = inject('pageContext');
const { tag, description } = pageContext.pageProps;

const domain = pageContext.routeParams.domain;
</script>

<template>
	<div class="page">
		<div class="header">
			<h2
				:title="`${tag.name} (#${tag.id})`"
				class="title"
			>{{ tag.name }}</h2>

			<Heart
				domain="tags"
				:item="tag"
				class="light"
			/>
		</div>

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

			<Photos
				v-if="tag.poster || tag.photos.length > 0"
				:tag="tag"
			/>

			<Domains
				:path="`/tag/${tag.slug}`"
				:domains="['scenes', 'movies']"
				:domain="domain"
				class="domains-bar"
				:class="{ light: tag.poster || tag.photos.length }"
			/>

			<Scenes v-if="domain === 'scenes'" />
			<Movies v-if="domain === 'movies'" />
		</div>
	</div>
</template>

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

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

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

.header {
	display: flex;
	align-items: center;
	padding: .25rem 1rem;
	margin-bottom: -1px; /* for some reason there's a gap between description */
	color: var(--text-light);
	background: var(--grey-dark-40);
}

.bookmarks {
	margin-left: .5rem;

	:deep(.icon.alert) {
		height: 1.25rem;
		padding: .5rem .5rem .25rem .5rem;
		overflow: hidden;
	}
}

.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;
}

.domains-bar.light {
	background: var(--background-base-10);
	border-bottom: solid 1px var(--shadow-weak-40);
}
</style>
