{% extends "layout/default.html" %}

{% block head -%}

{% match post.metadata.short_desc %}
	{% when Some with (val) %}
		<meta property="og:type" content="article">
		<meta property="og:description" content="{{ val }}">
	{% when None %}
		<meta property="og:type" content="website">
		<meta property="og:description" content="The outer part of a shadow is called the penumbra.">
{% endmatch %}

{%- endblock %}

{% block image %}
{% match post.metadata.card_image_path %}
	{% when Some with (path) %}
		<meta property="twitter:image" content="https://{{ Self::domain() }}{{ path }}">
		<meta property="og:image" content="https://{{ Self::domain() }}{{ path }}">
	{% when None %}
		<meta property="twitter:image" content="https://{{ Self::domain() }}/shadowfacts.png">
		<meta property="og:image" content="https://{{ Self::domain() }}/shadowfacts.png">
{% endmatch %}
{% endblock %}

{% block title %}{{ post.metadata.title }}{% endblock %}

{% block content -%}

<article itemprop="blogPost" itemscope itematype="https://schema.org/BlogPosting">
	<meta itemprop="mainEntityOfPage" content="https://{{ Self::domain() }}{{ self.permalink() }}">
	<h1 class="article-title" itemprop="name headline">
		{% match post.metadata.html_title %}
			{% when Some with (html) %}
				{{ html|safe }}
			{% when None %}
				{{ post.metadata.title }}
		{% endmatch %}
	</h1>
	{% include "includes/article-meta.html" %}
	<div class="article-content" itemprop="articleBody">
		{% match post.metadata.preamble %}
			{% when Some with (html) %}
				{{ html|safe }}
			{% when None %}
		{% endmatch %}
		{{ post.content.html()|safe }}
	</div>
	<details id="comments-container">
		<summary>
			<h2 id="comments-container-title">Comments</h2>
		</summary>
		<p class="comments-info">
			Comments powered by ActivityPub. To respond to this post, enter your username and instance below, or copy its URL into the search interface for client for Mastodon, Pleroma, or other compatible software.
			<a href="/2019/reincarnation/#activity-pub">Learn more</a>.
		</p>
		<form id="remote-interact" action="/interact" method="POST">
			<span>Reply from your instance:</span>
			<input type="hidden" name="permalink" value="{{ post.comments_permalink() }}">
			<!-- name needs to be exactly this to get the browser to use the same completions as mastodon -->
			<input type="text" placeholder="Enter your user@domain" required id="acct" name="remote_follow[acct]">
			<input type="submit" value="Interact">
		</form>
		<noscript>
			<p id="comments-js-warning">JavaScript is required to display comments.</p>
		</noscript>
	</details>
</article>

<script>
	const permalink = "{{ post.comments_permalink() }}";
</script>
<script src="/js/comments.js" async></script>

{%- endblock %}