@if (label) {
  <label class="label">{{ label | translate }}</label>
}

<!-- Single Select -->
@if (!multiple) {
  <ng-select
    #select
    class="gauzy-entity-select"
    [ngClass]="panelClass"
    [addTag]="(hasAddProject$ | async) ? createNew : null"
    [multiple]="multiple"
    [clearable]="isClearable()"
    [disabled]="disabled"
    [items]="projects"
    (change)="selectProject($event); select.blur()"
    (clear)="select.blur(); clearSelection()"
    [(ngModel)]="projectId"
    [placeholder]="placeholder || 'FORM.PLACEHOLDERS.ALL_PROJECTS' | translate"
    [addTagText]="'FORM.PLACEHOLDERS.ADD_PROJECT' | translate"
    bindValue="id"
    bindLabel="name"
    appendTo="body"
    fullWidth
    >
    @if (shortened) {
      <ng-template ng-option-tmp let-item="item" let-index="index">
        @if (item.imageUrl) {
          <img [src]="item.imageUrl" width="20" height="20" alt="" />
        }
        <span>{{ item?.name }}</span>
      </ng-template>
      <ng-template ng-label-tmp let-item="item">
        <div class="selector-template" [title]="item?.name">
          @if (item.imageUrl) {
            <img [src]="item.imageUrl" width="20" height="20" alt="" />
          }
          <span>{{ item?.name }}</span>
        </div>
      </ng-template>
    }
  </ng-select>
} @else {
  <nb-select
    class="multiple-select"
    [disabled]="disabled"
    [multiple]="multiple"
    [placeholder]="placeholder || 'FORM.PLACEHOLDERS.ALL_PROJECTS' | translate"
    [(selected)]="projectId"
    fullWidth
    >
    @for (project of projects; track project) {
      <nb-option [value]="project.id">
        @if (project?.imageUrl) {
          <img [src]="project?.imageUrl" width="20px" height="20px" />
        }
        <span class="ml-1">{{ project.name }}</span>
      </nb-option>
    }
  </nb-select>
}

<!-- Multi Select -->