{% extends "base.j2" -%}

{%- block append_to_head_tag_section %}
  <title>Notifications</title>
{%- endblock %}

{% block content %}
<section class="one-column shop-offers-page notifications-page">

  <div class="well">
    <h1 class="type-title">Notifications</h1>
    {% if notifications %}
      {% set unread_count = notifications|selectattr('read', 'equalto', false)|list|length %}
      <p class="profile-meta">
        {% if unread_count %}{{ unread_count }} unread of {{ notifications|length }} total.{% else %}All caught up.{% endif %}
      </p>
      {% if unread_count %}
      <form method="post" action="/u/notifications/read-all" class="cart-inline-form">
        {% include "snippets/csrf.j2" %}
        <button type="submit" class="mps-button mps-button-small">Mark all read</button>
      </form>
      {% endif %}
    {% else %}
      <p class="profile-meta">No notifications yet.</p>
    {% endif %}
  </div>

  {% if notifications %}
  <div class="well">
    <ul class="notifications-list">
      {%- for n in notifications %}
      <li class="notification-row {% if not n.read %}notification-row-unread{% endif %}">
        <div class="notification-row-header">
          <span class="notification-row-kind notification-row-kind-{{ n.kind }}">{{ n.kind|replace('_', ' ') }}</span>
          <span class="notification-row-when">{{ human(n.created_timestamp) }}</span>
        </div>
        <a href="{{ n.link_url or '#' }}" class="notification-row-subject shop-theme-link-color">{{ n.subject }}</a>
        {% if n.body %}
        <p class="notification-row-body">{{ n.body }}</p>
        {% endif %}
        {% set crumbs = n.breadcrumbs %}
        {% if crumbs %}
        <nav class="notification-row-breadcrumbs" aria-label="Source links">
          {% for label, url in crumbs %}
          <a href="{{ url }}" class="shop-theme-link-color">{{ label }}</a>{% if not loop.last %} &rsaquo; {% endif %}
          {% endfor %}
        </nav>
        {% endif %}
        {% if not n.read %}
        <form method="post" action="/u/notifications/{{ n.uuid_str }}/read" class="notification-row-dismiss-form cart-inline-form">
          {% include "snippets/csrf.j2" %}
          <input type="hidden" name="next" value="/u/notifications" />
          <button type="submit" class="cart-remove-link">Mark read</button>
        </form>
        {% endif %}
      </li>
      {%- endfor %}
    </ul>
  </div>
  {% endif %}

</section>
{% endblock %}
