@if (_template === 'ng-select') {
  <ng-select
    class="language-select"
    [items]="languages"
    appendTo="body"
    bindLabel="name"
    bindValue="code"
    [loading]="loading"
    [addTag]="(addTag) ? addLanguage : null"
    (change)="onChangeLanguage($event)"
    [closeOnSelect]="true"
    [clearable]="clearable"
    [placeholder]="placeholder"
    [labelForId]="labelForId"
    [(ngModel)]="selectedLanguageCode"
  >
    <ng-template ng-label-tmp let-item="item">
      <span class="language-option">
        @if (getFlagUrl(item?.code); as flagUrl) {
          <img class="flag-icon" [src]="flagUrl" (error)="onFlagError($event)" width="18" height="12" alt="" />
        }
        <span class="language-option-name">{{ item?.name }}</span>
      </span>
    </ng-template>
    <ng-template ng-option-tmp let-item="item">
      <span class="language-option">
        @if (getFlagUrl(item?.code); as flagUrl) {
          <img class="flag-icon" [src]="flagUrl" (error)="onFlagError($event)" width="18" height="12" alt="" />
        }
        <span class="language-option-name">{{ item?.name }}</span>
      </span>
    </ng-template>
    <ng-template ng-tag-tmp let-newLanguageName="searchTerm">
      <b>{{ 'LANGUAGE_PAGE.ADD_NEW_LANGUAGE' | translate }}</b>: {{ newLanguageName }}
    </ng-template>
  </ng-select>
} @else {
  <nb-select
    fullWidth
    (selectedChange)="onSelectedChange($event)"
    [size]="size"
    [placeholder]="placeholder"
    [(ngModel)]="selectedLanguageCode"
  >
    <nb-select-label>
      <span class="language-option">
        @if (getFlagUrl(selectedLanguage?.code); as flagUrl) {
          <img class="flag-icon" [src]="flagUrl" (error)="onFlagError($event)" width="18" height="12" alt="" />
        }
        <span class="language-option-name">{{ selectedLanguage?.name }}</span>
      </span>
    </nb-select-label>
    @for (language of languages; track language) {
      <nb-option [value]="language.code">
        <span class="language-option">
          @if (getFlagUrl(language.code); as flagUrl) {
            <img class="flag-icon" [src]="flagUrl" (error)="onFlagError($event)" width="18" height="12" alt="" />
          }
          <span class="language-option-name">{{ language.name }}</span>
        </span>
      </nb-option>
    }
  </nb-select>
}