<div *ngFor="let cat of values; trackBy: trackValue" class="flex flex-row items-center justify-start gap-1">
  <ng-container *ngFor="let val of cat.values; let index=index">
    <div class="flex flex-row gap-1 justify-between items-center pl-3 py-0.5 pr-0.5 bg-gray-500 rounded-full text-xxs">
      <span class="flex flex-row items-center" [sfng-tooltip]="val.Value">
        <span class="text-secondary">
          {{labels[cat.key] || cat.key}}:
        </span>

        <span class="inline-block ml-1 overflow-hidden overflow-ellipsis whitespace-nowrap text-primary"
          style="direction: rtl" [ngStyle]="{maxWidth: maxTagWidth}">
          <span style="direction: ltr; unicode-bidi: bidi-override;">
            {{ val.Name || (val.Value === '' ? 'N/A' : val) }}
          </span>
        </span>
      </span>
      <span class="p-0.5 rounded-full cursor-pointer hover:text-primary text-secondary hover:bg-gray-100">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"
          (click)="remove(cat.key, index)">
          <path fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd" />
        </svg>
      </span>
    </div>
  </ng-container>
</div>
