<div class="sort">
  <button class="sort__button" mat-stroked-button [matMenuTriggerFor]="sortMenu" matTooltip="Modify sorting order">
    <mat-icon>sort</mat-icon>

    <mat-menu #sortMenu="matMenu" >
      <button mat-menu-item [matMenuTriggerFor]="sortDirection">Sort direction</button>
      <button mat-menu-item [matMenuTriggerFor]="sortValue">Sort value</button>
    </mat-menu>

    <!-- SORT DIRECTION -->
    <mat-menu #sortDirection="matMenu">
      <!-- ASCENDING ORDER BUTTON -->
      <button mat-menu-item (click)="changeOrder(sortDirectionEnum.ASC)">
        <span *ngIf="sort.order === sortDirectionEnum.ASC; else coloredAsc">
          <mat-icon class="sort__selected-value"> arrow_upward </mat-icon>
          <span class="sort__selected-value"> Ascending </span>
        </span>
        <ng-template #coloredAsc>
          <mat-icon> arrow_upward </mat-icon>
          <span> Ascending </span>
        </ng-template>
      </button>

      <!-- DESCENDING ORDER BUTTON -->
      <button mat-menu-item (click)="changeOrder(sortDirectionEnum.DESC)">
        <span *ngIf="sort.order === sortDirectionEnum.DESC; else coloredDesc">
          <mat-icon class="sort__selected-value"> arrow_downward </mat-icon>
          <span class="sort__selected-value"> Descending </span>
        </span>
        <ng-template #coloredDesc>
          <mat-icon> arrow_downward </mat-icon>
          <span> Descending </span>
        </ng-template>
      </button>
    </mat-menu>

    <!-- SORT VALUE -->
    <mat-menu #sortValue="matMenu">
      <button mat-menu-item *ngFor="let sortingField of sortingFields | mapValues"
              (click)="changeSortBy(sortingField.key)">
        <span class="{{sortingField.key === sort['sort-by']  ? 'sort__selected-value' : ''}}">
          {{sortingField.value}}
        </span>
        <ng-template #coloredValue>
          <span>{{sortingField.value}}</span>
        </ng-template>
      </button>
    </mat-menu>
  </button>
</div>




<!-- with radio buttons
<mat-radio-group name="sort" class="radio-group">
  <mat-radio-button *ngFor="let sortingField of sortingFields | mapValues"
                    name="sort" [checked]="sortingField.key === defaultSortBy"
                    (change)="changeSortBy(sortingField.key)" [value]="sortingField.value"> {{ sortingField.value }}</mat-radio-button>
</mat-radio-group> -->
