<script lang="ts">
	import '$lib/app.scss';
	import '$lib/blog.scss';

	import Footer from '$lib/components/footer.svelte';
	import * as publish from '$lib/publish';
	import FormattedDate from '$lib/components/formatted_date.svelte';
	import Head from '$lib/components/head.svelte';

	import type { Article } from '$lib/article';
	export let data: Article;
</script>

<svelte:head>
	<title>{data.title} | Blog | HareWorks</title>
	<meta property="og:title" content={data.title + '- HareWorks'} />
	<!-- <meta property="og:description" content={data.description} /> -->
	<meta property="og:image" content={data.image} />
	<meta property="og:type" content="article" />
	<meta property="article:published_time" content={data.released_at.toISOString()} />
	{#if data.updated_at}
		<meta property="article:modified_time" content={data.updated_at.toISOString()} />
	{/if}
	<meta property="article:author" content="HareWorks" />
	<meta property="article:section" content="Blog" />
	<meta property="article:tag" content={data.tags.join(',')} />
	<meta name="robots" content={data.publish as publish.Publish} />
</svelte:head>

<!-- <div class="back">
    <img src={data.image} alt="" />
</div> -->
<div class="container">
	<main>
		<div class="title">
			<h1>{data.title}</h1>
			<div class="meta">
				<span>
					released <FormattedDate date={data.released_at} />
					{#if data.updated_at}<br />
						updated <FormattedDate date={data.updated_at} />
					{/if}
				</span>
				<span>
					<a href="/category/{data.category}"
						>{data.category[0].toUpperCase() + data.category.slice(1)}</a
					>
					{#each data.tags as tag}
						<a href={`/search?tag=${tag}`}>{tag}</a>
					{/each}
				</span>
			</div>
		</div>
		<div class="panel">
			<div class="document">
				<slot />
			</div>
			<Footer />
		</div>
	</main>
</div>

<style lang="scss">
	:global(body) {
		overflow: hidden;
		background-color: var(--background-primary);
		background-size: cover;
		background-blend-mode: overlay;
	}
	.container {
		overflow: hidden;
		width: 100vw;
		height: 100dvh;
		backdrop-filter: blur(2px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	.back {
		position: fixed;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		color: white;
		filter: brightness(0.8) grayscale(0.5);
	}
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	main {
		border: 1px solid var(--line-primary);
		border-top: none;
		border-bottom: none;
		box-sizing: border-box;
		color: white;
		min-height: 100%;
		padding: 20px;
		padding-top: 100px;
		width: 1000px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
	.title {
		h1 {
			font-size: 2rem;
			text-align: center;
			margin: 0;
			padding: 12px 100px 12px 0;
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.meta {
			display: flex;
			justify-content: space-between;
			padding: 0 20px;
			font-size: 0.8rem;
			span {
				opacity: 0.6;
			}
			a {
				margin-left: 5px;
				padding: 0 5px;
				color: inherit;
				text-decoration: none;
				&:hover {
					text-decoration: underline;
				}
				&:first-child {
					&::before {
						content: '🗀 ';
					}
					&::after {
						content: '|';
						margin-left: 15px;
					}
				}
			}
		}
	}
	.panel {
		flex: 1;
		background-color: var(--background-primary);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	@media (max-width: 1000px) {
		.container {
			width: 100%;
		}
		.title {
			h1 {
				padding: 8px 20px;
			}
		}
	}
</style>
