<div class="header-actions">
  <div class="d-flex clr-align-items-center">
    <cds-icon
      *ngIf="!darkMode.value"
      (click)="toggleDarkMode(true)"
      size="md"
      class="theme-toggle-icon cursor-pointer"
      shape="moon"
      inverse="false"
      solid="false"
    ></cds-icon>
    <cds-icon
      *ngIf="!!darkMode.value"
      (click)="toggleDarkMode(false)"
      size="md"
      class="theme-toggle-icon cursor-pointer"
      shape="sun"
      inverse="false"
      solid="false"
    ></cds-icon>
  </div>

  <app-loading-indicator></app-loading-indicator>

  <clr-dropdown class="app-nav-dropdown">
    <button class="nav-text color-white user-nav-toggle" clrDropdownToggle>
      <span>{{ userName }}</span>
      <span *ngIf="userName !== 'Not logged in' && isViya"
        ><img
          class="avatar-img"
          src="{{ getPictureUrl() }}"
          alt="profile picture"
      /></span>
      <span
        class="badge badge-danger"
        *ngIf="!sasjsConfig.debug"
        [class.hidden]="failedReqs.length === 0"
        >{{ failedReqs.length }}</span
      >
      <span
        class="badge badge-info"
        *ngIf="sasjsConfig.debug"
        [class.hidden]="debugLogs.length === 0"
        >{{ debugLogs.length }}</span
      >
      <clr-icon
        *ngIf="!isViya"
        aria-hidden="true"
        shape="caret down"
      ></clr-icon>
    </button>
    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
      <div #dropdownItemDebug class="debug-switch-item" clrDropdownItem>
        <clr-toggle-container
          class="toggle-switch"
          (click)="onDebugRowClick($event, dropdownItemDebug)"
        >
          <clr-toggle-wrapper>
            <input
              id="debug-toggle1"
              type="checkbox"
              [(ngModel)]="sasjsConfig.debug"
              (ngModelChange)="onDebugModeChange()"
              clrToggle
            />
            <label>Debug Mode</label>
          </clr-toggle-wrapper>
        </clr-toggle-container>
      </div>
      <a (click)="openRequestsModal()" clrDropdownItem>
        <span>SAS Requests</span>
      </a>

      <ng-container *ngIf="!isDeployPage">
        <a
          target="_blank"
          href="https://docs.datacontroller.io"
          clrDropdownItem
        >
          <span class="dropdown-text">Documentation</span>
        </a>
      </ng-container>

      <div class="separator"></div>
      <a href="..." routerLink="/system" clrDropdownItem>
        <span>System</span>
      </a>
      <a href="..." (click)="logout($event)" clrDropdownItem>
        <span>Log Out</span>
        <clr-icon
          aria-hidden="true"
          class="clr-logout"
          shape="logout"
        ></clr-icon>
      </a>
      <div class="copyRight">
        <span>v{{ commitVer }}</span>
      </div>
    </clr-dropdown-menu>
  </clr-dropdown>
</div>
