<ng-container
  *ngIf="{
    selectedRegion: selectedRegion$ | async
  } as data"
>
  <div class="environment-selector-btn">
    {{ "loggingInOn" | i18n }}:
    <button
      type="button"
      (click)="toggle(null)"
      cdkOverlayOrigin
      #trigger="cdkOverlayOrigin"
      aria-haspopup="dialog"
      aria-controls="cdk-overlay-container"
    >
      <span class="text-primary">
        <ng-container *ngIf="data.selectedRegion; else fallback">
          {{ data.selectedRegion.domain }}
        </ng-container>
        <ng-template #fallback>
          {{ "selfHostedServer" | i18n }}
        </ng-template>
      </span>
      <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
    </button>
  </div>

  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="isOpen"
    [cdkConnectedOverlayPositions]="overlayPosition"
    [cdkConnectedOverlayHasBackdrop]="true"
    [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
    (backdropClick)="isOpen = false"
    (detach)="close()"
  >
    <div class="box-content">
      <div
        class="environment-selector-dialog"
        [@transformPanel]="'open'"
        cdkTrapFocus
        cdkTrapFocusAutoCapture
        role="dialog"
        aria-modal="true"
      >
        <ng-container *ngFor="let region of availableRegions">
          <button
            type="button"
            class="environment-selector-dialog-item"
            (click)="toggle(region.key)"
            [attr.aria-pressed]="data.selectedRegion === region ? 'true' : 'false'"
          >
            <i
              class="bwi bwi-fw bwi-sm bwi-check"
              style="padding-bottom: 1px"
              aria-hidden="true"
              [style.visibility]="data.selectedRegion === region ? 'visible' : 'hidden'"
            ></i>
            <span>{{ region.domain }}</span>
          </button>
          <br />
        </ng-container>
        <button
          type="button"
          class="environment-selector-dialog-item"
          (click)="toggle(ServerEnvironmentType.SelfHosted)"
          [attr.aria-pressed]="data.selectedRegion ? 'false' : 'true'"
        >
          <i
            class="bwi bwi-fw bwi-sm bwi-check"
            style="padding-bottom: 1px"
            aria-hidden="true"
            [style.visibility]="data.selectedRegion ? 'hidden' : 'visible'"
          ></i>
          <span>{{ "selfHostedServer" | i18n }}</span>
        </button>
      </div>
    </div>
  </ng-template>
</ng-container>
