---
import Default from '@astrojs/starlight/components/PageTitle.astro';

const { id } = Astro.locals.starlightRoute.entry;
const markdownPath = `/${id === 'index' ? 'index' : id}.md`;
---

<div class="title-row">
	<Default />
	<a class="md-link" href={markdownPath} title="This page as Markdown, for agents">Markdown</a>
</div>

<style>
	.title-row {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.5rem 1rem;
	}
	.md-link {
		font-family: var(--sl-font-mono);
		font-size: var(--sl-text-xs);
		color: var(--sl-color-gray-3);
		border: 1px solid var(--sl-color-gray-5);
		border-radius: 0.375rem;
		padding: 0.25rem 0.5rem;
		text-decoration: none;
	}
	.md-link:hover {
		color: var(--sl-color-white);
		border-color: var(--sl-color-gray-4);
	}
</style>