<div class="notifications-page">
  <header class="notifications-page__header">
    <div>
      <h1>Notifications</h1>
      <p>Mock-gateway backed until docs/backend/PHASE-2-ORDERS-NOTIFICATIONS-CONTRACT.md ships.</p>
    </div>
    <app-button variant="secondary" (click)="facade.markAllRead()">Mark all read</app-button>
  </header>

  <div class="notifications-page__filters">
    <label>
      <input type="checkbox" [ngModel]="facade.filters().unreadOnly" (ngModelChange)="facade.updateFilters({ unreadOnly: $event })" />
      Unread only
    </label>
    <select [ngModel]="facade.filters().eventType" (ngModelChange)="facade.updateFilters({ eventType: $event })">
      @for (type of eventTypes; track type) {
        <option [value]="type">{{ type }}</option>
      }
    </select>
  </div>

  @if (facade.notifications().length === 0 && !facade.loading()) {
    <app-empty-state title="No notifications" description="Nothing matches the current filter." />
  } @else {
    <ul class="notifications-page__list">
      @for (n of facade.notifications(); track n.id) {
        <li class="notifications-page__item" [class.notifications-page__item--unread]="!n.read">
          <app-badge [variant]="n.severity === 'critical' ? 'danger' : n.severity === 'warning' ? 'warning' : 'info'">{{ n.severity }}</app-badge>
          <a [routerLink]="['/', currentLang(), 'backoffice', ...n.deepLink]">{{ n.title }}</a>
          <span class="notifications-page__time">{{ n.createdAt | date: 'short' }}</span>
          @if (!n.read) {
            <button type="button" (click)="facade.markRead(n.id)">Mark read</button>
          }
        </li>
      }
    </ul>
  }
</div>
