{% extends "base" %}

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

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

{% block content %}
    <h1 class="article">{{ post.title }}</h1>
    <p class="article-info">

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

        <span class="author">{{ "Written by {{ link_1 }}{{ url }}{{ link_2 }}{{ name | escape }}{{ link_3 }}" | _(
            link_1='<a href="/@/',
            url=author.fqn,
            link_2='/">',
            name=name,
            link_3="</a>"
            )
        }}</a></span>
        &mdash;
        <span class="date">{{ date | date(format="%B %e, %Y") }}</span>
    </p>
    <article>
        {{ post.content | safe }}
    </article>

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

        <div class="actions">
            <form class="likes" action="like" method="POST">
                <p aria-label="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}" title="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}">{{ n_likes }}</p>

                {% if has_liked %}
                    <button type="submit" class="liked"><i class="far fa-heart"></i>{{ "I don't like this anymore" | _ }}</button>
                {% else %}
                    <button type="submit"><i class="fa fa-heart"></i>{{ "Add yours" | _ }}</button>
                {% endif %}
            </form>
            <form class="reshares" action="reshare" method="POST">
                <p aria-label="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}" title="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}">{{ n_reshares }}</p>

                {% if has_reshared %}
                    <button type="submit" class="reshared"><i class="far fa-retweet"></i>{{ "I don't want to reshare this anymore" | _ }}</button>
                {% else %}
                    <button type="submit"><i class="fa fa-retweet"></i>{{ "Reshare" | _ }}</button>
                {% endif %}
            </form>
        </div>

        <div class="comments">
            <h2>{{ "Comments" | _ }}</h2>

            {% if account %}
                <form method="post" action="/~/{{ blog.actor_id }}/{{ post.slug }}/comment">
                    <label for="content">{{ "Your comment" | _ }}</label>
                    {% if previous %}
                        <input type="hidden" name="responding_to" value="{{ previous.id }}"/>
                    {% endif %}
                    {# Ugly, but we don't have the choice if we don't want weird paddings #}
                    <textarea id="content" name="content">{% filter trim %}{% if previous %}{% if previous.author.fqn != user_fqn %}@{{ previous.author.fqn }} {% endif %}{% for mention in previous.mentions %}{% if mention != user_fqn %}@{{ mention }} {% endif %}{% endfor %}{% endif %}{% endfilter %}</textarea>
                    <input type="submit" value="{{ "Submit comment" | _ }}" />
                </form>
            {%  endif %}

            <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="comment" id="comment-{{ comment.id }}">
                        <a class="author" href="{{ comment.author.ap_url }}">
                            <span class="display-name">{{ comment.author.display_name }}</span>
                            <span class="username">@{{ comment.author.username }}</span>
                        </a>
                        <div class="text">{{ comment.content | safe }}</div>
                        <a class="button" href="?responding_to={{ comment.id }}">{{ "Respond" | _ }}</a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock content %}