{% extends "base.html" %}
{% block head %}
<script defer src="/static/vendor/showdown-2.1.0.min.js"></script>
<script defer id="Highlight-script" src="/static/vendor/highlight-11.9.0.min.js"></script>
<script async id="MathJax-script" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-chtml.min.js"></script>
<script async id="GraphViz-script" src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.8.2/viz.js"></script>
{% endblock %}
{% block content %}
<div
	id="blog-root"
	class="blog-root"
	data-content-base="{{ content_base }}"
	data-manifest="{{ manifest_path }}"
	data-blog-url="{{ blog_url }}"
>
	<h1 class="page-title d-flex align-items-center gap-2 flex-wrap mb-3">
		<a href="{{ project_url }}" class="text-reset">{{ project }}</a>
		<span class="text-muted">/</span>
		<span>blog</span>
	</h1>
	<div class="d-flex flex-wrap align-items-center gap-3 mb-3 blog-toolbar">
		<a href="{{ blog_url }}" class="btn btn-sm btn-outline-secondary">Articles</a>
		<div class="blog-search-container flex-grow-1" style="max-width: 28rem;">
			<div class="input-icon w-100">
				<span class="input-icon-addon">
					<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
				</span>
				<input class="form-control blog-search" type="search" placeholder="Search..." aria-label="Search articles" autocomplete="off">
			</div>
			<div class="blog-search-results dropdown-menu" id="blog-search-results" role="listbox"></div>
		</div>
	</div>
	<div id="article" class="blog-article markdown-body"></div>
</div>
{% endblock %}
{% block scripts %}
<script type="module" src="/static/blog.js"></script>
{% endblock %}