{% extends "base" %}

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

{% block header %}
    <a href="../">{{ blog.title }}</a>
{% endblock header %}

{% if author.display_name %}
    {% set name = author.display_name %}
{% else %}
    {% set name = author.username %}
{% endif %}

{% block content %}
    <p>
        <b>Written by <a href="/@/{{ author.fqn }}/">{{ name }}</a></b>
        &mdash;
        <span>{{ date | date(format="%B %e, %Y") }}</span>
    </p>
    <h1>{{ post.title }}</h1>
    <article>
        {{ post.content | safe }}
    </article>

    <div class="article-meta">
        <p>This article is under the {{ post.license }} license.</p>

        <div class="inline">
            <p>
                {{ n_likes }} like{{ n_likes | pluralize }}
            </p>
            <a class="button" href="like">
                {% if has_liked %}
                    I don't like this anymore
                {% else %}
                    Add yours
                {% endif %}
            </a>

            <p>
                {{ n_reshares }} reshare{{ n_reshares | pluralize }}
            </p>
            <a class="button" href="reshare">
                {% if has_reshared %}
                    I don't want to reshare this anymore
                {% else %}
                    Reshare
                {% endif %}
            </a>
        </div>

        <h2>Comments</h2>
        <div class="list">
            {% for comment in comments %}
                {% if comment.author.display_name %}
                    {% set comment_author_name = comment.author.display_name %}
                {% else %}
                    {% set comment_author_name = comment.author.username %}
                {% endif %}
                <div class="card" id="comment-{{ comment.id }}">
                    <b>{{ comment_author_name }}</b>
                    <div>{{ comment.content | safe }}</div>
                    <a href="comment?responding_to={{ comment.id }}">Respond</a>
                </div>
            {% endfor %}
        </div>
        <a class="button inline-block" href="comment?">Comment</a>
    </div>
{% endblock content %}