<div
  class="app-wrapper"
  [appTheme]="theme$ | async"
  [appDarkTheme]="themeDark$ | async"
  [appAccentColor]="accentColor$ | async"
  appFileDrop
  (fileDroppedChange)="fileDropped($event)"
>
  <nz-layout class="main-container">
    @if (!isReady) {
      <div class="loading-screen styled">
        <div class="loading-screen-inner">
          <div class="loading-screen-logo-container">
            <img src="assets/img/altair_logo.svg" alt="Altair" />
          </div>
          <div class="loading-screen-loading-indicator">
            <span class="loading-indicator-dot"></span>
            <span class="loading-indicator-dot"></span>
            <span class="loading-indicator-dot"></span>
          </div>
        </div>
      </div>
    }
    <app-header
      [windows]="windows"
      [windowIds]="windowIds"
      [activeWindowId]="activeWindowId"
      [closedWindows]="closedWindows"
      [isElectron]="isElectron"
      [headerPanels]="headerPanels$ | async"
      [activeEnvironment]="activeEnvironment$ | async"
      [environments]="environments$ | async"
      [settings]="settings$ | async"
      (newWindowChange)="newWindow()"
      (activeWindowChange)="setActiveWindow($event)"
      (removeWindowChange)="removeWindow($event)"
      (duplicateWindowChange)="duplicateWindow($event)"
      (windowNameChange)="setWindowName($event)"
      (repositionWindowChange)="repositionWindow($event)"
      (reopenClosedWindowChange)="reopenClosedWindow()"
      (togglePanelActiveChange)="togglePanelActive($event)"
      (selectActiveEnvironmentChange)="selectActiveEnvironment($event)"
      (toggleEnvironmentManagerChange)="toggleEnvironmentManager($event)"
      (importWindowChange)="importWindow()"
      (showImportCurlDialogChange)="setShowImportCurlDialog($event)"
      (showSettingsDialogChange)="showSettingsDialog()"
      (exportBackupDataChange)="exportBackupData()"
      (importBackupDataChange)="importBackupData()"
    ></app-header>
    <nz-layout>
      @if (isWebApp) {
        <nz-alert nzBanner [nzMessage]="webappLimitation"></nz-alert>
      }
      <ng-template #webappLimitation>
        <span class="alert-text">
          Disclaimer: The web app has limitations enforced by the WHATWG spec. For
          the best experience and functionality, use the desktop app or browser
          extensions instead.
        </span>
        <button
          class="btn alert-action"
          (click)="openWebAppLimitationPost($event)"
          track-id="web_app_disclaimer_learn_more"
        >
          Learn more
        </button>
      </ng-template>
      <nz-layout class="inner-layout">
        <nz-content class="main-container-inner">
          <div class="app-side-menu">
            <div class="side-menu__main">
              <a
                class="side-menu-item"
                (click)="toggleHeader(true)"
                attr.aria-label="{{ 'SET_HEADERS_BUTTON' | translate }}"
                track-id="show_set_headers"
              >
                <div class="side-menu-item-icon">
                  <app-icon name="loader"></app-icon>
                </div>
                <div class="side-menu-item-label">
                  {{ 'SET_HEADERS_BUTTON' | translate }}
                </div>
              </a>
              <a
                class="side-menu-item"
                (click)="toggleRequestHandlerDialog(true)"
                attr.aria-label="{{ 'REQUEST_HANDLERS_TEXT' | translate }}"
                track-id="show_request_handler_dialog"
              >
                <div class="side-menu-item-icon">
                  <app-icon name="repeat"></app-icon>
                </div>
                <div class="side-menu-item-label">
                  {{ 'REQUEST_HANDLERS_TEXT' | translate }}
                </div>
              </a>
              <a
                class="side-menu-item"
                (click)="toggleHistoryDialog(true)"
                attr.aria-label="{{ 'HISTORY_TEXT' | translate }}"
                track-id="show_history"
              >
                <div class="side-menu-item-icon">
                  <app-icon name="history"></app-icon>
                </div>
                <div class="side-menu-item-label">
                  {{ 'HISTORY_TEXT' | translate }}
                </div>
              </a>
              <a
                class="side-menu-item"
                (click)="toggleRequestExtensionsDialog(true)"
                attr.aria-label="{{ 'REQUEST_EXTENSIONS_TEXT' | translate }}"
                track-id="request_extensions"
              >
                <div class="side-menu-item-icon">
                  <app-icon name="braces"></app-icon>
                </div>
                <div class="side-menu-item-label">
                  {{ 'REQUEST_EXTENSIONS_TEXT' | translate }}
                </div>
              </a>
              <div class="side-menu-divider"></div>
              <div class="side-menu-item">
                <div class="side-menu-item-icon">
                  <app-icon name="briefcase"></app-icon>
                </div>
                <div class="side-menu-item-submenu">
                  <a
                    class="submenu-item"
                    (click)="prettifyCode()"
                    attr.aria-label="{{ 'PRETTIFY_BUTTON' | translate }}"
                    track-id="prettify"
                  >
                    <div class="submenu-item-icon">
                      <app-icon name="paintbrush"></app-icon>
                    </div>
                    <div class="submenu-item-label">
                      {{ 'PRETTIFY_BUTTON' | translate }}
                    </div>
                  </a>
                  <a
                    class="submenu-item"
                    (click)="compressQuery()"
                    attr.aria-label="{{ 'COMPRESS_QUERY_BUTTON' | translate }}"
                    track-id="compress_query"
                  >
                    <div class="submenu-item-icon">
                      <app-icon name="minimize-2"></app-icon>
                    </div>
                    <div class="submenu-item-label">
                      {{ 'COMPRESS_QUERY_BUTTON' | translate }}
                    </div>
                  </a>
                  <a
                    class="submenu-item"
                    (click)="clearEditor()"
                    attr.aria-label="{{ 'CLEAR_BUTTON' | translate }}"
                    track-id="clear"
                  >
                    <div class="submenu-item-icon">
                      <app-icon name="trash-2"></app-icon>
                    </div>
                    <div class="submenu-item-label">
                      {{ 'CLEAR_BUTTON' | translate }}
                    </div>
                  </a>
                  <a
                    class="submenu-item"
                    (click)="copyAsCurl()"
                    attr.aria-label="{{ 'COPY_AS_CURL_BUTTON' | translate }}"
                    track-id="copy_as_curl"
                  >
                    <div class="submenu-item-icon">
                      <app-icon name="terminal"></app-icon>
                    </div>
                    <div class="submenu-item-label">
                      {{ 'COPY_AS_CURL_BUTTON' | translate }}
                    </div>
                  </a>
                  <a
                    class="submenu-item"
                    (click)="convertToNamedQuery()"
                    attr.aria-label="{{
                      'CONVERT_TO_NAMED_QUERY_BUTTON' | translate
                    }}"
                    track-id="convert_to_named_query"
                  >
                    <div class="submenu-item-icon">
                      <app-icon name="tag"></app-icon>
                    </div>
                    <div class="submenu-item-label">
                      {{ 'CONVERT_TO_NAMED_QUERY_BUTTON' | translate }}
                    </div>
                  </a>
                  <a
                    class="submenu-item"
                    (click)="refactorQuery()"
                    attr.aria-label="{{ 'REFACTOR_QUERY_BUTTON' | translate }}"
                  >
                    <div class="submenu-item-icon">
                      <app-icon name="disc"></app-icon>
                    </div>
                    <div class="submenu-item-label">
                      {{ 'REFACTOR_QUERY_BUTTON' | translate }}
                    </div>
                  </a>
                </div>
              </div>
              <div class="side-menu-divider"></div>

              <div class="side-menu__panels">
                @for (
                  panel of sidebarPanels$ | async;
                  track trackById($index, panel)
                ) {
                  <a
                    class="side-menu-item"
                    (click)="togglePanelActive(panel)"
                    attr.aria-label="{{ panel.title }}"
                    [ngClass]="{ 'side-menu-item--active': panel.isActive }"
                  >
                    <div class="side-menu-item-icon">
                      @if (panel.iconUrl) {
                        <img [src]="panel.iconUrl" [alt]="panel.title" />
                      } @else if (panel.iconSvg) {
                        <app-icon [svg]="panel.iconSvg"></app-icon>
                      } @else {
                        <app-icon name="cpu"></app-icon>
                      }
                    </div>
                    <div class="side-menu-item-label">
                      {{ panel.title }}
                    </div>
                  </a>
                }
              </div>

              <div class="side-menu__main-bottom">
                <a
                  class="side-menu-item"
                  (click)="toggleCollections()"
                  attr.aria-label="{{ 'COLLECTIONS_TEXT' | translate }}"
                  track-id="show_collections"
                  [ngClass]="{ 'side-menu-item--active': showCollections }"
                >
                  <div class="side-menu-item-icon">
                    <app-icon name="folder"></app-icon>
                  </div>
                  <div class="side-menu-item-label">
                    {{ 'COLLECTIONS_TEXT' | translate }}
                  </div>
                </a>
                @if (serverReady && authEnabled) {
                  <a
                    class="side-menu-item"
                    attr.aria-label="{{ 'ACCOUNT_TITLE' | translate }}"
                    track-id="show_collections"
                    [ngClass]="{
                      'side-menu-item--active': (account$ | async)?.loggedIn
                    }"
                  >
                    <div class="side-menu-item-icon">
                      @if (!(account$ | async)?.loggedIn) {
                        <app-icon name="user"></app-icon>
                      }
                      @if ((account$ | async)?.loggedIn) {
                        <nz-avatar
                          [nzText]="(account$ | async)?.firstName?.at(0)"
                          [nzSrc]="(account$ | async)?.picture"
                          [nzSize]="'small'"
                        ></nz-avatar>
                      }
                    </div>
                    <div class="side-menu-item-label">
                      {{ 'ACCOUNT_TITLE' | translate }}
                    </div>
                    <div
                      class="side-menu-item-submenu side-menu-item-submenu--bottom"
                    >
                      @if (!(account$ | async)?.loggedIn) {
                        <a class="submenu-item" (click)="setShowAccountDialog(true)">
                          <div class="submenu-item-icon">
                            <app-icon name="log-in"></app-icon>
                          </div>
                          <div class="submenu-item-label">
                            {{ 'LOGIN_TAB' | translate }}
                          </div>
                        </a>
                      }
                      @if ((account$ | async)?.loggedIn) {
                        @if ((account$ | async)?.plan?.canUpgradePro) {
                          <a
                            class="submenu-item submenu-item--upgrade"
                            (click)="setShowUpgradeDialog(true)"
                          >
                            <div class="submenu-item-icon">
                              <app-icon name="trending-up"></app-icon>
                            </div>
                            <div class="submenu-item-label">
                              {{ 'UPGRADE_PRO_TEXT' | translate }}
                            </div>
                          </a>
                        }
                        <a class="submenu-item" (click)="setShowAccountDialog(true)">
                          <div class="submenu-item-icon">
                            <app-icon name="user"></app-icon>
                          </div>
                          <div class="submenu-item-label">
                            {{ 'PROFILE_TEXT' | translate }}
                          </div>
                        </a>
                        <a class="submenu-item" (click)="setShowTeamsDialog(true)">
                          <div class="submenu-item-icon">
                            <app-icon name="users"></app-icon>
                          </div>
                          <div class="submenu-item-label">
                            {{ 'TEAMS_TEXT' | translate }}
                          </div>
                        </a>
                        <a class="submenu-item" (click)="logout()">
                          <div class="submenu-item-icon">
                            <app-icon name="log-out"></app-icon>
                          </div>
                          <div class="submenu-item-label">
                            {{ 'LOGOUT_TEXT' | translate }}
                          </div>
                        </a>
                      }
                    </div>
                  </a>
                }
              </div>
            </div>
            <div class="side-menu__extra">
              <app-query-collections
                [showCollections]="showCollections"
                [collections]="sortedCollections$ | async"
                [workspaces]="workspaces$ | async"
                [sortBy]="(collectionsMeta$ | async)?.collectionsSortBy"
                [queriesSortBy]="(collectionsMeta$ | async)?.queriesSortBy"
                [loggedIn]="(account$ | async)?.loggedIn"
                (loadCollectionsChange)="loadCollections()"
                (selectQueryChange)="selectQueryFromCollection($event)"
                (deleteQueryChange)="deleteQueryFromCollection($event)"
                (deleteCollectionChange)="deleteCollection($event)"
                (editCollectionChange)="toggleEditCollectionDialog($event)"
                (syncCollectionChange)="syncLocalCollectionToRemote($event)"
                (exportCollectionChange)="exportCollection($event)"
                (importCollectionsChange)="importCollections()"
                (sortCollectionQueriesChange)="sortCollectionQueries($event)"
                (sortCollectionsChange)="sortCollections($event)"
                (syncCollectionsChange)="syncCollections()"
                (showQueryRevisionsChange)="showQueryRevisions($event)"
                (copyQueryShareLinkChange)="copyQueryShareLink($event)"
              ></app-query-collections>
            </div>
            <div class="sidebar__panels">
              @for (panel of sidebarPanels$ | async; track panel.id) {
                @if (panel.isActive) {
                  <app-element-wrapper
                    [element]="panel.element"
                  ></app-element-wrapper>
                }
              }
            </div>
          </div>
          @for (windowId of windowIds; track windowId) {
            <app-window
              [windowId]="windowId"
              [class.hide]="windowId !== activeWindowId"
            ></app-window>
          }
        </nz-content>
        <div class="dialogs">
          <app-environment-manager
            [showEnvironmentManager]="(windowsMeta$ | async)?.showEnvironmentManager"
            [environments]="environments$ | async"
            (toggleDialogChange)="toggleEnvironmentManager(!!$event)"
            (baseEnvironmentJsonChange)="updateBaseEnvironmentJson($event)"
            (subEnvironmentJsonChange)="updateSubEnvironmentJson($event)"
            (subEnvironmentTitleChange)="updateSubEnvironmentTitle($event)"
            (addSubEnvironmentChange)="addNewSubEnvironment()"
            (deleteSubEnvironmentChange)="deleteSubEnvironment($event)"
            (repositionSubEnvironmentsChange)="repositionSubEnvironments($event)"
            (importEnvironmentChange)="importEnvironmentData()"
            (exportEnvironmentChange)="exportEnvironment($event)"
          ></app-environment-manager>
          <app-plugin-manager
            [showPluginManager]="(windowsMeta$ | async)?.showPluginManager"
            [settings]="settings$ | async"
            (toggleDialogChange)="togglePluginManager(!!$event)"
            (settingsJsonChange)="setSettingsJson($event)"
          ></app-plugin-manager>
          <app-settings-dialog
            [showSettingsDialog]="(windowsMeta$ | async)?.showSettingsDialog"
            [settings]="settings$ | async"
            [appVersion]="appVersion"
            (toggleDialogChange)="
              $event ? showSettingsDialog() : hideSettingsDialog()
            "
            (settingsJsonChange)="setSettingsJson($event)"
          ></app-settings-dialog>
          <app-import-curl-dialog
            [showImportCurlDialog]="showImportCurlDialog"
            (toggleDialogChange)="setShowImportCurlDialog($event)"
            (importCurlChange)="importWindowFromCurl($event)"
          ></app-import-curl-dialog>
          <app-add-collection-query-dialog
            [showDialog]="(windowsMeta$ | async)?.showAddToCollectionDialog"
            [windowTitle]="(activeWindow$ | async)?.layout?.title"
            [collections]="(collection$ | async)?.list"
            [loggedIn]="(account$ | async)?.loggedIn"
            [workspaces]="workspaces$ | async"
            (toggleDialogChange)="setShowAddToCollectionDialog($event)"
            (saveQueryToCollectionChange)="saveQueryToCollection($event)"
            (createCollectionAndSaveQueryToCollectionChange)="
              createCollectionAndSaveQueryToCollection($event)
            "
          ></app-add-collection-query-dialog>
          <app-edit-collection-dialog
            [showEditCollectionDialog]="showEditCollectionDialog"
            [collection]="(collection$ | async)?.activeCollection"
            (toggleDialogChange)="setShowEditCollectionDialog($event)"
            (updateCollectionChange)="updateCollection($event)"
          ></app-edit-collection-dialog>
          <app-account-dialog
            [showDialog]="(windowsMeta$ | async)?.showAccountDialog"
            [account]="account$ | async"
            (toggleDialogChange)="setShowAccountDialog($event)"
            (handleLoginChange)="accountLogin()"
            (logoutChange)="logout()"
          ></app-account-dialog>
          <app-teams-dialog
            [teams]="(account$ | async)?.teams"
            [showDialog]="(windowsMeta$ | async)?.showTeamsDialog"
            (toggleDialogChange)="setShowTeamsDialog($event)"
            (reloadTeamChange)="loadTeams()"
          ></app-teams-dialog>
          <app-upgrade-dialog
            [showDialog]="(windowsMeta$ | async)?.showUpgradeDialog"
            [userPlan]="(account$ | async)?.plan"
            [planInfos]="(account$ | async)?.planInfos"
            (toggleDialogChange)="setShowUpgradeDialog($event)"
          ></app-upgrade-dialog>
          <app-query-revision-dialog
            [showDialog]="!!queryRevisionQueryId"
            [queryId]="queryRevisionQueryId"
            (toggleDialogChange)="queryRevisionQueryId = ''"
            (restoreRevision)="restoreQueryRevision($event)"
          ></app-query-revision-dialog>
        </div>

        <app-banner-container></app-banner-container>
        @if (showDonationAlert) {
          <nz-alert
            nzBanner
            [nzMessage]="supportDevelopment"
            nzCloseable
            (nzOnClose)="hideDonationAlert()"
          ></nz-alert>
        }
        <ng-template #supportDevelopment>
          <span class="alert-text">
            Do you find this app useful? Would you mind supporting its development?
          </span>
          <button
            class="btn btn--primary btn--light"
            (click)="openDonationPage($event)"
            track-id="donate"
          >
            Donate
          </button>
          @if ((account$ | async)?.plan?.canUpgradePro) {
            or
            <button
              class="btn btn--primary btn--light"
              (click)="setShowUpgradeDialog(true)"
              track-id="upgrade_pro"
            >
              Upgrade to Pro
            </button>
          }
        </ng-template>
      </nz-layout>
    </nz-layout>
  </nz-layout>
</div>
