<template>
	<div class="page">
		<div
			v-for="(tags, category) in categories"
			:key="`category-${category}`"
		>
			<h3 class="category">{{ category }}</h3>

			<ul class="tags nolist">
				<li
					v-for="tag in tags"
					:key="`tag-${tag.slug}`"
					class="tag"
				>
					<div class="thumb-container">
						<a
							:href="`/tag/${tag.slug}`"
							class="tag nolink"
						>
							<img
								v-if="tag.poster"
								:src="`/${tag.poster.thumbnail}`"
								:title="tag.poster.comment"
								class="thumb"
								loading="lazy"
							>
						</a>

						<a
							v-if="tag.poster?.entity"
							:href="`/${tag.poster.entity.type}/${tag.poster.entity.slug}`"
							class="favicon-link"
						>
							<img
								:src="!tag.poster.entity.parent || tag.poster.entity.isIndependent ? `/logos/${tag.poster.entity.slug}/favicon.png` : `/logos/${tag.poster.entity.parent.slug}/favicon.png`"
								:alt="tag.poster.entity.name"
								:title="tag.poster.entity.name"
								class="favicon"
							>
						</a>
					</div>

					<a
						:href="`/tag/${tag.slug}`"
						class="name nolink"
					>{{ tag.name }}</a>
				</li>
			</ul>
		</div>
	</div>
</template>

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

const pageContext = inject('pageContext');
const categories = pageContext.pageProps.tagShowcase;
</script>

<style scoped>
.tags {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem .5rem;
	padding: .75rem 1rem;
}

.category {
	padding: 1rem 1rem 0 1.5rem;
	margin: 0;
	text-transform: capitalize;
	color: var(--shadow);
}

.tag {
	display: flex;
	flex-direction: column;

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

		.thumb {
			box-shadow: 0 0 3px var(--shadow-weak-10);
		}
	}
}

.name {
	padding: .25rem .5rem 0 .5rem;
	text-transform: capitalize;
	font-size: .9rem;
	font-weight: bold;
	color: var(--shadow-strong-10);
}

.thumb-container {
	position: relative;
}

.thumb {
	display: inline-block;
    width: 100%;
	aspect-ratio: 5/3;
	object-fit: cover;
	border-radius: .25rem;
	background-size: cover;
	background-position: center;
    box-shadow: 0 0 3px var(--shadow-weak-20);
}

.favicon-link {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 0;

	&:hover .favicon {
		filter: drop-shadow(0 0 2px var(--shadow-weak-20))
	}
}

.favicon {
	width: 1rem;
	height: 1rem;
	padding: .5rem;
	object-fit: contain;
}

@media(--compact) {
	.tags {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	}
}

@media(--small-30) {
	.tags {
		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	}
}
</style>
