{% include 'blog_header.html' %}
            <h1 class="post-title">{{ post.title }}</h1>
            <i class="post-date"><span class="datetime">{{ post.date }}</span> {% if post.author | int > 0 %} by {{ post.authorname }} {% endif %}</i>
            <article class="post-content">
                {{ post.content_html | safe }}
            </article>
            
            {% if post_tags %}
            <div class="post-tags" style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #333;">
                <span style="color: #999; font-size: 0.9em;">Tags: </span>
                {% for tag in post_tags %}
                <span class="tag" style="display: inline-block; background-color: #333; color: #eee; padding: 0.2em 0.6em; margin: 0.1em; border-radius: 12px; font-size: 0.8em;">#{{ tag }}</span>
                {% endfor %}
            </div>
            {% endif %}
<div class="flex row small-gap space-between">
    <i class="post-date updated">
    {% if post.updated not in (None, "", "null", "NULL") %}
    {{ _('last-updated') }}: <span class="datetime">{{ post.updated }}</span>
    {% endif %}
    </i>
    <span><span id="likes">{{ post.likes }}</span> <svg id="like" width="20px" height="20px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--twemoji" preserveAspectRatio="xMidYMid meet"><path style="{% if post.liked > 0 %}fill: #DD2E44;{% else %}fill: none{% endif %}" stroke="#DD2E44" stroke-width="2" d="M35.885 11.833c0-5.45-4.418-9.868-9.867-9.868c-3.308 0-6.227 1.633-8.018 4.129c-1.791-2.496-4.71-4.129-8.017-4.129c-5.45 0-9.868 4.417-9.868 9.868c0 .772.098 1.52.266 2.241C1.751 22.587 11.216 31.568 18 34.034c6.783-2.466 16.249-11.447 17.617-19.959c.17-.721.268-1.469.268-2.242z"></path></svg></span>
</div>


<script nonce="{{ g.nonce }}">
const svg = document.querySelector("#like");
svg.addEventListener("mouseover", function() {
    this.children[0].style.fill = "#DD2E44";
});

svg.addEventListener("mouseout", function() {
    if(this.classList.contains("liked") === false) {
       this.children[0].style.fill = "none";
    }
});

svg.addEventListener("click", function() {
    fetch('https://{{ g.main_domain }}/like', {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            blog: {{ blog.id }},
            post: {{ post.id}}
        })
    })
    .then(response => {
        var likes = parseInt(this.parentElement.children[0].innerText);
        if(response.status == 201) {
            likes++;
            this.parentElement.children[0].innerText = likes;
            this.children[0].style.fill = "#DD2E44";
            this.classList.add("liked");
        } else if(response.status == 204) {
            likes--;
            this.parentElement.children[0].innerText = likes;
            this.children[0].style.fill = "none";
            this.classList.remove("liked");
        }
    });
});
</script>

{% if post.comments_allowed == "1" %}
<div class="post-comments">
    <h3>Comments ({{ comments|length }})</h3>
    {% for comment in comments %}
    <div class="comment-item">
        <div class="comment-meta">
            <b>{{ comment.author_name }}</b> &middot; <span class="datetime">{{ comment.created_at }}</span>
            {% if g.user == blog.owner %}
            <form class="comment-delete-form" method="POST" action="/comment/{{ comment.id }}/delete">
                <button type="submit" class="comment-delete" title="Delete comment">&times;</button>
            </form>
            {% endif %}
        </div>
        <div class="comment-content">{{ comment.content }}</div>
    </div>
    {% else %}
    <p class="comment-empty">No comments yet. Be the first!</p>
    {% endfor %}
    <form class="comment-form" method="POST" action="/comment">
        <input type="hidden" name="blog_id" value="{{ blog.id }}">
        <input type="hidden" name="post_id" value="{{ post.id }}">
        <input type="text" name="author_name" placeholder="Name" maxlength="50" required>
        <textarea name="content" placeholder="Write a comment…" maxlength="1000" rows="4" required></textarea>
        <input type="submit" value="Post comment">
    </form>
</div>
{% endif %}

{% include 'blog_footer.html' %}