<ng-container *ngIf="inGame$ | async">
  <ng-container *ngIf="!(menuOpen$ | async)">
    <app-debug></app-debug>

    <app-group></app-group>
  </ng-container>

  <app-notification-popup-container
    class="app-notification-popup"
  ></app-notification-popup-container>

  <app-notifications [@notifications]="!(active$ | async)"></app-notifications>
  <div
    [@controls]="active$ | async"
    class="app-root-controls"
    [class.background-element]="view$ | async"
  >
    <app-window border="strip" class="app-root-menu">
      <button
        *ngIf="!(connected$ | async) && !(connectionInProgress$ | async)"
        data-style-ornament="inverted"
        [attr.data-style-active]="(view$ | async) === RootView.CONNECT"
        (click)="setView(RootView.CONNECT)"
      >
        {{ 'COMPONENT.ROOT.CONNECT' | transloco }}
      </button>
      <ng-container *ngIf="connected$ | async">
        <button
          data-style-ornament="inverted"
          [attr.data-style-active]="(view$ | async) === RootView.DISCONNECT"
          (click)="setView(RootView.DISCONNECT)"
        >
          {{ 'COMPONENT.ROOT.DISCONNECT' | transloco }}
        </button>
        <!--
        <button
          data-style-ornament="inverted"
          [attr.data-style-active]="(view | async) === RootView.RECONNECT"
          (click)="reconnect()"
        >
          {{ 'COMPONENT.ROOT.RECONNECT' | transloco }}
        </button>
        -->
        <button
          data-style-ornament="inverted"
          [attr.data-style-active]="(view$ | async) === RootView.PLAYER_MANAGER"
          (click)="setView(RootView.PLAYER_MANAGER)"
        >
          {{ 'COMPONENT.ROOT.PLAYER_MANAGER' | transloco }}
        </button>
        <button data-style-ornament="inverted" (click)="revealPlayers()">
          <!-- See note in 'root.component.scss' for explanation -->
          <div style="position: relative;">
            <span
              class="cooldown-supporting-text-normal"
              [class.cooldown-supporting-text-animating]="revealingInProgress$"
            >
              {{ 'COMPONENT.ROOT.REVEAL_PLAYERS' | transloco }}
            </span>
            <span 
              style="position: absolute; left: 0; top: 0;"
              class="text-cooldown-effect" 
              [class.cooldown-active]="revealingInProgress$"
              [style.--cooldown-duration]="revealingInProgress$ ? '10s' : '0.3s'"
            >
              {{ 'COMPONENT.ROOT.REVEAL_PLAYERS' | transloco }}
            </span>
          </div>
        </button>
      </ng-container>
      <button
        data-style-ornament="inverted"
        [attr.data-style-active]="(view$ | async) === RootView.SETTINGS"
        (click)="setView(RootView.SETTINGS)"
      >
        {{ 'COMPONENT.ROOT.SETTINGS' | transloco }}
      </button>
      <button
        *ngIf="connectionInProgress$ | async"
        data-style-ornament="inverted"
        [attr.data-style-active]="(view$ | async) === RootView.DISCONNECT"
        (click)="setView(RootView.DISCONNECT)"
      >
        {{ 'COMPONENT.ROOT.CONNECTION_IN_PROGRESS' | transloco }}
      </button>
    </app-window>
    <app-window class="app-root-chat">
      <app-chat #chat></app-chat>
    </app-window>
  </div>
  <div [@fadeInOutActive]="active$ | async" class="app-root-popups">
    <app-loading></app-loading>

    <ng-container [ngSwitch]="view$ | async">
      <app-popup *ngSwitchCase="RootView.CONNECT">
        <app-connect (done)="closeView()"></app-connect>
      </app-popup>
      <app-popup *ngSwitchCase="RootView.CONNECT_PASSWORD">
        <app-connect-password (done)="closeView()"></app-connect-password>
      </app-popup>
      <app-popup *ngSwitchCase="RootView.DISCONNECT">
        <app-disconnect (done)="closeView()"></app-disconnect>
      </app-popup>
      <app-popup *ngSwitchCase="RootView.SERVER_LIST" data-popup="server">
        <app-server-list (done)="closeView()"></app-server-list>
      </app-popup>
      <app-popup *ngSwitchCase="RootView.SETTINGS" data-popup="settings">
        <app-settings
          (done)="closeView()"
          (settingsUpdated)="updateGroupPosition()"
        ></app-settings>
      </app-popup>
      <app-popup
        *ngSwitchCase="RootView.PLAYER_MANAGER"
        data-popup="playerManager"
      >
        <app-player-manager (done)="closeView()"></app-player-manager>
      </app-popup>
    </ng-container>

    <app-error></app-error>
  </div>
</ng-container>
