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

<!-- Single Select -->
@if (!multiple) {
	<ng-select
		#select
		class="gauzy-entity-select"
		[ngClass]="panelClass"
		[addTag]="(hasAddTeam$ | async) ? createNew : null"
		[multiple]="false"
		[clearable]="isClearable()"
		[disabled]="disabled"
		[items]="teams"
		[(ngModel)]="organizationTeamId"
		[placeholder]="placeholder || 'FORM.PLACEHOLDERS.ALL_TEAMS' | translate"
		[addTagText]="'FORM.PLACEHOLDERS.ADD_TEAM' | translate"
		bindValue="id"
		bindLabel="name"
		appendTo="body"
		fullWidth
		(change)="selectTeam($event); select.blur()"
		(clear)="clearSelection(); select.blur()"
	>
		@if (shortened) {
			<ng-template ng-option-tmp let-item="item">
				@if (item.logo) {
					<img [src]="item.logo" 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.logo) {
						<img [src]="item.logo" width="20" height="20" alt="" />
					}
					<span>{{ item?.name }}</span>
				</div>
			</ng-template>
		}
	</ng-select>
} @else {
	<nb-select
		class="multiple-select"
		[disabled]="disabled"
		[multiple]="true"
		[(selected)]="organizationTeamId"
		[placeholder]="placeholder || 'FORM.PLACEHOLDERS.ALL_TEAMS' | translate"
		fullWidth
	>
		@for (team of teams; track team) {
			<nb-option [value]="team.id">
				{{ team.name }}
			</nb-option>
		}
	</nb-select>
}

<!-- Multiple Select -->