<button
  type="button"
  class="locale-switcher__trigger"
  [cdkMenuTriggerFor]="localeMenu"
  [attr.aria-label]="triggerAriaLabel"
>
  <lib-icon name="globe" [size]="14" />
  <span>{{ currentDisplayName }}</span>
  <lib-icon name="chevron-down" [size]="12" />
</button>

<ng-template #localeMenu>
  <div
    cdkMenu
    class="locale-switcher__menu"
    role="menu"
    i18n-aria-label="@@locale.menu.aria"
    aria-label="Language"
  >
    @for (locale of locales; track locale.code) {
    <button
      type="button"
      cdkMenuItem
      class="locale-switcher__item"
      [class.locale-switcher__item--active]="locale.code === currentCode"
      [attr.aria-checked]="locale.code === currentCode"
      [attr.lang]="locale.code"
      role="menuitemradio"
      (click)="select(locale.code)"
    >
      <span class="locale-switcher__label">{{ locale.displayName }}</span>
      @if (locale.code === currentCode) {
      <lib-icon name="check" [size]="16" />
      }
    </button>
    }
  </div>
</ng-template>
