{% extends base_template %}
{% load humanize %}

{% block title %}Notifications{% endblock %}
{% block topbar_title %}Notifications{% endblock %}

{% block dash_content %}
<div class="nt-page">

  <div class="nt-head">
    <div>
      <h1>Notifications</h1>
      <p>Updates about your applications, messages, jobs and account.</p>
    </div>
    <div class="nt-head-actions">
      <form method="post" action="{% url 'accounts:notifications_read_all' %}">
        {% csrf_token %}<input type="hidden" name="next" value="{{ request.get_full_path }}">
        <button type="submit" class="btn btn-outline btn-sm" {% if not counts.unread %}disabled{% endif %}><i class="fas fa-check-double"></i> Mark all as read</button>
      </form>
      <form method="post" action="{% url 'accounts:notifications_clear_read' %}" onsubmit="return confirm('Remove all notifications you have already read?');">
        {% csrf_token %}<input type="hidden" name="next" value="{% url 'accounts:notifications' %}">
        <button type="submit" class="btn btn-outline btn-sm"><i class="fas fa-broom"></i> Clear read</button>
      </form>
    </div>
  </div>

  <nav class="nt-tabs" aria-label="Notification filters">
    <a href="?tab=all" class="nt-tab{% if active_tab == 'all' %} is-active{% endif %}">All <span>{{ counts.all }}</span></a>
    <a href="?tab=unread" class="nt-tab{% if active_tab == 'unread' %} is-active{% endif %}">Unread {% if counts.unread %}<span class="is-hot">{{ counts.unread }}</span>{% else %}<span>0</span>{% endif %}</a>
    <a href="?tab=applications" class="nt-tab{% if active_tab == 'applications' %} is-active{% endif %}">Applications {% if counts.applications_unread %}<span class="is-hot">{{ counts.applications_unread }}</span>{% else %}<span>{{ counts.applications }}</span>{% endif %}</a>
    <a href="?tab=messages" class="nt-tab{% if active_tab == 'messages' %} is-active{% endif %}">Messages {% if counts.messages_unread %}<span class="is-hot">{{ counts.messages_unread }}</span>{% else %}<span>{{ counts.messages }}</span>{% endif %}</a>
    <a href="?tab=jobs" class="nt-tab{% if active_tab == 'jobs' %} is-active{% endif %}">Jobs &amp; companies {% if counts.jobs_unread %}<span class="is-hot">{{ counts.jobs_unread }}</span>{% else %}<span>{{ counts.jobs }}</span>{% endif %}</a>
    <a href="?tab=account" class="nt-tab{% if active_tab == 'account' %} is-active{% endif %}">Account {% if counts.account_unread %}<span class="is-hot">{{ counts.account_unread }}</span>{% else %}<span>{{ counts.account }}</span>{% endif %}</a>
  </nav>

  <form method="get" class="seeker-filter-bar">
    <input type="hidden" name="tab" value="{{ active_tab }}">
    <input type="text" name="q" value="{{ search_query }}" placeholder="Search notifications" class="form-control">
    <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-search"></i> Search</button>
    {% if search_query %}<a href="?tab={{ active_tab }}" class="btn btn-outline btn-sm">Clear</a>{% endif %}
  </form>

  <div class="nt-list">
    {% for note in notifications %}
    <article class="nt-item{% if not note.is_read %} is-unread{% endif %}">
      <div class="nt-icon"><i class="fas {{ note.icon }}"></i></div>
      <div class="nt-main">
        <div class="nt-title">{{ note.title|default:note.subject|striptags|truncatechars:110 }}{% if not note.is_read %}<span class="nt-dot" title="Unread"></span>{% endif %}</div>
        <p class="nt-body">{{ note.display_body|striptags|truncatechars:260 }}</p>
        <div class="nt-time" title="{{ note.created_at|date:'j M Y, H:i' }}">{{ note.created_at|naturaltime }}</div>
      </div>
      <div class="nt-actions">
        {% if note.link_path %}<a href="{% url 'accounts:notification_open' note.pk %}" class="btn btn-primary btn-sm">{{ note.button_text|default:"View" }}</a>{% endif %}
        <form method="post" action="{% url 'accounts:notification_toggle' note.pk %}">
          {% csrf_token %}<input type="hidden" name="next" value="{{ request.get_full_path }}">
          <button type="submit" class="nt-icon-btn" title="{% if note.is_read %}Mark as unread{% else %}Mark as read{% endif %}" aria-label="{% if note.is_read %}Mark as unread{% else %}Mark as read{% endif %}"><i class="far fa-{% if note.is_read %}envelope{% else %}envelope-open{% endif %}"></i></button>
        </form>
        <form method="post" action="{% url 'accounts:notification_delete' note.pk %}">
          {% csrf_token %}<input type="hidden" name="next" value="{{ request.get_full_path }}">
          <button type="submit" class="nt-icon-btn" title="Delete" aria-label="Delete notification"><i class="far fa-trash-can"></i></button>
        </form>
      </div>
    </article>
    {% empty %}
    <div class="seeker-empty-state">
      <i class="fas fa-bell-slash" style="font-size:1.8rem;margin-bottom:10px;display:block;"></i>
      {% if search_query %}No notifications match your search.{% elif active_tab == 'unread' %}You are all caught up. There is nothing unread.{% else %}No notifications here yet. Updates about your applications, messages and account will appear on this page.{% endif %}
    </div>
    {% endfor %}
  </div>

  {% include 'home/partials/list_pagination.html' %}
</div>
{% endblock %}