{% extends "allianceauth/base.html" %}
{% load static %}
{% load i18n %}

{% block page_title %}{% translate "Notifications" %}{% endblock %}

{% block content %}
    <h1 class="page-header text-center">{% translate "Notifications" %}</h1>

    <div class="panel panel-default">

        <div class="panel-heading">
            <ul class="nav nav-pills">
                <li class="active"><a data-toggle="tab" href="#unread">{% translate "Unread" %}<b>({{ unread|length }})</b></a></li>
                <li><a data-toggle="tab" href="#read">{% translate "Read" %} <b>({{ read|length }})</b></a></li>
                <div class="pull-right">
                    <a href="{% url 'notifications:mark_all_read' %}" class="btn btn-warning">{% translate "Mark All Read" %}</a>
                    <a href="{% url 'notifications:delete_all_read' %}" class="btn btn-danger">{% translate "Delete All Read" %}</a>
                </div>
            </ul>
        </div>

        <div class="panel-body">
            <div class="tab-content">

                <div id="unread" class="tab-pane fade in active">
                    {% include "notifications/list_partial.html" with notifications=unread %}
                </div>

                <div id="read" class="tab-pane fade">
                    {% include "notifications/list_partial.html" with notifications=read %}
                </div>

            </div>
        </div>

    </div>
{% endblock %}
