{% extends 'layout.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Notifications" %}{% endblock %}

{% block content %}
<header class="columns is-mobile">
    <div class="column">
        <h1 class="title">{% trans "Notifications" %}</h1>
    </div>

    <form name="clear" action="/notifications" method="POST" class="column is-narrow">
        {% csrf_token %}
        {% spaceless %}
        <button class="button is-danger is-light" type="submit">
            <span class="icon icon-x m-0-mobile" aria-hidden="true"></span>
            <span class="is-sr-only-mobile">{% trans "Delete notifications" %}</span>
        </button>
        {% endspaceless %}
    </form>
</header>

<div class="block">
    <nav class="tabs">
        <ul>
            {% url 'notifications' as tab_url %}
            <li {% if tab_url == request.path %}class="is-active"{% endif %}>
                <a href="{{ tab_url }}">{% trans "All" %}</a>
            </li>
            {% url 'notifications' 'mentions' as tab_url %}
            <li {% if tab_url == request.path %}class="is-active"{% endif %}>
                <a href="{{ tab_url }}">{% trans "Mentions" %}</a>
            </li>
        </ul>
    </nav>
</div>

<div class="block">
    {% for notification in notifications %}
    {% include 'notifications/item.html' %}
    {% endfor %}

    {% if not notifications %}
    <p>{% trans "You're all caught up!" %}</p>
    {% endif %}
</div>
{% endblock %}