{% extends "erp_base.html" %}

{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260625o" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %}

{% block content %}
<div class="pj-wrap">
  <div class="pj-section-head">
    <h2>알림센터</h2>
    <div style="display:flex; gap:8px;">
      <a class="pj-btn" href="/project/">← 프로젝트</a>
      <button type="button" class="pj-btn pj-btn-primary" id="pj-readall">모두 읽음</button>
    </div>
  </div>

  {% if not notifications %}
  <div class="pj-empty">알림이 없습니다.</div>
  {% else %}
  <ul class="pj-inbox" id="pj-inbox">
    {% for n in notifications %}
    <li class="pj-inbox-item {% if not n.is_read %}is-unread{% endif %}"
        data-id="{{ n.id }}"
        {% if n.task_id %}data-project="{{ n.project_id }}"{% endif %}>
      <span class="material-symbols-outlined pj-inbox-icon">
        {% if n.type == 'assigned' %}assignment_ind
        {% elif n.type == 'completed' %}task_alt
        {% elif n.type == 'comment' %}chat_bubble
        {% else %}notifications{% endif %}
      </span>
      <div class="pj-inbox-body">
        <div class="pj-inbox-title">{{ n.title }}</div>
        {% if n.body %}<div class="pj-inbox-sub">{{ n.body }}</div>{% endif %}
        <div class="pj-inbox-meta">
          {% if n.actor_email %}{{ n.actor_email.split('@')[0] }} · {% endif %}{{ n.created_at[:16].replace('T',' ') }}
        </div>
      </div>
      {% if n.project_id %}
      <a class="pj-btn pj-inbox-go" href="/project/p/{{ n.project_id }}">이동</a>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</div>

<script src="/static/project.js?v=20260625o" defer></script>
{% endblock %}