<ng-container *ngIf="meetsRequirement; else doesNotMeetReqTemplate">

<!-- if not mobile -->
  <ng-template [ngIf]="!isMobile" [ngIfElse]="mobileTemplate">
    <ng-container *ngTemplateOutlet="viewerBody">
    </ng-container>
  </ng-template>
  
  <!-- if mobile -->
  <ng-template #mobileTemplate>
    <mat-sidenav-container
      (backdropClick)="changeMenuState({close: true})"
      class="w-100 h-100">
      <mat-sidenav
        #sidenav
        [fixedInViewport]="true"
        [disableClose]="true"
        [opened]="sidePanelOpen$ | async" 
        class="mobileNavigationPanel p-2"
        [ngStyle]="{'background-color': darktheme? '#404040' : '#F2F2F2'}" >
  
        <!-- 'absorbs' the auto-focus behavior -->
        <button mat-button style="height: 0; position: absolute;"></button>
        <logo-container class="logoContainerMobile"></logo-container>
  
        <tabset #mobileMenuTabs [justified]="true" class="mobileMenuTabs" >
          <tab heading="Template">
            <signin-banner [darktheme] = "darktheme" signinWrapper></signin-banner>
            <layout-floating-container *ngIf="this.nehubaContainer && this.nehubaContainer.nehubaViewer">
              <ui-status-card 
                  [selectedTemplate]="selectedTemplate" 
                  [isMobile]="isMobile"
                  [onHoverSegmentName]="this.nehubaContainer.onHoverSegmentName$ | async"
                  [nehubaViewer]="this.nehubaContainer.nehubaViewer">
              </ui-status-card>
            </layout-floating-container>
          </tab>
          <tab heading="Containers">
            <menu-icons iconWrapper hidden #MenuIcons>
            </menu-icons>
            <panel-component>
              <div class="m-2" heading>
                Layer Browser
              </div>
              <div class="m-2" body>
                <layer-browser></layer-browser>
              </div>
            </panel-component>
            <div dockedContainerDirective>
            </div>
          </tab>
        </tabset>
  
      </mat-sidenav>
      
      <mat-sidenav-content>
        <ng-container *ngTemplateOutlet="viewerBody">
  
        </ng-container>
      </mat-sidenav-content>
  
    </mat-sidenav-container>
  
    <div class="btnWrapper btnWrapper-lg menuButtonMobile m-2" (click)="changeMenuState()">
      <div
        class="shadow btn btn-sm btn-secondary rounded-circle">
        <i class="fas fa-bars"></i>
      </div>
    </div>
  </ng-template>
</ng-container>


<ng-template #helpComponent>
  <tabset>
    <tab heading="Help">
      <help-component>
      </help-component>
    </tab>
    <tab heading="Settings">
      <div class="mt-2">
        <config-component>
        </config-component>
      </div>
    </tab>
    <tab heading="Privacy Policy">
      <div class="mt-2">
        <cookie-agreement>
        </cookie-agreement>
      </div>
    </tab>
    <tab heading="Terms of Use">
      <div class="mt-2">
        <kgtos-component>
        </kgtos-component>
      </div>
    </tab>
  </tabset>
</ng-template>
<ng-template #signinModalComponent>
  <signin-modal>
    
  </signin-modal>
</ng-template>

<ng-template #kgToS>
    <kgtos-component>
    </kgtos-component>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="kgTosClickedOk()">Ok</button>
    </div>
  </ng-template>

<ng-template #cookieAgreementComponent>
  <cookie-agreement>
  </cookie-agreement>

  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="cookieClickedOk()">Ok</button>
  </div>
</ng-template>

<!-- atlas template -->
<ng-template #viewerBody>
  <div class="atlas-container" helpdirective>

    <ui-nehuba-container (contextmenu)="nehubaClickHandler($event)">
    </ui-nehuba-container>
  
    <div *ngIf="!isMobile" bannerWrapper>
      <menu-icons iconWrapper *ngIf="selectedTemplate">
      </menu-icons>

      <div *ngIf="!selectedTemplate"></div>
      <signin-banner signinWrapper [ngStyle]="{'margin-right': !selectedTemplate? '20px': ''}">
      </signin-banner>
    </div>
  
    <layout-floating-container
      zIndex="13"
      #floatingOverlayContainer>
      <div floatingContainerDirective>
  
      </div>
      
      <!-- TODO move to nehuba overlay container -->
      <panel-component class="shadow" fixedMouseContextualContainerDirective #rClContextMenu>
        <div heading>
          <h5 class="pe-all p-2 m-0">
            What's here?
          </h5>
        </div>
        <div body>

          <div
            *ngIf="(onhoverSegmentsForFixed$ | async)?.length > 0 || (selectedRegions$ | async)?.length > 0"
            class="p-2">
            Search for data relating to:
          </div>
          
          <div
            *ngFor="let onhoverSegmentFixed of (onhoverSegmentsForFixed$ | async)"
            (click)="searchRegion([onhoverSegmentFixed])"
            class="ws-no-wrap text-left pe-all btn btn-sm btn-secondary btn-block mt-0"
            data-toggle="tooltip" 
            data-placement="top" 
            [title]="onhoverSegmentFixed.name">
            <small class="text-semi-transparent">(hovering)</small> {{ onhoverSegmentFixed.name }}
          </div>
  
          <div
            *ngIf="(selectedRegions$ | async)?.length > 0 && (selectedRegions$ | async); let selectedRegions"
            (click)="searchRegion(selectedRegions)"
            class="ws-no-wrap text-left pe-all mt-0 btn btn-sm btn-secondary btn-block">
            <ng-container *ngIf="selectedRegions.length > 1">
              <small class="text-semi-transparent">(selected)</small> {{ selectedRegions.length }} selected regions
            </ng-container>
            <ng-container *ngIf="selectedRegions.length === 1">
              <small class="text-semi-transparent">(selected)</small> {{ selectedRegions[0].name }}
            </ng-container>
          </div>
          
          <div
            class="p-2 text-muted"
            *ngIf="(onhoverSegmentsForFixed$ | async)?.length === 0 && (selectedRegions$ | async)?.length === 0">
            Right click on a parcellation region or select parcellation regions to search KG for associated datasets.
          </div>
  
          <ng-template #noRegionSelected>
            <div
              (click)="searchRegion()"
              class="ws-no-wrap text-left pe-all mt-0 btn btn-sm btn-secondary btn-block">
              No region selected. Search KG for all datasets in this template space.
            </div>
          </ng-template>
  
        </div>
      </panel-component>
      
      <div floatingMouseContextualContainer floatingMouseContextualContainerDirective>
        <div 
          *ngIf="onhoverLandmark$ | async" 
          contextualBlock>
          {{ onhoverLandmark$ | async }} <i><small class = "mute-text">{{ toggleMessage }}</small></i>
        </div>
        <div 
          *ngIf="onhoverSegments$ | async; let onhoverSegments"
          contextualBlock>
          <div
            *ngFor="let segment of onhoverSegments"
            [innerHtml]="segment | transformOnhoverSegment">
          </div>
          <i><small class = "mute-text">{{ toggleMessage }}</small></i>
        </div>
        <!-- TODO Potentially implementing plugin contextual info -->
      </div>
  
      <div toastContainer>
        <div toastDirective>
        </div>
      </div>
    </layout-floating-container>
  
    <div pluginFactoryDirective>
    </div>
  </div>
</ng-template>

<!-- does not meet req template -->
<ng-template #doesNotMeetReqTemplate>
  <div class="d-flex flex-column" minReq *ngIf="!meetsRequirement">
    <div class="jumbotron bg-light text-center mb-0">
      <div>
        <h1 class="mb-3">
          <i class="fas fa-exclamation-triangle"></i> Unsupported browser detected
        </h1>
        <p>
          We recommend using the latest version of <a target="_blank" href="https://www.google.com/chrome/">Google Chrome</a>
          or <a target="_blank" href="https://www.mozilla.org/firefox/">Mozilla Firefox)</a> for viewing the interactive viewer.
        </p>
        <div class="col-6 d-inline-block text-left">
          <readmore-component
            [collapsedHeight]="0">
            <markdown-dom [markdown]="constantsService.minReqExplaner">
  
            </markdown-dom>
          </readmore-component>
        </div>
        
      </div>
    </div>
    <ng-container *ngFor="let preview of unsupportedPreviews; let idx = index">
      <div [hidden]="idx !== unsupportedPreviewIdx" class="text-center mb-3" imageContainer [style.backgroundImage]="'url(' + preview.previewSrc + ')'" >
        <div class="mt-2 card d-inline-block displayCard">
          <div class="card-body">
            {{ preview.text }}
          </div>
        </div>
      </div>
    </ng-container>
  </div>
</ng-template>

<ng-template #publications >
  <reference-toast-component *ngIf="selectedTemplate['properties'] || selectedParcellation['properties']"
          [templateName] = "selectedTemplate['name']? selectedTemplate['name'] : null"
          [parcellationName] = "selectedParcellation['name']? selectedParcellation['name'] : null"
          [templateDescription] = "selectedTemplate['properties'] && selectedTemplate['properties']['description']? selectedTemplate['properties']['description'] : null"
          [parcellationDescription] = "selectedParcellation['properties'] && selectedParcellation['properties']['description']? selectedParcellation['properties']['description'] : null"
          [templatePublications] = "selectedTemplate['properties'] && selectedTemplate['properties']['publications']? selectedTemplate['properties']['publications']: null"
          [parcellationPublications] = "selectedParcellation['properties'] && selectedParcellation['properties']['publications']? selectedParcellation['properties']['publications']: null"
          [parcellationNifti] = "selectedParcellation['properties'] && selectedParcellation['properties']['nifti']? selectedParcellation['properties']['nifti'] : null"
          [templateExternalLink] ="selectedTemplate['properties'] && selectedTemplate['properties']['externalLink']? selectedTemplate['properties']['externalLink']: null"
          [parcellationExternalLink] ="selectedParcellation['properties'] && selectedParcellation['properties']['externalLink']? selectedParcellation['properties']['externalLink']: null">
  </reference-toast-component>
</ng-template>