<it-dropdown [mode]="mode">
  <ng-container button>
    <span class="visually-hidden">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>
    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>
  </ng-container>

  @if (availableLanguages) {
    <ng-container list>
      @for (lang of availableLanguages; track lang.code) {
        <it-dropdown-item (click)="changeLanguage(lang.code)" [active]="lang.code === (currentLang$ | async)?.code">
          {{ lang.label }}
          @if (lang.code === (currentLang$ | async)?.code) {
            <span class="visually-hidden">
              {{ 'it.utils.selected' | translate }}
            </span>
          }
        </it-dropdown-item>
      }
    </ng-container>
  }
</it-dropdown>
