{% extends 'base.html' %}
{% block title %}Notifications — CampusTalent{% endblock %}
{% block content %}
<div class="page-content">
<div class="container-sm">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem">
    <h1 style="font-size:1.75rem">Notifications</h1>
    <form method="post" action="{% url 'notifications:mark_all_read' %}">
      {% csrf_token %}
      <button class="btn btn-ghost btn-sm">Mark all read</button>
    </form>
  </div>
  {% for notif in notifications %}
  <div class="card {% if not notif.is_read %}card-accent{% endif %}" style="margin-bottom:0.75rem;padding:1rem 1.25rem">
    <div style="display:flex;gap:0.875rem;align-items:flex-start">
      {% if notif.sender %}
      <div class="avatar avatar-sm avatar-placeholder" style="font-size:10px;flex-shrink:0">{{ notif.sender.first_name|first|upper }}</div>
      {% else %}
      <div style="width:32px;height:32px;border-radius:50%;background:rgba(45,49,250,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0">🔔</div>
      {% endif %}
      <div style="flex:1">
        <p style="font-size:0.875rem;font-weight:{% if not notif.is_read %}600{% else %}400{% endif %};color:var(--text-primary);margin-bottom:0.25rem">{{ notif.message }}</p>
        <span style="font-size:0.72rem;color:var(--text-muted)">{{ notif.created_at|timesince }} ago</span>
      </div>
      {% if not notif.is_read %}
      <div style="width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:6px"></div>
      {% endif %}
    </div>
    {% if notif.link %}
    <a href="{{ notif.link }}" style="display:block;margin-top:0.625rem;font-size:0.8rem;color:var(--primary);font-weight:600">View →</a>
    {% endif %}
  </div>
  {% empty %}
  <div class="empty-state">
    <div class="empty-state-icon">🔔</div>
    <h3>No notifications</h3>
    <p class="empty-state-text">You're all caught up!</p>
  </div>
  {% endfor %}
</div>
</div>
{% endblock %}