{% extends "base.html" %}
{% load i18n %}
{% block crumbs %}
  <li><a href="{% url 'risks:notifications' %}">{% trans "Notifications" %}</a></li>
{% endblock %}
{% block content %}
<section class="section">
  <div class="container">
    <div class="level">
      <div class="level-left">
        <div class="buttons has-addons">
          <a class="button {% if filter == 'unread' %}is-link{% endif %}" href="?filter=unread">{% trans "Unread" %}</a>
          <a class="button {% if filter == 'all' %}is-link{% endif %}" href="?filter=all">{% trans "All" %}</a>
        </div>
      </div>
      <div class="level-right">
        <form method="post" action="{% url 'risks:notification_mark_all_read' %}">
          {% csrf_token %}
          <button class="button is-small is-success" {% if not notifications|length %}disabled{% endif %}>
            {% trans "Mark all as read" %}
          </button>
        </form>
      </div>
    </div>

    {% if notifications %}
      <div class="box">
        {% for n in notifications %}
          <article class="media" style="border-bottom:1px solid #eee; padding-bottom:.75rem; margin-bottom:.75rem;">
            <div class="media-content">
              <p>
                {% if not n.read %}
                  <span class="tag is-warning is-light" style="margin-right:.5rem;">{% trans "New" %}</span>
                {% endif %}
                {{ n.message }}
              </p>
              <p class="is-size-7 has-text-grey">{{ n.created_at|date:"d.m.Y H:i" }}</p>
            </div>
            <div class="media-right">
              {% if not n.read %}
                <form method="post" action="{% url 'risks:notification_mark_read' n.pk %}">
                  {% csrf_token %}
                  <button class="button is-small is-light" title="{% trans 'Mark as read' %}">
                    <span class="icon"><i class="fas fa-check"></i></span>
                  </button>
                </form>
              {% endif %}
            </div>
          </article>
        {% endfor %}
      </div>
    {% else %}
      <p class="has-text-grey">{% trans "No notifications." %}</p>
    {% endif %}
  </div>
</section>
{% endblock %}