@if (!isRoot) { <router-outlet [class.devEnvironment]="isDev"></router-outlet> }
@if (isRoot) {
<ng-container>
  <global-bar></global-bar>
  <h1 class="t-text-color3 topBuffer">Add components and then route them in app-routing.module.ts</h1>
</ng-container>
}

@if (saveThemeResult$ | async) {<ng-container></ng-container> }

@if ((isTopless$ | async) === false) {
<div [class.devEnvironment]="isDev" class="paletteContainer"
  (mouseover)="palettePickerOpened ? setMouseOver(false) : setMouseOver(true)" (mouseout)="setMouseOver(false)">
  <div kendoTooltip class="palettePicker" (click)="setPalettePickerState()" title="Themes">
    <kendo-svg-icon [icon]="icons.paletteIcon"></kendo-svg-icon>
  </div>
  @if (palettePickerOpened) {
  <div class="themes t-bg-color1">
    <div class="rowItem-g">
      <div class="row">
        <div class="rowItem-g">
          <div class="themeSelection" [active-class]="'t-text-active2'" [hover-class]="'t-bg-hover2'"
            (click)="setTheme('t1')">
            <span>Default Theme</span>
            <span>(Light)</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="rowItem-g">
          <div class="themeSelection" [active-class]="'t-text-active2'" [hover-class]="'t-bg-hover2'"
            (click)="setTheme('t2')">
            <span>Blue Theme</span>
            <span>(Dark)</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="rowItem-g">
          <div class="themeSelection" [active-class]="'t-text-active2'" [hover-class]="'t-bg-hover2'"
            (click)="setTheme('t3')">
            <span>Gray Theme</span>
            <span>(Dark)</span>
          </div>
        </div>
      </div>
      <!--new themes also need to be added to top of site.scss-->
    </div>
  </div>
  }
</div>
}

<div kendoDialogContainer></div>