<div #notificationModal class="modal-dialog modal-dialog-end" [id]="modalId" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="notificationModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-end" style="padding-top: 0px;">
    <div class="modal-content" style="height:100vh; margin-top: 0px;">
      <div class="modal-header" style="background-color: #F6FBFD;">
        <h4 class="modal-title" id="notificationModalLabel">Notifications</h4>
        <button type="button" (click)="toggleVisibility()" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" style="max-height: 100vh; overflow-y: auto;">
        <!-- No Unread Notifications Message -->
        <div *ngIf="notificationCount === 0" class="text-center">
          <p>No Unread Notifications!</p>
        </div>

        <!-- Notifications List -->
        <div *ngFor="let notification of notificationList">
          <div
            class="d-flex"
            [ngClass]="{ 'bg-light': notification.status === 'Unread' }"
            style="padding: 10px;"
          >
            <div class="me-3">
              <div *ngIf="notification.profilepic; else defaultPic" class="profile-pic">
                <img
                  [src]="'data:image/png/jpg/jpeg;base64,' + notification.profilepic"
                  width="32px"
                  height="32px"
                  alt="profile pic"
                />
              </div>
              <ng-template #defaultPic>
                <div class="profile-pic">
                  <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 512 512">
                    <path
                      d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z"
                      fill="#5590AA"
                    />
                  </svg>
                </div>
              </ng-template>
            </div>
            <div class="flex-grow-1">
              <p>{{ notification.message }}</p>
            </div>
            <div [ngClass]="{ 'text-danger': notification.status === 'Unread', 'text-success': notification.status === 'Read' }">
              {{ notification.status }}
            </div>
          </div>
          <hr />
        </div>
      </div>
    </div>
  </div>
</div>
