<ng-container *ngVar="(supervisionOrderEntries$ | async) as supervisionOrders">
  @if (supervisionOrders?.length > 0) {
    <div class="item-list-supervision">
      <div>
        <span>{{'workflow-item.search.result.list.element.supervised-by' | translate}} </span>
      </div>
      <div>
        @for (supervisionOrder of supervisionOrders; track supervisionOrder) {
          <a class="badge bg-primary me-1 mb-1 text-capitalize mw-100 text-truncate" data-test="soBadge"
            [ngbTooltip]="'workflow-item.search.result.list.element.supervised.remove-tooltip' | translate"
            (click)="$event.preventDefault(); $event.stopImmediatePropagation(); deleteSupervisionOrder(supervisionOrder)" aria-label="Close">
            {{ dsoNameService.getName(supervisionOrder.group) }}
            <span aria-hidden="true"> ×</span>
          </a>
        }
      </div>
    </div>
  }
</ng-container>
