{% include 'public/partials/header.html' %}
<main class="wrap page-shell notification-center">
  <section class="page-intro notification-intro"><div><span class="eyebrow">Account activity</span><h1>Notifications</h1><p>Friend requests, profile activity, messages, chat, and topic replies in one place.</p></div><form method="post" action="{{ $baseUrl }}/notifications/read-all"><input type="hidden" name="_token" value="{{ $csrfToken }}"><button class="btn secondary" type="submit">Mark all read</button></form></section>
  <div class="notification-layout">
    <section class="panel notification-list-card">
      <header class="panel-heading"><div><h2>Recent notifications</h2><p>{{ $unreadNotifications }} unread notification{{ $unreadNotifications===1?'':'s' }}</p></div><a class="btn subtle" href="{{ $baseUrl }}/usercp/notifications">Preferences</a></header>
      <div class="notification-list">
        {% if $notifications %}{% foreach $notifications as $notification %}
        <article class="notification-row {{ !$notification['is_read']?'unread':'' }}">
          <span class="notification-avatar" style="--avatar-color:{{ $notification['actor_avatar_color'] ?: '#f0a500' }}">{% if $notification['actor_avatar_url'] %}<img src="{{ str_starts_with($notification['actor_avatar_url'],'/')?$baseUrl.$notification['actor_avatar_url']:$notification['actor_avatar_url'] }}" alt="">{% elseif $notification['actor_username'] %}{{ strtoupper(substr($notification['actor_username'],0,1)) }}{% else %}◆{% endif %}</span>
          <div class="notification-copy"><strong>{{ $notification['title'] }}</strong><p>{{ $notification['body'] }}</p><small>{{ $notification['ago'] }} · {{ ucfirst(str_replace('_',' ',$notification['notification_type'])) }}</small></div>
          <div class="notification-actions">{% if $notification['target_url'] %}<form method="post" action="{{ $baseUrl }}/notifications/{{ $notification['id'] }}/read"><input type="hidden" name="_token" value="{{ $csrfToken }}"><button class="btn small primary" type="submit">Open</button></form>{% endif %}<form method="post" action="{{ $baseUrl }}/notifications/{{ $notification['id'] }}/dismiss"><input type="hidden" name="_token" value="{{ $csrfToken }}"><button class="icon-button" type="submit" title="Dismiss">×</button></form></div>
        </article>
        {% endforeach %}{% else %}<div class="empty-state notification-empty"><span>◇</span><h3>You’re all caught up</h3><p>New community activity will appear here.</p></div>{% endif %}
      </div>
    </section>
    <aside class="panel notification-side"><h3>Notification controls</h3><p>Choose which community events create alerts for your account.</p><a class="profile-side-action" href="{{ $baseUrl }}/usercp/notifications">Manage preferences <span>›</span></a><a class="profile-side-action" href="{{ $baseUrl }}/usercp/privacy">Communication privacy <span>›</span></a></aside>
  </div>
</main>
{% include 'public/partials/footer.html' %}