<ng-container
  *ngIf="{
    selectedRegion: selectedRegion$ | async,
  } as data"
>
  <div class="tw-mb-1">
    <bit-menu #environmentOptions>
      <button
        *ngFor="let region of availableRegions$ | async; let i = index"
        bitMenuItem
        type="button"
        [attr.aria-pressed]="data.selectedRegion === region ? 'true' : 'false'"
        (click)="toggle(region.key)"
      >
        <bit-icon
          name="bwi-check"
          class="bwi-fw bwi-sm"
          style="padding-bottom: 1px"
          [style.visibility]="data.selectedRegion === region ? 'visible' : 'hidden'"
        ></bit-icon>
        <span>{{ region.domain }}</span>
      </button>
      <button
        bitMenuItem
        type="button"
        [attr.aria-pressed]="data.selectedRegion ? 'false' : 'true'"
        (click)="toggle(ServerEnvironmentType.SelfHosted)"
      >
        <bit-icon
          name="bwi-check"
          class="bwi-fw bwi-sm"
          style="padding-bottom: 1px"
          [style.visibility]="data.selectedRegion ? 'hidden' : 'visible'"
        ></bit-icon>
        <span>{{ "selfHostedServer" | i18n }}</span>
      </button>
    </bit-menu>
    <div bitTypography="body2">
      {{ "accessing" | i18n }}:
      <button [bitMenuTriggerFor]="environmentOptions" bitLink type="button">
        <b class="tw-text-primary-600 tw-font-medium">{{
          data.selectedRegion?.domain || ("selfHostedServer" | i18n)
        }}</b>
        <bit-icon name="bwi-angle-down" class="bwi-fw bwi-sm"></bit-icon>
      </button>
    </div>
  </div>
</ng-container>
