{% extends "base.html" %}
{% from "macros.html" import page_header %}
{% 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 }}"
>
	{% call page_header(project, "Blog") %}
	<a href="{{ project_url }}" class="btn btn-outline-secondary">Project</a>
	<a href="{{ blog_url }}" class="btn btn-outline-secondary">Articles</a>
	{% endcall %}
	<div class="card">
		<div class="card-body">
			<div class="blog-search-container mb-3" 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 articles" aria-label="Search articles" autocomplete="off">
				</div>
				<div class="blog-search-results dropdown-menu" id="blog-search-results" role="listbox"></div>
			</div>
			<div id="article" class="blog-article markdown-body"></div>
		</div>
	</div>
</div>
{% endblock %}
{% block scripts %}
<script type="module" src="/static/blog.js"></script>
{% endblock %}