<div class="activity-notifications" #activity_notifications>
  <!-- popup trigger -->
  <button
    type="button"
    class="btn btn-link p-0"
    [attr.aria-controls]="isPopupVisible ? 'activity-notifications-popup' : null"
    [attr.aria-pressed]="isPopupVisible"
    [attr.aria-expanded]="isPopupVisible"
    [attr.aria-label]="notifications?.length ? null : 'Brak powiadomień'"
    aria-haspopup="true"
    (click)="isPopupVisible = !isPopupVisible"
    (keydown)="onPopupTriggerKeyDown($event)">
    <!-- icon -->
    <svg class="icon icon-bell" aria-hidden="true">
      <use href="/assets/icomoon/sprite/sprite.svg#icon-bell"></use>
    </svg>

    <span class="visually-hidden"> {{ isPopupVisible ? 'Pokaż' : 'Ukryj' }} powiadomienia </span>

    <!-- total number -->
    <span class="activity-notifications__total" *ngIf="notifications?.length > 0">
      <span class="badge badge-danger">
        <span class="visually-hidden"> Liczba powiadomień: </span>
        {{ notifications?.length }}
      </span>
    </span>
  </button>

  <!--  -->
  <div
    class="activity-notifications__popup activity-notifications__popup--right"
    id="activity-notifications-popup"
    *ngIf="isPopupVisible"
    @toggleVertically>
    <ul class="list-group list-group-flush">
      <!-- schedule notifications -->
      <ng-container *ngIf="isSchedulePopup">
        <li class="list-group-item p-2" *ngFor="let notification of notifications; let isLast = last">
          <button
            class="btn btn-link btn--multiline p-0"
            (click)="onNotificationClick(notification.id)"
            *ngIf="!isLast">
            {{ notification.verb }}
          </button>
          <button
            class="btn btn-link btn--multiline p-0"
            (click)="onNotificationClick(notification.id)"
            *ngIf="isLast"
            (blur)="onPopupBlur()">
            {{ notification.verb }}
          </button>
        </li>
      </ng-container>

      <!-- forum notifications -->
      <ng-container *ngIf="!isSchedulePopup">
        <li class="list-group-item p-2" *ngFor="let notification of notifications">
          <ng-container *ngIf="notification.fancy_title && notification.badge">
            <a
              href="{{ forumUrl }}/session/sso?return_path=/t/{{ notification.slug }}/{{ notification.topic_id }}/{{
                notification.post_number
              }}"
              target="_blank"
              rel="noopener">
              <fa-icon class="mr-2" [icon]="fas[notification.badge.fa_icon]" aria-hidden="true"></fa-icon
              >{{ notification.fancy_title }}
              <span class="visually-hidden">
                {{ 'SkipTo.NewWindow' | translate }}
              </span>
            </a>
          </ng-container>

          <ng-container *ngIf="notification.fancy_title && !notification.badge">
            <a
              href="{{ forumUrl }}/session/sso?return_path=/t/{{ notification.slug }}/{{ notification.topic_id }}/{{
                notification.post_number
              }}"
              target="_blank"
              rel="noopener">
              {{ notification.fancy_title }}
              <span class="visually-hidden">
                {{ 'SkipTo.NewWindow' | translate }}
              </span>
            </a>
          </ng-container>

          <ng-container *ngIf="!notification.fancy_title && notification.badge">
            <a
              href="{{ forumUrl }}/session/sso?return_path=/badges/{{ notification.badge.id }}/{{
                notification.badge.slug
              }}"
              target="_blank"
              rel="noopener">
              <fa-icon class="mr-2" [icon]="fas[notification.badge.fa_icon]" aria-hidden="true"></fa-icon
              >{{ notification.badge.name }}
              <span class="visually-hidden">
                {{ 'SkipTo.NewWindow' | translate }}
              </span>
            </a>
          </ng-container>
        </li>
      </ng-container>

      <!-- nothing to display -->
      <li class="list-group-item p-2" *ngIf="!notifications?.length">Brak powiadomień</li>
    </ul>

    <!-- forum additional actions -->
    <ng-container *ngIf="!isSchedulePopup && notifications?.length">
      <div class="d-flex justify-content-between p-2">
        <span>
          <a
            class="btn btn-primary btn-sm"
            href="{{ forumUrl }}/session/sso?return_path=/u/{{ forumUsername }}/notifications"
            target="_blank">
            Zobacz wszystkie
          </a> </span
        ><span>
          <button class="btn btn-outline-primary btn-sm" (click)="markAsRead()" (blur)="onPopupBlur()">
            Oznacz jako przeczytane
          </button>
        </span>
      </div>
    </ng-container>
  </div>
</div>
