{% extends "base-apply.html" %}
{% load i18n static activity_tags apply_tags bleach_tags markdown_tags submission_tags %}

{% block content %}
<div class="admin-bar">
    <div class="admin-bar__inner">
        <div class="admin-bar__inner--with-button">
            <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Notifications" %}</h1>
            <form class="form notifications__filters" method="get">
                {{ filter.form }}
                <button class="button button--primary" type="submit" value="Filter">{% trans "Filter" %}</button>
            </form>
        </div>

        <div class="tabs js-tabs">
            <div class="tabs__container">
                <a class="tab__item" href="#comments" data-tab="tab-1">
                    {% trans "Communications" %}
                </a>

                <a class="tab__item" href="#actions" data-tab="tab-2">
                    {% trans "Activity Feed" %}
                </a>
            </div>
        </div>
    </div>
</div>

<div class="wrapper wrapper--large wrapper--tabs js-tabs-content">
    {# Tab 1 #}
    <div class="tabs__content" id="tab-1">
        {% for activity in object_list %}
            {% if activity.type == 'comment' %}
                <div class="feed__item feed__item--{{ activity.type }}">
                    <div class="feed__pre-content">
                        <p class="feed__label feed__label--{{ activity.source_content_type.name|source_type|lower }}">{{ activity.source_content_type.name|source_type }}</p>
                    </div>
                    <div class="feed__content js-feed-content">
                        <div class="feed__meta js-feed-meta">
                            <p class="feed__meta-item"><a href="{{ activity.source.get_absolute_url }}#communications">{{ activity.source.title|capfirst }}</a>
                                : {{ activity.user.get_full_name }} {% trans "made a comment" %} – {{ activity.timestamp|date:"SHORT_DATE_FORMAT" }}</p>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
    {# Tab 2 #}
    <div class="tabs__content" id="tab-2">
        {% for activity in object_list %}
            {% if activity.type == 'action' %}
                <div class="feed__item feed__item--{{ activity.type }}">
                    <div class="feed__pre-content">
                        <p class="feed__label feed__label--{{ activity.source_content_type.name|source_type|lower }}">{{ activity.source_content_type.name|source_type }}</p>
                    </div>
                    <div class="feed__content js-feed-content">
                        <div class="feed__meta js-feed-meta">
                            <p class="feed__meta-item"><a href="{{ activity.source.get_absolute_url }}">{{ activity.source.title|capfirst }}</a>
                                : {{ activity.user.get_full_name }} – {{ activity.timestamp|date:"SHORT_DATE_FORMAT" }} – {{ activity|display_for:request.user }} {% if activity.related_object %}<a href="{{ activity.related_object.get_absolute_url }}" class="feed__related-item">{{ activity.related_object|model_verbose_name }} <svg><use xlink:href="#arrow-head-pixels--solid"></use></svg></a>{% endif %}</p>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/apply/tabs.js' %}"></script>
{% endblock %}