{% extends 'shared/base.html' %}
{% block title %}Notifications | Piramal Seva Setu{% endblock %}
{% block content %}
<section class="section-pad pt-5"><div class="container">
  <div class="mb-4"><div class="eyebrow">Employee Portal</div><h1 class="fw-bold">Notifications</h1><p class="text-muted">Approvals, activity updates, attendance and Seva reminders.</p></div>
  <div class="vstack gap-3">
    {% for n in notifications %}
      <div class="card border-0 shadow-sm rounded-4 {% if not n.read_at %}border-start border-4 border-primary{% endif %}">
        <div class="card-body p-4 d-flex justify-content-between gap-3">
          <div><div class="small text-muted">{{ n.created_at.strftime('%d %b %Y, %I:%M %p') }}</div><h5 class="mb-1">{{ n.title }}</h5><p class="mb-0 text-muted">{{ n.message }}</p></div>
          {% if n.link_url %}<form method="post" action="{{ url_for('employee.notification_read', notification_id=n.id) }}"><button class="btn btn-outline-primary btn-sm">Open</button></form>{% endif %}
        </div>
      </div>
    {% else %}<div class="p-5 bg-white rounded-4 text-center text-muted">No notifications yet.</div>{% endfor %}
  </div>
</div></section>
{% endblock %}