<div id="page-content" *ngIf="initConnection">
  <app-header></app-header>
  <div id="body-content">
    <ng-container *ngIf="!isMobileModule">
      <div id="resource-side" *ngIf="showSidebar" [ngClass]="{ mobileSideBarActive: mobileShowSidebar }" [style.width]="isMobileResponsiveView ? '100%' : sideWidth + 'px'">
        <div id="offers" *ngIf="newOffers && !hideOffers" routerLink="offers" routerLinkActive="active">
          <span translate>Free Nano license available! <br />Click here to see your limited offers.</span>
          <span id="offers-close" (click)="closeOffers($event)">×</span>
        </div>
        <app-sidebar></app-sidebar>
      </div>
      <div id="dragger" (pointerdown)="draggerPointerDown()"></div>
    </ng-container>
    <div id="content-side" [@routeTransition]="getAnimation(outlet)">
      <router-outlet #outlet="outlet"></router-outlet>
    </div>
  </div>

  <div id="accept-cookies" *ngIf="!isCookieAccepted">
    <ng-container *ngIf="isOnMobile">
      <span translate> Nano utilizes military strength encryption keys, therefore the use of the system may be forbidden or limited by legislation in your place of residence. </span>
      <br />
      <span translate>
        By continuing to use this application you accept our <a href="{{ legalURL }}" target="_blank" translate>Terms of Service</a> and
        <a href="{{ legalURL }}" target="_blank" translate>Privacy Policy</a>.
      </span>
    </ng-container>
    <ng-container *ngIf="!isOnMobile">
      <span translate> Nano utilizes military strength encryption keys, therefore the use of the system may be forbidden or limited by legislation in your place of residence. </span>
      <br />
      <span translate>
        We use cookies to provide the best experience on our website. By continuing to browse this website you accept our <a href="{{ legalURL }}" target="_blank" translate>Terms of Service</a> and
        <a href="{{ legalURL }}" target="_blank" translate>Privacy Policy</a>.
      </span>
    </ng-container>
    <button mat-raised-button (click)="acceptCookies()"><span translate>Accept</span></button>
  </div>
</div>

<div id="loading-preview" *ngIf="!initConnection">
  <div><img src="assets/img/ui/logo_clarabot_full.svg" /></div>
  <h1>Military-grade encrypted system</h1>
</div>
<app-user-info-menu></app-user-info-menu>
<app-worker-graph *ngIf="workerGraph" cdkDrag></app-worker-graph>
<app-image-viewer></app-image-viewer>
<app-pdf-viewer></app-pdf-viewer>
