<template>
	<div class="serie-tile">
		<a
			:href="`/serie/${serie.id}/${serie.slug}`"
			class="poster-container"
		>
			<img
				v-if="serie.poster"
				:src="getPath(serie.poster, 'thumbnail')"
				:style="{ 'background-image': `url(${getPath(serie.poster, 'lazy')})` }"
				class="poster"
				loading="lazy"
			>
		</a>

		<div class="tile-info">
			<a
				:href="`/serie/${serie.id}/${serie.slug}`"
				class="title nolink"
			>{{ serie.title }}</a>
		</div>
	</div>
</template>

<script setup>
import getPath from '#/src/get-path.js';

defineProps({
	serie: {
		type: Object,
		default: null,
	},
});
</script>

<style scoped>
.serie-tile {
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 3px var(--shadow-weak-30);
	border-radius: .25rem;
	overflow: hidden;
	background: var(--background-base);

	&:hover {
		box-shadow: 0 0 3px var(--shadow-weak-20);

		:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
			fill: var(--text-light);
		}
	}

	&.unstashed {
		opacity: .5;
	}
}

.poster-container {
	aspect-ratio: 16/9;
	overflow: hidden;
}

.poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-position: center;
}

.tile-info {
	display: flex;
	flex-shrink: 0;
}

.title {
	width: 100%;
	padding: .25rem .5rem;
	flex-shrink: 0;
}
</style>