<script lang="ts">
	import LatestPosts from '$lib/card-collections/LatestPosts.svelte';
	import Projects from '$lib/card-collections/Projects.svelte';
	import Header from '$lib/header.svelte';
	import PostTag from '$lib/posts/PostTag.svelte';
	import type { Article } from '$lib/posts/types';
	import { afterUpdate } from 'svelte';

	export let data: any;

	let post: Article;

	$: post = data.data;

	afterUpdate(() => {
		const codeBlocks = document.querySelectorAll('article pre');
		codeBlocks.forEach((codeBlock) => {
			const copyButton = document.createElement('button');
			copyButton.textContent = '📋 Copy code';
			copyButton.classList.add('article-code-copy-button-32984456');

			copyButton.addEventListener('click', () => {
				const codeText = codeBlock.textContent || '';
				const trimmedCodeText = codeText.replace(copyButton.textContent || '', '');

				navigator.clipboard
					.writeText(trimmedCodeText)
					.then(() => {
						console.log('Copied code to clipboard');
					})
					.catch((error) => {
						console.error(
							'Error copying code to clipboard, this may be due to privacy settings in your browser',
							error
						);
					});
			});

			codeBlock.appendChild(copyButton);
		});
	});
</script>

<Header title={post.title} />

<div class="column-container">
	<div class="main-column">
		<article>
			<p>
				{#each post.tags as tag}
					<PostTag {tag} />
				{/each}<br /><br />
				Published: {post.date.toLocaleDateString()}<br />
				Author: {post.author}
			</p>
			<content>
				{@html post.content}
			</content>
		</article>
	</div>

	<div class="side-column">
		<h2>Projects</h2>

		<LatestPosts />
	</div>
</div>

<style>
	.column-container {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.main-column {
		margin-left: 10px;
		margin-right: 10px;
	}

	@media (min-width: 768px) {
		.column-container {
			flex-direction: row; /* Switch to row layout for larger screens */
		}
		.main-column {
			flex: 2; /* Take up 2/3 of the available width */
		}
		.side-column {
			flex: 1; /* Take up 1/3 of the available width */
			padding-top: 70px;
		}
	}

	:global(article pre) {
		position: relative;
		text-align: left;
		background-color: rgb(46, 46, 46);
		color: white;
		padding: 15px;
		padding-top: 30px;
		padding-bottom: 30px;
		font-family: 'Courier New', Courier, monospace;
		border-radius: 8px;
		width: 90%;
		max-width: 800px;
		margin: auto;
		white-space: pre;
		overflow: auto;
	}

	:global(.article-code-copy-button-32984456) {
		position: absolute;
		top: 10px;
		right: 15px;
		color: white;
		background: none;
		border: none;
		cursor: pointer;
	}

	:global(.post-inline-image-546543) {
		max-width: 100%;
	}
</style>
