<clr-dropdown class="app-nav-dropdown d-md-block">
  <button class="nav-text color-white" clrDropdownToggle>
    <span>{{ userName }}</span>
    <span *ngIf="userName !== 'Not logged in' && isViya"
      ><img class="avatar-img" src="{{ getPictureUrl() }}" alt=""
    /></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" 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 class="clr-logout" shape="logout"></clr-icon>
    </a>
    <div class="copyRight">
      <span>v{{ commitVer }}</span>
    </div>
  </clr-dropdown-menu>
</clr-dropdown>
<div class="content-container h-auto">
  <nav class="sidenav d-block d-md-none" [clr-nav-level]="2">
    <section class="sidenav-content">
      <a href="..." class="nav-link active">
        {{ userName }}
      </a>

      <div>
        <form>
          <div class="toggle-switch">
            <input
              id="debug-toggle2"
              type="checkbox"
              [(ngModel)]="sasjsConfig.debug"
              (ngModelChange)="onDebugModeChange()"
              [ngModelOptions]="{ standalone: true }"
            />
            <label
              for="debug-toggle2"
              class="debug-toggle-label color-dark-gray"
              >Debug Mode</label
            >
          </div>
        </form>
      </div>
      <!-- <a href="..." class="nav-link d-block" [routerLink]="['/application-logs']">
        <span>Application Logs</span>
        <span class="badge" *ngIf="appLogs.length > 0">{{appLogs.length}}</span>
      </a>
      <a *ngIf="debugMode" class="nav-link d-block" href="..." [routerLink]="['/debug-logs']">
        <span>Debug Logs</span>
        <span class="badge badge-info" *ngIf="debugLogs.length > 0">{{debugLogs.length}}</span>
      </a>
      <a *ngIf="!debugMode" class="nav-link d-block" href="..." [routerLink]="['/failed-requests']">
        <span>Failed Requests</span>
        <span class="badge badge-danger" *ngIf="failedReqs.length > 0">{{failedReqs.length}}</span>
      </a>
      <a href="..." class="nav-link d-block" [routerLink]="['/errors']">
        <span>Errors</span>
        <span class="badge badge-warning" *ngIf="sasErrors.length > 0">{{sasErrors.length}}</span>
      </a> -->
      <a
        class="nav-link d-block"
        target="_blank"
        href="https://docs.datacontroller.io"
      >
        <span>Documentation</span>
      </a>
      <div class="separator"></div>
      <a routerLink="/system" class="nav-link d-block">
        <span>System</span>
        <clr-icon shape="logout"></clr-icon>
      </a>
      <a href="..." class="nav-link d-block" (click)="logout($event)">
        <span>Log Out</span>
        <clr-icon shape="logout"></clr-icon>
      </a>
    </section>
  </nav>
</div>
