{% extends 'base.html' %}
{% block content %}
<div class="container py-3">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="mb-0">Notifications</h3>
    <form action="{{ url_for('notifications.mark_all_read') }}" method="post">
      <button class="btn btn-outline-secondary btn-sm" onclick="fetch(this.form.action,{method:'POST'}).then(()=>location.reload()); return false;">Mark all read</button>
    </form>
  </div>

  <div class="list-group">
    {% for n in items %}
      <a href="{{ n.link or '#' }}" class="list-group-item list-group-item-action py-3">
        <div class="d-flex justify-content-between">
          <div class="fw-semibold {{ 'text-danger' if n.type=='danger' else ('text-warning' if n.type=='warning' else '') }}">{{ n.title }}</div>
          <small class="text-muted">{{ n.created_at.strftime('%d %b %Y') }}</small>
        </div>
        <div class="small text-muted">{{ n.message }}</div>
        {% if not n.is_read %}<span class="badge bg-primary-subtle text-primary border mt-2">unread</span>{% endif %}
      </a>
    {% else %}
      <div class="text-muted">No notifications.</div>
    {% endfor %}
  </div>

  {% if pagination.pages > 1 %}
  <nav class="mt-3">
    <ul class="pagination">
      <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
        <a class="page-link" href="{{ url_for('notifications.inbox', page=pagination.prev_num) }}">Prev</a>
      </li>
      {% for p in range(1, pagination.pages+1) %}
      <li class="page-item {% if p == pagination.page %}active{% endif %}">
        <a class="page-link" href="{{ url_for('notifications.inbox', page=p) }}">{{ p }}</a>
      </li>
      {% endfor %}
      <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
        <a class="page-link" href="{{ url_for('notifications.inbox', page=pagination.next_num) }}">Next</a>
      </li>
    </ul>
  </nav>
  {% endif %}
</div>
{% endblock %}