{% import "_imports/blog.html" as blog %}
{% import "_imports/toc.html" as tc %}
{% extends "_layouts/base.html" %}

{% block head %}
{{ blog.feedHeaders() }}
<style>
    .tag-list > * {
        padding-right: 0.3em;
    }
</style>
{% endblock %}

{% block main %}
<h1>{{ post.title }}</h1>

{% if post.description %}
<p class="h3">{{ post.description }}</p>
{% endif %}

<hr>

<div style="margin-bottom: 1em;"></div>
{{ content | safe }}

<center style="margin-top: 2em;">
    <noscript>
        <div>
            <p>Thoughts? Corrections? Questions?<br>Drop me a message at <code>hello at this domain</code>!</p>
        </div>
    </noscript>
    <div id="comment-container" style="display: none">
        <p>Thoughts? Corrections? Questions?</p>
        <a id="comment-button" class="button-grey h3" href="overwritten by JS">Comment via email!</a>
    </div>
</center>

<script>
    document.getElementById("comment-button").href = "mailto:" + unscramble(scrambledEmailAddr, keyForEmailAddr) + "?subject=Re%3A%20{{ post.title | urlencode }}";
    document.getElementById("comment-container").style.display = "block";
</script>
{% endblock %}

{% block aside %}
<p>
    Published: {{ post.publishedDate | fmtdate }}
    {% if post.updatedDate %}
        {% set comma = joiner(", ") %}
        <br>Updated: {% for d in post.updatedDate %}{{ comma() }}{{ d | fmtdate }}{% endfor %}
    {% endif %}
    {% if post.tags | length > 0 %}<br>Tags: 
        <span class="tag-list">{% for tag in post.tags %}<a href="/blog/tags/{{ tag }}/"><span class="pill">{{ tag }}</span></a>{% endfor %}</span>
    {% endif %}
</p>

{% if toc %}
    {{ tc.render(toc) }}
{% endif %}

{% if post.links %}
    {% if post.links.hackernews %}
        <a href="{{ post.links.hackernews }}" title="Discuss on Hacker News"><img style="filter: grayscale(100%);" src="/assets/img/graphics/y18.svg" alt="Hacker News Logo"></a>
    {% endif %}
{% endif %}
{% endblock %}
