<div class="main-container">
  <ng-container *ngIf="!router.url.includes('licensing')">
    <div
      *ngIf="
        freeTierBanner && (!licenseExpiringDays || licenseExpiringDays < 0)
      "
      class="alert alert-app-level alert-warning"
      id="demo-banner"
      role="alert"
    >
      <ng-container *ngIf="licenceProblem.value === null">
        <div class="alert-items">
          <div class="alert-item static">
            <div class="alert-icon-wrapper">
              <clr-icon class="mt-2" shape="warning-standard"></clr-icon>
            </div>
            <div class="alert-text">
              Data Controller (FREE Tier) - to upgrade contact
              <contact-link classes="color-white" />
            </div>
          </div>
        </div>

        <a routerLink="/licensing/update" class="update-key"
          >Update Licence Key</a
        >
      </ng-container>

      <ng-container *ngIf="licenceProblem.value !== null">
        <div class="alert-items">
          <div class="alert-item static">
            <div class="alert-icon-wrapper">
              <clr-icon class="mt-2" shape="warning-standard"></clr-icon>
            </div>
            <div class="alert-text">
              Data Controller (FREE Tier) - Problem with licence
            </div>
          </div>
        </div>

        <a
          (click)="licenceProblemDetails(licenceProblem.value)"
          class="update-key cursor-pointer"
          >More details</a
        >
      </ng-container>
    </div>

    <div
      *ngIf="licenseExpiringDays && !freeTierBanner"
      class="alert alert-app-level alert-danger"
      id="demo-banner"
      role="alert"
    >
      <div class="alert-items">
        <div class="alert-item static">
          <div class="alert-icon-wrapper">
            <clr-icon class="mt-2" shape="warning-standard"></clr-icon>
          </div>

          <div class="alert-text">
            This license key will expire in {{ licenseExpiringDays }}
            {{ licenseExpiringDays === 1 ? 'day' : 'days' }}. Please contact
            <contact-link classes="color-white" />
            or your reseller to arrange additional licence for site id
            {{ syssite.getValue() }}.
          </div>
        </div>
      </div>

      <a
        *ngIf="!freeTierBanner"
        routerLink="/licensing/update"
        class="update-key"
        >Update Licence Key</a
      >
    </div>

    <div
      *ngIf="appOverCapacity"
      class="alert alert-app-level alert-danger"
      id="demo-banner"
      role="alert"
    >
      <div class="alert-items">
        <div class="alert-item static">
          <div class="alert-icon-wrapper">
            <clr-icon class="mt-2" shape="warning-standard"></clr-icon>
          </div>

          <div class="alert-text">
            The registered number of users exceeds the limit specified for your
            license. Please contact
            <contact-link classes="color-white" />
            or your reseller to arrange additional licence for site id
            {{ syssite.getValue() }}.
          </div>
        </div>
      </div>

      <a
        *ngIf="!licenseExpiringDays && !freeTierBanner"
        routerLink="/licensing/update"
        class="update-key"
        >Update Licence Key</a
      >
    </div>
  </ng-container>

  <header class="app-header">
    <!-- <button
      *ngIf="
        isMainRoute('view') ||
        (isMainRoute('home') && !router.url.includes('licensing'))
      "
      class="header-hamburger-trigger"
      (click)="toggleSidebar()"
      type="button"
    >
      <span></span>
    </button> -->

    <div
      *ngIf="
        isMainRoute('view') ||
        (isMainRoute('home') && !router.url.includes('licensing'))
      "
      (click)="toggleSidebar()"
      type="button"
      class="cursor-pointer select-none ml-10 d-flex clr-justify-content-center clr-align-items-center"
    >
      <clr-icon size="24" shape="tree-view"></clr-icon>
    </div>

    <div class="logo d-flex clr-align-items-center">
      <a
        *ngIf="!router.url.includes('deploy')"
        href="#"
        [routerLink]="['/']"
        class="nav-link"
      >
        <img class="without-text d-block d-md-none" src="images/dc-logo.svg" />
        <img
          class="with-text d-none d-md-block"
          src="images/datacontroller.svg"
        />
      </a>

      <a *ngIf="router.url.includes('deploy')">
        <span class="clr-icon header-logo ml-10"></span>
      </a>
    </div>

    <ng-container
      *ngIf="
        !router.url.includes('deploy') && !router.url.includes('licensing')
      "
    >
      <div class="header-nav d-flex d-sm-none">
        <clr-dropdown>
          <button
            class="nav-icon color-white-i"
            clrDropdownTrigger
            aria-label="toggle settings menu"
          >
            Menu
            <!-- <clr-icon size="20" shape="bars"></clr-icon> -->
          </button>
          <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left">
            <a [routerLink]="['/view']" clrDropdownItem>VIEW</a>
            <a [routerLink]="['/home']" clrDropdownItem>LOAD</a>
            <a [routerLink]="['/review/submitted']" clrDropdownItem>REVIEW</a>
          </clr-dropdown-menu>
        </clr-dropdown>
      </div>

      <div class="header-nav d-none d-sm-flex">
        <a
          [routerLink]="['/view']"
          class="nav-link nav-text"
          routerLinkActive="active"
          >VIEW</a
        >
        <a
          [routerLink]="['/home']"
          class="nav-link nav-text"
          [class.active]="
            router.url.includes('editor') ||
            router.url.includes('edit-record') ||
            router.url.includes('home')
          "
          >LOAD</a
        >
        <a
          [routerLink]="['/review/submitted']"
          [class.active]="
            router.url.includes('submitted') ||
            router.url.includes('approve') ||
            router.url.includes('history')
          "
          class="nav-link nav-text cursor-pointer"
          >REVIEW</a
        >
      </div>
    </ng-container>

    <div class="header-actions">
      <div class="nav-text">
        <app-loading-indicator></app-loading-indicator>
      </div>
      <div class="dropdown">
        <app-user-nav-dropdown></app-user-nav-dropdown>
      </div>
    </div>
  </header>
  <nav
    *ngIf="
      router.url.includes('submitted') ||
      router.url.includes('approve') ||
      router.url.includes('history')
    "
    class="subnav"
  >
    <ul class="nav">
      <li class="nav-item">
        <a
          [routerLink]="['/review/submitted']"
          class="nav-link nav-text"
          routerLinkActive="active"
          >SUBMIT</a
        >
      </li>
      <li class="nav-item">
        <a
          [routerLink]="['/review/approve']"
          class="nav-link nav-text"
          [class.active]="router.url.includes('approve')"
          routerLinkActive="active"
          >APPROVE</a
        >
      </li>
      <li class="nav-item">
        <a
          [routerLink]="['/review/history']"
          class="nav-link nav-text"
          routerLinkActive="active"
          >HISTORY</a
        >
      </li>
    </ul>
  </nav>

  <app-alerts *ngIf="!errTop"></app-alerts>
  <app-requests-modal [(opened)]="requestsModal"></app-requests-modal>

  <!-- <app-terms *ngIf="showRegistration"></app-terms> -->

  <router-outlet *ngIf="startupDataLoaded"></router-outlet>

  <app-login></app-login>
  <app-alerts *ngIf="errTop"></app-alerts>
  <app-info-modal
    *ngFor="let abort of sasjsAborts"
    [data]="abort"
    [forceReload]="!startupDataLoaded && sasjsAborts.length === 1"
    (onConfirmModalClick)="closeAbortModal(abort.id!)"
  >
  </app-info-modal>

  <clr-modal
    appDragNdrop
    [(clrModalOpen)]="demoLimitNotice.open"
    [clrModalClosable]="true"
    [clrModalSize]="'lg'"
    class="position-relative"
  >
    <h3 class="modal-title">
      Locked Feature ({{ demoLimitNotice.featureName }})
      <clr-icon size="20" shape="lock"></clr-icon>
    </h3>

    <div class="modal-body">
      Contact
      <contact-link />
      with your site id ({{ syssite.value }}) to activate!
    </div>
  </clr-modal>
</div>

<!-- App Loading Page -->
<div *ngIf="!startupDataLoaded" class="app-loading">
  <img class="loading-logo" src="images/datacontroller.svg" />

  <div *ngIf="appActive === null" class="slider">
    <div class="line"></div>
    <div class="subline inc"></div>
    <div class="subline dec"></div>
  </div>
</div>
<!-- /App Loading Page -->
