{% extends "base" %}
{% import "macros" as macros %}

{% block title %}
{{ "Notifications" | _ }}
{% endblock title %}

{% block content %}
    <h1>{{ "Notifications" | _ }}</h1>
    <div class="list">
        {% for notification in notifications %}
            <div class="card flex">
                {% if notification.kind == "COMMENT" %}
                    <i class="fa fa-comment left-icon"></i>
                    <main class="grow">
                        <h3><a href="{{ notification.object.post.url }}#comment-{{ notification.object.id }}">
                            {{ "{{ user }} commented your article." | _(user=notification.object.user.display_name | escape) }}
                        </a></h3>
                        <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.post.title }}</a></p>
                    </main>
                    <p><small>{{ notification.creation_date | date(format="%B %e, %H:%m") }}</small></p>

                {% elif notification.kind == "FOLLOW" %}
                    <i class="fa fa-user-plus left-icon"></i>
                    <main class="grow">
                        <h3><a href="/@/{{ notification.object.follower.fqn }}/">
                            {{ "{{ user }} is now following you." | _(user=notification.object.follower.display_name | escape) }}
                        </a></h3>
                    </main>
                    <p><small>{{ notification.creation_date | date(format="%B %e, %H:%m") }}</small></p>

                {% elif notification.kind == "LIKE" %}
                    <i class="fa fa-heart left-icon"></i>
                    <main class="grow">
                        <h3>
                            {{ "{{ user }} liked your article." | _(user=notification.object.user.display_name | escape) }}
                        </h3>
                        <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.post.title }}</a></p>
                    </main>
                    <p><small>{{ notification.creation_date | date(format="%B %e, %H:%m") }}</small></p>

                {% elif notification.kind == "MENTION" %}
                    <i class="fa fa-at left-icon"></i>
                    <main class="grow">
                        <h3><a href="{{ notification.object.url }}">
                            {{ "{{ user }} mentioned you." | _(user=notification.object.user.display_name | escape) }}
                        </a></h3>
                    </main>
                    <p><small>{{ notification.creation_date | date(format="%B %e, %H:%m") }}</small></p>

                {% elif notification.kind == "RESHARE" %}
                    <i class="fa fa-retweet left-icon"></i>
                    <main class="grow">
                        <h3>
                            {{ "{{ user }} reshared your article." | _(user=notification.object.user.display_name | escape) }}
                        </h3>
                        <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.post.title }}</a></p>
                    </main>
                    <p><small>{{ notification.creation_date | date(format="%B %e, %H:%m") }}</small></p>

                {% endif %}
            </div>
        {% endfor %}
    </div>
    {{ macros::paginate(page=page, total=n_pages) }}
{% endblock content %}