+<h1 class="visually-hidden" i18n>Notifications</h1>
<div class="header">
- <a routerLink="/my-account/settings" fragment="notifications" i18n>Notification preferences</a>
+ <a routerLink="/my-account/settings" fragment="notifications" i18n>
+ <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+ Notification preferences
+ </a>
- <button (click)="markAllAsRead()" i18n>Mark all as read</button>
+ <div class="peertube-select-container peertube-select-button ms-2 me-2">
+ <select [(ngModel)]="notificationSortType" (ngModelChange)="onChangeSortColumn()" class="form-control">
+ <option value="undefined" disabled>Sort by</option>
+ <option value="createdAt" i18n>Newest first</option>
+ <option value="read" [disabled]="!hasUnreadNotifications()" i18n>Unread first</option>
+ </select>
+ </div>
+
+ <button class="btn ms-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
+ <ng-container *ngIf="hasUnreadNotifications()">
+ <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon>
+
+ <span i18n>Mark all as read</span>
+ </ng-container>
+
+ <ng-container *ngIf="!hasUnreadNotifications()">
+ <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
+
+ <span i18n>All read</span>
+ </ng-container>
+ </button>
</div>
<my-user-notifications #userNotification></my-user-notifications>