<div
  #tagMenuTriggerEl
  [matMenuTriggerFor]="menuEl"
  style="visibility: hidden"
></div>

<mat-menu
  #menuEl="matMenu"
  (closed)="onMenuClosed()"
>
  <ng-template matMenuContent>
    <div (click)="$event.stopPropagation()">
      @for (tag of toggleTagList(); track $index) {
        <button
          (click)="toggleTag.emit(tag.id)"
          (keydown)="onTagMenuKeydown($event, tag.id)"
          mat-menu-item
        >
          <select-option-row
            [title]="tag.title"
            [icon]="tag.icon"
            defaultIcon="label"
            [color]="tag.color || tag.theme?.primary"
            [isSelected]="task().tagIds.includes(tag.id)"
            [showCheckbox]="true"
            [folderPath]="tagFolderMap().get(tag.id)"
          ></select-option-row>
        </button>
      }
    </div>
    <button
      mat-menu-item
      (click)="openAddNewTag()"
    >
      <mat-icon>add</mat-icon>
      {{ T.F.TAG.TTL.ADD_NEW_TAG | translate }}
    </button>
  </ng-template>
</mat-menu>
