<div id="page-content" *ngIf="initConnection">
  <app-header></app-header>
  <div id="body-content">
    <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 (click)="closeOffers($event)">×</span>
      </div>
      <app-resources-sidebar></app-resources-sidebar>
    </div>
    <div id="dragger" (pointerdown)="draggerPointerDown()"></div>
    <div id="content-side">
      <router-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_v2_dark_h32.png" /></div>
</div>
<app-user-info-menu></app-user-info-menu>
<app-worker-graph *ngIf="workerGraph" cdkDrag></app-worker-graph>
