<html>

<head>
	<title>Webmention Server with Vouch</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
	<script src="https://unpkg.com/htmx.org@1.9.10"></script>
	<style>
	.copyable {
		cursor: pointer;
		position: relative;
	}
	.copyable:hover {
		background-color: var(--code-background-hover, #f0f0f0);
	}
	.copyable.copied::after {
		content: "Copied!";
		position: absolute;
		top: 0.5em;
		right: 0.5em;
		font-size: 0.8em;
		color: green;
	}
	</style>
	<script>
	document.addEventListener('DOMContentLoaded', () => {
		document.querySelectorAll('pre.copyable').forEach(el => {
			el.addEventListener('click', async () => {
				await navigator.clipboard.writeText(el.textContent);
				el.classList.add('copied');
				setTimeout(() => el.classList.remove('copied'), 1500);
			});
		});
	});
	</script>
</head>

<body hx-get="/" hx-trigger="every 4s">
	<main class="container">
		<h1>Webmention Server with Vouch Support</h1>
		<p>This server demonstrates Webmention processing with Vouch anti-spam validation.</p>
		{% block content %}{% endblock %}
	</main>
</body>

</html>