<div class="page-header page-header-row">
  <div>
    <div class="page-title">Notifications</div>
    <div class="page-subtitle">System messages and announcements</div>
  </div>
  {% if notifications is defined and notifications %}
  <form method="post" action="/notifications/read-all">
    <input type="hidden" name="_csrf" value="{{ csrftoken }}">
    <button type="submit" class="btn btn-sm btn-outline">Mark All as Read</button>
  </form>
  {% endif %}
</div>

{% if notifications is defined and notifications %}
<div style="display:flex;flex-direction:column;gap:6px">
  {% for n in notifications %}
  <div class="card {% if not n.read %}notification-unread{% endif %}" style="{% if not n.read %}border-left:3px solid var(--accent){% endif %}">
    <div class="card-body" style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem">
      <div style="display:flex;gap:12px;align-items:flex-start">
        <div style="width:36px;height:36px;border-radius:50%;background:{% if n.type == 'success' %}rgba(74,222,128,0.1){% elseif n.type == 'warning' %}rgba(251,191,36,0.1){% elseif n.type == 'danger' %}rgba(248,113,113,0.1){% else %}rgba(129,140,248,0.1){% endif %};display:flex;align-items:center;justify-content:center;flex-shrink:0">
          <i class="fas {% if n.type == 'success' %}fa-circle-check{% elseif n.type == 'warning' %}fa-triangle-exclamation{% elseif n.type == 'danger' %}fa-circle-exclamation{% else %}fa-bell{% endif %}" style="font-size:0.85rem;color:{% if n.type == 'success' %}var(--success){% elseif n.type == 'warning' %}var(--warning){% elseif n.type == 'danger' %}var(--danger){% else %}var(--accent){% endif %}"></i>
        </div>
        <div>
          <div style="font-weight:{% if not n.read %}600{% else %}400{% endif %};color:var(--text);font-size:0.875rem;margin-bottom:3px">{{ n.title }}</div>
          <div style="font-size:0.82rem;color:var(--text-muted)">{{ n.message }}</div>
        </div>
      </div>
      <span class="order-time" style="white-space:nowrap;flex-shrink:0">{{ n.created_at|date('M j, g:i A') }}</span>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty-state">
  <i class="fas fa-bell empty-icon"></i>
  <div style="font-size:1rem;font-weight:600;color:var(--text)">No notifications</div>
  <p class="empty-text">You're all caught up!</p>
</div>
{% endif %}