<script setup>
import Cookies from 'js-cookie';
import { inject, ref, useId } from 'vue';

import markdownTemplate from '#/assets/markdown.yaml?raw';
import defaultTemplate from '#/assets/summary.yaml?raw';
import ActorTile from '#/components/actors/tile.vue';
import Campaign from '#/components/campaigns/campaign.vue';
import Banner from '#/components/media/banner.vue';

import MovieTile from '#/components/movies/tile.vue';
import Chapters from '#/components/scenes/chapters.vue';
import SerieTile from '#/components/series/tile.vue';
import Heart from '#/components/stashes/heart.vue';
import events from '#/src/events.js';
import getPath from '#/src/get-path.js';
import { formatDate, formatDuration } from '#/utils/format.js';

import processSummaryTemplate from '#/utils/process-summary-template.js';
import verifyAbility from '#/utils/verify-ability.js';

const cookies = Cookies.withConverter({
	write: (value) => value,
});

const {
	pageProps,
	campaigns,
	user,
	assets,
	env,
} = inject('pageContext');

const { scene } = pageProps;

const avatarFrameSize = 36;
const avatarMargin = 2.75;
const avatarVerticalOffset = 0.1; // fraction of crop size; positive shifts crop down (frames more chin, less forehead)
const fallbackZoom = 2.25; // zoom level when no biometrics are available
const editTemplatesTooltipId = useId();
const copySummaryTooltipId = useId();

function clampCrop(crop) {
	const size = Math.min(crop.size, crop.imageWidth, crop.imageHeight);

	const maxLeft = Math.max(0, crop.imageWidth - size);
	const maxTop = Math.max(0, crop.imageHeight - size);

	return {
		...crop,
		size,
		left: Math.min(Math.max(crop.left, 0), maxLeft),
		top: Math.min(Math.max(crop.top, 0), maxTop),
	};
}

function getFaceCrop(biometrics) {
	if (!biometrics) {
		return null;
	}

	const {
		box,
		leftEye,
		rightEye,
		mouth,
		width: imageWidth,
		height: imageHeight,
	} = biometrics;

	if (!imageWidth || !imageHeight) {
		return null;
	}

	if (leftEye && rightEye && mouth) {
		const avgEyeY = (leftEye[1] + rightEye[1]) / 2;
		const avgEyeX = (leftEye[0] + rightEye[0]) / 2;

		const eyesToMouth = mouth[1] - avgEyeY;

		const centerX = (avgEyeX + mouth[0]) / 2;
		const centerY = (avgEyeY + mouth[1]) / 2;

		const size = eyesToMouth * avatarMargin;

		return clampCrop({
			left: centerX - size / 2,
			top: centerY - size / 2 - size * avatarVerticalOffset,
			size,
			imageWidth,
			imageHeight,
		});
	}

	// fallback to the plain detection box if landmarks are missing
	if (box) {
		const [x, y, width, height] = box;
		const size = Math.max(width, height);

		return clampCrop({
			left: x + width / 2 - size / 2,
			top: y + height / 2 - size / 2 - size * avatarVerticalOffset,
			size,
			imageWidth,
			imageHeight,
		});
	}

	return null;
}

function getFallbackCrop(imageWidth, imageHeight) {
	const size = Math.min(imageWidth, imageHeight) / fallbackZoom;

	return clampCrop({
		left: (imageWidth - size) / 2, // centered horizontally
		top: 0, // anchored to top
		size,
		imageWidth,
		imageHeight,
	});
}

function getAvatarBackgroundStyle(actorAvatar) {
	if (!actorAvatar) {
		return null;
	}

	const avatarUrl = getPath(actorAvatar, 'thumbnail');
	const crop = getFaceCrop(actorAvatar.biometrics)
		|| (actorAvatar.width && actorAvatar.height ? getFallbackCrop(actorAvatar.width, actorAvatar.height) : null);

	if (!crop) {
		// no dimensions available at all — last-resort plain cover
		return {
			backgroundImage: `url(${avatarUrl})`,
			backgroundSize: 'cover',
			backgroundPosition: 'center',
			backgroundRepeat: 'no-repeat',
		};
	}

	const scale = avatarFrameSize / crop.size;

	const backgroundWidth = crop.imageWidth * scale;
	const backgroundHeight = crop.imageHeight * scale;
	const backgroundPositionX = -(crop.left * scale);
	const backgroundPositionY = -(crop.top * scale);

	return {
		backgroundImage: `url(${avatarUrl})`,
		backgroundSize: `${backgroundWidth}px ${backgroundHeight}px`,
		backgroundPosition: `${backgroundPositionX}px ${backgroundPositionY}px`,
		backgroundRepeat: 'no-repeat',
	};
}

const actorsById = Object.fromEntries(scene.actors.map((actor) => {
	const curatedActor = {
		...actor,
		avatarStyle: getAvatarBackgroundStyle(actor.avatar),
	};

	return [actor.id, curatedActor];
}));

const tags = Array.from(scene.tags
	.reduce((acc, tag) => {
		const accTag = acc.get(tag.id);

		if (accTag && tag.actorId) {
			return acc.set(tag.id, {
				...tag,
				actors: [...accTag.actors, actorsById[tag.actorId]]
					.filter(Boolean) // shouldn't happen, but in case the tag actor isn't a scene actor
					.toSorted((actorA, actorB) => actorA.name.localeCompare(actorB.name)),
			});
		}

		if (accTag) {
			// shouldn't happen, but account for it
			return acc;
		}

		if (tag.actorId) {
			return acc.set(tag.id, {
				...tag,
				actors: [actorsById[tag.actorId]].filter(Boolean),
			});
		}

		return acc.set(tag.id, {
			...tag,
			actors: [],
		});
	}, new Map())
	.values());

const showSummaryDialog = ref(false);

const qualities = {
	4320: '8K',
	2280: '5K',
	2160: '4K',
	1440: 'Quad HD',
	1080: 'Full HD',
	720: 'HD',
	576: 'PAL VHS',
	540: 'qHD',
	480: 'VGA',
	360: 'nHD',
};

const summary = ref(null);
const selectedTemplate = ref(null);

const templates = [
	{
		id: 0,
		name: 'traxxx',
		template: defaultTemplate,
	},
	{
		id: 1,
		name: 'markdown',
		template: markdownTemplate,
	},
	...(assets?.templates || []),
];

function selectTemplate(templateId, allowFallback = true) {
	try {
		const targetTemplate = templates.find((userTemplate) => userTemplate.id === templateId);

		if (!targetTemplate && !allowFallback) {
			return;
		}

		const template = targetTemplate || templates[0];

		summary.value = processSummaryTemplate(template.template, scene, env);
		selectedTemplate.value = template.id;

		cookies.set('selectedTemplate', String(templateId));
	}
	catch (error) {
		console.error(`Failed to process summary template: ${error.message}`);
		summary.value = null;
	}
}

selectTemplate(env.selectedTemplate);

function copySummary() {
	navigator.clipboard.writeText(summary.value);

	events.emit('feedback', {
		type: 'success',
		message: 'Summary copied to clipboard',
	});
}
</script>

<template>
	<div class="page">
		<div class="content">
			<Banner
				:release="scene"
			/>

			<div class="meta">
				<div class="entity">
					<Link
						v-if="scene.channel"
						:href="`/${scene.channel.type}/${scene.channel.slug}`"
						class="channel-link entity-link nolink"
					>
						<img
							v-if="scene.channel.hasLogo"
							:src="scene.channel.isIndependent
								|| scene.channel.type === 'network'
								|| !scene.network
								? `/logos/${scene.channel.slug}/thumbs/network.png`
								: `/logos/${scene.network.slug}/thumbs/${scene.channel.slug}.png`"
							class="channel-logo entity-logo"
						>

						<span
							v-else
							class="name"
						>{{ scene.channel.name }}</span>
					</Link>

					<span
						v-if="!scene.channel.isIndependent && scene.channel.type !== 'network' && scene.network"
						class="network-container"
					>
						on
						<Link
							:href="`/${scene.network.type}/${scene.network.slug}`"
							class="network-link entity-link nolink"
						>
							<img
								v-if="scene.network.hasLogo"
								:src="`/logos/${scene.network.slug}/thumbs/network.png`"
								class="network-logo entity-logo"
							>

							<span
								v-else
								class="name"
							>{{ scene.network.name }}</span>
						</Link>
					</span>
				</div>

				<Link
					:href="verifyAbility(user, 'plainUrls') ? scene.url : scene.watchUrl"
					:title="scene.date ? formatDate(scene.date.toISOString(), 'y-MM-dd hh:mm') : `Release date unknown, added ${formatDate(scene.createdAt, 'y-MM-dd')}`"
					target="_blank"
					class="date nolink"
					:class="{ nodate: !scene.date }"
					:data-umami-event="scene.affiliate ? 'scene-date-click-aff' : 'scene-date-click'"
					:data-umami-event-aff-id="scene.affiliate?.id"
					:data-umami-event-scene-id="scene.id"
				>
					<time
						:datetime="scene.effectiveDate.toISOString()"
						class="ellipsis compact-hide"
					>{{ formatDate(scene.effectiveDate, {
						month: 'MMMM y',
						year: 'y',
					}[scene.datePrecision] || 'MMMM d, y') }}</time>

					<time
						:datetime="scene.effectiveDate.toISOString()"
						class="ellipsis compact-show"
					>{{ formatDate(scene.effectiveDate, {
						month: 'MMM y',
						year: 'y',
					}[scene.datePrecision] || 'MMM d, y') }}</time>
				</Link>
			</div>

			<div class="header">
				<h2
					v-if="scene.title"
					:title="scene.title"
					class="title"
				>{{ scene.title }}</h2>

				<h2
					v-else-if="scene.actors.length > 0"
					class="title notitle"
				>Scene featuring {{ scene.actors.map((actor) => actor.name).join(', ') }}</h2>

				<h2
					v-else
					class="title notitle"
				>No title</h2>

				<div class="actions">
					<Heart
						domain="scenes"
						:item="scene"
						:show-secondary="true"
						:show-alert="scene.isUpcoming"
					/>

					<div class="view">
						<!--
						<button
							v-if="scene.photos.length > 0"
							class="button view nolink"
						>View photos</button>
						-->

						<a
							v-if="scene.watchUrl"
							:href="scene.watchUrl"
							target="_blank"
							rel="noopener"
							class="button button-primary watch nolink"
							:data-umami-event="scene.affiliate ? 'watch-click-aff' : 'watch-click'"
							:data-umami-event-scene-id="`${(scene.channel || scene.network).slug}:scene:${scene.id}`"
							:data-umami-event-aff-id="scene.affiliate && `aff:${scene.affiliate.id}`"
							:data-umami-event-channel="scene.channel?.slug"
							:data-umami-event-network="scene.network?.slug"
						>Watch full video</a>
					</div>
				</div>
			</div>

			<div class="info">
				<ul
					v-if="scene.actors.length > 0"
					class="actors nolist nobar"
				>
					<li
						v-for="actor in scene.actors"
						:key="`actor-${actor.id}`"
						class="actor"
					>
						<ActorTile :actor="actor" />
					</li>
				</ul>

				<ul class="tags nolist">
					<li
						v-for="tag in tags"
						:key="`tag-${tag.id}`"
						class="tag"
						:class="{ 'has-actors': tag.actors.length > 0 }"
					>
						<Link
							:href="`/tag/${tag.slug}`"
							class="tag-name nolink"
						>{{ tag.name }}</Link>

						<span
							v-if="tag.actors.length > 0"
							v-tooltip="{
								content: `${tag.name} for ${new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(tag.actors.map((actor) => actor.name))}`,
								triggers: ['hover', 'click'],
								ariaId: `tag-actors-${tag.id}`,
							}"
							class="tag-actors"
						>
							<template
								v-for="tagActor in tag.actors"
							>
								<div
									v-if="tagActor.avatar"
									:key="`tagactor-${tagActor.id}`"
									class="tag-avatar"
									:style="tagActor.avatarStyle"
								/>

								<Icon
									v-else
									:key="`tagactor-${tagActor.id}`"
									icon="star-full"
									class="tag-star"
								/>
							</template>
						</span>
					</li>
				</ul>

				<div
					v-if="scene.movies.length > 0 || scene.series.length > 0"
					class="section"
				>
					<h3 class="heading">Part of</h3>

					<div class="movies">
						<MovieTile
							v-for="movie in scene.movies"
							:key="`movie-${movie.id}`"
							:movie="movie"
							:show-details="false"
						/>
					</div>

					<div class="series">
						<SerieTile
							v-for="serie in scene.series"
							:key="`serie-${serie.id}`"
							:serie="serie"
							:details="false"
						/>
					</div>
				</div>

				<div
					v-if="scene.duration || scene.directors.length > 0 || scene.shootId || scene.qualities.length > 0"
					class="section details"
				>
					<div
						v-if="scene.directors.length > 0"
						class="detail"
					>
						<h3 class="heading">Director</h3>
						{{ scene.directors.map((director) => director.name).join(', ') }}
					</div>

					<div
						v-if="scene.duration"
						class="detail"
					>
						<h3 class="heading">Duration</h3>
						{{ formatDuration(scene.duration) }}
					</div>

					<div
						v-if="scene.shootId"
						class="detail"
					>
						<h3 class="heading">Shoot</h3>
						{{ scene.shootId }}
					</div>

					<time
						v-if="scene.productionDate"
						:datetime="formatDate(scene.productionDate, 'yyyy-MM-dd')"
						:title="formatDate(scene.productionDate, 'yyyy-MM-dd')"
						class="detail"
					>
						<h3 class="heading">Shoot date</h3>
						{{ formatDate(scene.productionDate, 'MMMM d, yyyy') }}
					</time>

					<div
						v-if="scene.studio"
						class="detail"
					>
						<h3 class="heading">Studio</h3>

						<a
							:href="`/studio/${scene.studio.slug}`"
							class="link"
						>{{ scene.studio.name }}</a>
					</div>

					<div
						v-if="scene.qualities.length > 0"
						class="detail"
					>
						<h3 class="heading">Quality</h3>

						<template v-if="qualities[scene.qualities[0]]">{{ qualities[scene.qualities[0]] }} ({{ scene.qualities[0] }}p)</template>
						<template v-else>{{ scene.qualities[0] }}p</template>
					</div>

					<div
						v-if="scene.photoCount"
						class="detail"
					>
						<h3 class="heading">Photos</h3>
						{{ scene.photoCount }}
					</div>
				</div>

				<div
					v-if="scene.description"
					class="section"
				>
					<h3 class="heading">Description</h3>

					<p class="description">{{ scene.description }}</p>
				</div>

				<section
					v-if="scene.chapters.length > 0"
					class="section"
				>
					<h3 class="heading">Chapters</h3>

					<Chapters
						:chapters="scene.chapters"
						class="section"
					/>
				</section>

				<div
					v-if="campaigns?.scene"
					class="section"
				>
					<Campaign
						:campaign="campaigns.scene"
					/>
				</div>

				<div class="section details">
					<div class="detail">
						<h3 class="heading">Added</h3>

						<span>
							<span class="added-date">{{ formatDate(scene.createdAt, 'yyyy-MM-dd') }}</span>
							<span
								:title="`Batch ${scene.createdBatchId}`"
								class="added-batch"
							>#{{ scene.createdBatchId }}</span>
						</span>
					</div>

					<div
						v-if="scene.comment"
						class="detail"
					>
						<h3 class="heading">Comment</h3>
						{{ scene.comment }}
					</div>
				</div>

				<div class="section summary">
					<h3 class="heading">Summary</h3>

					<div class="detail">
						<input
							class="input"
							:value="summary"
							@focus="$event.target.select()"
						>

						<a
							v-if="user"
							class="icon-link"
							target="_blank"
							:href="`/user/${user.username}/templates?t=${selectedTemplate}`"
						>
							<Icon
								v-tooltip="{ content: 'Edit templates', ariaId: editTemplatesTooltipId }"
								icon="pencil5"
								class="edit"
								@click="showSummaryDialog = true"
							/>
						</a>

						<Icon
							v-tooltip="{ content: 'Copy to clipboard', ariaId: copySummaryTooltipId }"
							icon="copy"
							class="copy"
							@click="copySummary"
						/>
					</div>

					<ul
						v-if="templates.length > 0"
						class="nolist templates"
					>
						<Icon icon="markup" />

						<li
							v-for="userTemplate in templates"
							:key="`template-${userTemplate.id}`"
							class="template"
							:class="{ selected: userTemplate.id === selectedTemplate }"
							@click="selectTemplate(userTemplate.id)"
						>{{ userTemplate.name }}</li>
					</ul>
				</div>

				<div
					v-if="user && scene.fingerprints.length > 0"
					class="section fingerprints"
				>
					<h3 class="heading">Fingerprints</h3>

					<div class="fingerprints-container">
						<table class="fingerprints-table">
							<thead class="fingerprints-head">
								<tr class="fingerprints-header">
									<th class="fingerprints-heading">Hash</th>
									<th class="fingerprints-heading">Type</th>
									<th class="fingerprints-heading">Duration</th>
									<th class="fingerprints-heading">Submissions</th>
									<th class="fingerprints-heading">Source</th>
									<th class="fingerprints-heading">First added</th>
								</tr>
							</thead>

							<tbody class="fingerprints-body">
								<tr
									v-for="fingerprint in scene.fingerprints"
									:key="`fingerprint-${fingerprint.hash}`"
									class="fingerprint"
								>
									<td class="fingerprint-field fingerprint-hash">{{ fingerprint.hash }}</td>
									<td class="fingerprint-field fingerprint-type">{{ fingerprint.type.toUpperCase() }}</td>
									<td class="fingerprint-field fingerprint-duration">{{ formatDuration(fingerprint.duration) }}</td>
									<td class="fingerprint-field fingerprint-submission">{{ fingerprint.submissions }}</td>
									<td class="fingerprint-field fingerprint-source">{{ fingerprint.source || 'traxxx' }}</td>
									<td class="fingerprint-field fingerprint-date">{{ formatDate(fingerprint.createdAt, 'yyyy-MM-dd') }}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

				<div
					class="scene-actions section"
				>
					<a
						v-if="user && user.role !== 'user'"
						:href="`/scene/edit/${scene.id}/${scene.slug}`"
						target="_blank"
						class="link"
					>Edit scene</a>

					<a
						:href="`/scene/revs/${scene.id}/${scene.slug}`"
						target="_blank"
						class="link"
					>Revisions</a>
				</div>
			</div>
		</div>
	</div>
</template>

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

.content {
	width: 100%;
	max-width: 1200px;
	margin: 0 1rem;
	display: flex;
	flex-direction: column;
}

.meta {
	display: flex;
	height: 3.25rem;
	justify-content: space-between;
	align-items: stretch;
	background: var(--grey-dark-40);
	border-radius: 0 0 .5rem .5rem;
	color: var(--text-light);
	overflow: hidden;
}

.entity {
	display: flex;
	align-items: center;
	font-weight: bold;
	color: var(--highlight);
}

.entity-link {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: .5rem 1rem;
	height: 100%;
	color: var(--text-light);
}

.entity-logo {
	max-width: 15rem;
	max-height: 100%;
}

.network-container {
	height: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.date {
	padding: 1rem;
	font-weight: bold;
}

.nodate {
	color: var(--highlight);
	font-weight: normal;
}

.info,
.header {
	border-top: none;
	border-bottom: none;
}

.info {
	padding: 0;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem .5rem 1rem .5rem;
}

.title {
	margin: .25rem .5rem .5rem 0;
	line-height: 1.25;

	/*
	display: -webkit-box;

	&:not(:active) {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	*/
}

.notitle {
	color: var(--grey-dark-10);
}

.actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;

	.button {
		flex-shrink: 0;
		padding: .75rem;
	}

	.button:not(:last-child) {
		margin-right: .5rem;
	}
}

.bookmarks {
	margin-right: .75rem;
}

.view {
	display: flex;
}

.watch.button {
	padding: .75rem 2rem;
	margin-left: .25rem;
	font-size: 1rem;
}

.actors,
.tags {
	margin-bottom: 1rem;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.tags-section {
	display: inline-flex;
	gap: .25rem;
}

.tags-actor {
	margin-right: .5rem;
	font-weight: bold;
}

.actors {
	display: flex;
	flex-grow: 1;
	gap: .25rem;
	overflow-x: auto;

	.actor {
		width: 9rem;
		flex-shrink: 0;
	}
}

.tag {
	display: flex;
	align-items: center;
	border-radius: .25rem;
	background: var(--background);
	box-shadow: 0 0 3px var(--shadow-weak-30);
	overflow: hidden;

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

.tag-name {
	display: inline-flex;
	align-items: center;
	padding: .5rem;

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

.tag-actors {
	display: flex;
	align-items: center;
	padding: 0 .1rem;
}

.tag-avatar {
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	justify-content: center;
	margin: 0.1rem .05rem;
	border-radius: .25rem;
	position: relative;
	overflow: hidden;

	&::after {
		content: '';
		position: absolute;
		inset: 0;
		box-shadow: inset 0 0 3px var(--shadow-weak-20);
		border-radius: inherit;
		pointer-events: none; /* so it doesn't block hover/click on the image */
	}
}

.tag-star {
	padding: .625rem .625rem;
}

.tag-star {
	height: 100%;
	fill: var(--primary);
}

.movies,
.series {
	display: grid;
	flex-grow: 1;
	gap: .25rem;
}

.movies {
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

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

.section {
	margin-bottom: 1rem;
}

.heading {
	color: var(--primary);
	margin: 0 0 .5rem 0;
	font-size: .9rem;
}

.details {
	display: flex;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
}

.detail {
	display: flex;
	flex-direction: column;
}

.description {
	font-size: 1rem;
	line-height: 1.5;
	text-align: justify;
	margin: 0;
}

.added-batch {
	color: var(--glass-weak-10);
	margin-left: .25rem;
}

.summary {
	.detail {
		display: flex;
		align-items: stretch;
		flex-direction: row;
	}

	.input {
		flex-grow: 1;
	}

	.detail .icon {
		height: auto;
		padding: 0 .5rem 0 .75rem;
		fill: var(--glass);

		&:hover {
			cursor: pointer;
			fill: var(--primary);
		}
	}
}

.templates {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem 0;
	margin-top: .5rem;

	.icon {
		width: 1.2rem;
		height: 1.2rem;
		margin-right: .5rem;
		fill: var(--glass-weak-10);
	}
}

.template {
	padding: .25rem .5rem;
	border-radius: .25rem;
	cursor: pointer;

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

	&.selected {
		background: var(--primary);
		color: var(--text-light);
	}
}

.scene-actions {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-top: 1rem;
}

.icon-link {
	display: flex;
	height: auto;
}

.compact-show {
	display: none;
}

.fingerprints {
	margin-top: 1.5rem;
}

.fingerprints-container {
	max-height: 10rem;
	overflow-y: auto;
	resize: vertical;

	&[style*="height"] {
		max-height: unset;
	}
}

.fingerprints-table {
	width: 100%;
}

.fingerprints-head {
	background: var(--background-base-10);
	position: sticky;
	top: 0;
}

.fingerprints-heading {
	color: var(--glass);
	font-weight: normal;
	padding: .25rem;
	text-align: left;
}

.fingerprint {
	&:nth-child(2n + 1) {
		background: var(--glass-weak-50);
	}

	&:hover {
		background: var(--glass-weak-40);
	}
}

.fingerprint-field {
	padding: .25rem;
}

.fingerprint-hash {
	user-select: all;
}

@media(--compact) {
	.content {
		margin: 0;
	}

	.info {
		margin: 0 .75rem;
	}

	.network-container {
		display: none;
	}

	.header {
		flex-direction: column-reverse;
	}

	.actions {
		width: 100%;
		justify-content: space-between;
		margin-bottom: 1.25rem;
	}

	.title {
		width: 100%;
		margin-left: 1rem;
		white-space: wrap;
	}

	.meta {
		border-radius: 0;
	}

	.entity-logo {
		max-width: 7.5rem;
	}
}

@media(--small-10) {
	.header {
		padding: 1rem .5rem .5rem .5rem;
	}

	.title {
		margin-left: 1.5rem;
	}

	.info {
		padding: 0 .5rem;
	}

	.actors {
		.actor {
			width: 9rem;
		}
	}

	.series {
		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	}
}

@media(--small-50) {
	.date {
		font-size: .9rem;
	}
}

@media(--small-60) {
	.compact-show {
		display: flex;
	}

	.compact-hide {
		display: none;
	}
}
</style>
