<div class="subheader">
    <h2 class="subheader-title">
       <i class="subheader-icon fal fa-chart-area"></i> Dashboard  
       <small  id="loadtype">{{loadtype}}</small>
    </h2>
    <!-- <div class="subheader-block d-lg-flex align-items-center">
       <div class="d-inline-flex flex-column justify-content-center mr-3">
          <a href="#/dashboard/authordashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm pull-right">Go to Author's Dashboard</a>
       </div>
    </div> -->
  <div class="subheader-block d-lg-flex align-items-center">
      <!-- <div class="panel-toolbar">
         <h2  class="subheader-title">
            <a [routerLink]="['/reports/runtimereport/']" target="_blank">
                  <i class="fa fa-tachometer" style=" color: #4679cc;font-size: 18px;"></i> <span style="color: #4679cc; font-size: 18px;">
                     Runtime Dashboard
                  </span>
               </a>
         </h2>
        
      </div> -->

 <div class="panel-toolbar " style="padding-left:10px ;">
         <h2  class="subheader-title">
            <a [routerLink]="['/reports/vlexreport/']" target="_blank">
                  <i class="fa fa-tachometer" style=" color: #4679cc;font-size: 18px; "></i> <span style="color: #4679cc; font-size: 18px;">
                    vLex Report
                  </span>
               </a>
         </h2>
        
      </div>


   </div>
 <!--   <div class="subheader-block d-lg-flex align-items-center">
      <div class="panel-toolbar" style="padding-left: 30px;">
         <h2  class="subheader-title">
            <a [href]="ireflect" target="_blank">
                  <i class="fa-solid fa-chart-mixed" style=" color: #4679cc;font-size: 18px;"></i>
                  <span style="color: #4679cc; font-size: 18px;">
                     IReflect
                  </span>
               </a>
         </h2>       
      </div>
   </div>   -->
    <div class="subheader-block d-lg-flex align-items-center">
       <div class="panel-toolbar" role="menu" title="Project Minimize">
          <a href="javascript:;" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse" class="btn btn-panel hover-effect-dot js-panel-collapse waves-effect waves-themed" data-toggle="collapse" data-target="#dashboard_project" style="line-height: 16px;">
            <i class="fa fa-compress-alt" style="color: #fff;"></i>
          </a> 
       </div>
    </div>
 </div>
 <div class="subheader">
   <div class="subheader-title">
      <div class="d-inline-flex flex-column justify-content-center">
         <div class="input-group input-group-sm bg-white shadow-inset-2" style="width:180px;">
            <input type="text" [(ngModel)]="searchText" class="form-control pull-right" placeholder="Project Search">
            <div class="input-group-append">
               <button type="submit" class="btn btn-primary waves-effect waves-themed">	<i class="fas fa-search"></i></button>
            </div>
         </div>
      </div>
   </div>
 </div>
 <section class="content">
    <div class="show clearfix" id="dashboard_project">
       <div class="col-md-12">
          <div *ngIf="searchText !=''">
             <!-- <p-carousel *ngIf="userprojectlist" [value]="userprojectlist | filter : searchText"
                [numVisible]="userprojectlist.length >= 4 ? 4 : userprojectlist.length" [circular]="false"> -->
             <p-carousel *ngIf="userprojectlist && userprojectlist.length > 0" [value]="userprojectlist | filter : searchText" 
             [circular]="false">
             <!-- [numScroll]="3"  [responsiveOptions]="responsiveOptions" -->
             <ng-template let-itm of userprojectlist  pTemplate="item">
                <div class="p-grid p-nogutter">
                   <!-- | filter : prquery -->
                   <div class="clsProject info-box"
                      (click)="LoadProjectJobDetails(itm.project_definitionid,itm.project_subtitle)">
                      <span class="info-box-icon bg-{{itm.project_theam}}">
                         <i class="fa fa-tasks" *ngIf="itm.project_definitionid != prdefid"></i>
                         <div *ngIf="itm.project_definitionid == prdefid" class="check bg-{{itm.project_theam}}">
                            <i class="fa fa-check"></i>
                         </div>
                      </span>
                      <div class="info-box-content">
                         <span class="info-box-text">{{itm.projectname}}</span>
                         <span class="info-box-number">{{itm.project_subtitle}}</span>
                         <hr>
                         <!-- <div class="progress">
                            <div class="progress-bar">
                              [style]="width: {{(itm.complete / (itm.ready + itm.complete)) * 100}}%"
                            
                            </div>
                            </div> -->
                         <span class="progress-description" *ngIf="(itm.ready + itm.complete) <= 0">
                         No Jobs Available
                         </span>
                         <span class="progress-description" *ngIf="(itm.ready + itm.complete) >= 1">
                         <span *ngIf="itm.ready >= 1">
                         {{itm.ready}} Out Of {{itm.ready + itm.complete}} Jobs In Progress
                         </span>
                         <span *ngIf="itm.ready <= 0">
                         All Jobs Completed
                         </span>
                         </span>
                      </div>
                      <!-- /.info-box-content -->
                   </div>
                </div>
                <!-- Info Boxes Style 2 -->
             </ng-template>
             </p-carousel>
          </div>
          <div *ngIf="searchText ==''">
             <p-carousel *ngIf="userprojectlist" [value]="userprojectlist"   [numVisible]="userprojectlist.length >= 4 ? 4 : userprojectlist.length"  [circular]="false">
             <!-- [numScroll]="3"  [responsiveOptions]="responsiveOptions" -->
             <ng-template let-itm of userprojectlist pTemplate="item">
                <div class="p-grid p-nogutter">
                   <!-- | filter : prquery info-box bg-{{itm.project_theam}} -->
                   <div class="clsProject info-box"
                      (click)="LoadProjectJobDetails(itm.project_definitionid,itm.project_subtitle)">
                      <span class="info-box-icon bg-{{itm.project_theam}}">
                         <i class="fa fa-tasks" *ngIf="itm.project_definitionid != prdefid"></i>
                         <div *ngIf="itm.project_definitionid == prdefid" class="check bg-{{itm.project_theam}}">
                            <i class="fa fa-check"></i>
                         </div>
                      </span>
                      <div class="info-box-content">
                         <span class="info-box-text">{{itm.projectname}}</span>
                         <span class="info-box-number textSize" data-title="{{itm.project_subtitle}}">{{itm.project_subtitle}}</span>
                         <hr>
                         <!-- <div class="progress">
                            <div class="progress-bar">
                              [style]="width: {{(itm.complete / (itm.ready + itm.complete)) * 100}}%"
                            
                            </div>
                            </div> -->
                         <span class="progress-description" *ngIf="(itm.ready + itm.complete) <= 0">
                         No jobs available
                         </span>
                         <span class="progress-description" *ngIf="(itm.ready + itm.complete) >= 1">
                         <span *ngIf="itm.ready >= 1">
                         {{itm.ready}} out of {{itm.ready + itm.complete}} jobs in progress
                         </span>
                         <span *ngIf="itm.ready <= 0">
                         All jobs completed
                         </span>
                         </span>
                      </div>
                      <!-- /.info-box-content -->
                   </div>
                </div>
                <!-- Info Boxes Style 2 -->
             </ng-template>
             </p-carousel>
          </div>
       </div>
    </div>
    <div class="row">
       <div class="col-md-12 box-body1">
          <div class="dashboard_menu">
             <span (click)="loadStatus('Y')" *ngIf="viewJobStatusReport" [style.border-bottom]="sMyJob1"
             style="cursor: pointer;">
             <i class="fal fa-bars"></i>&nbsp; Job Status Report 
             </span>
             <!-- <span> | </span> -->
             <span (click)="loadStatus('N')" *ngIf="viewMyJobs" [style.border-bottom]="sMyJob2" style="cursor: pointer;">
             <i class="fal fa-cog"></i>&nbsp; My Jobs </span>
             <!-- <span> | </span> -->
             <span (click)="loadStatus('A')" *ngIf="viewJobAssignment" [style.border-bottom]="sMyJob4" style="cursor: pointer;">
             <i class="fal fa-user"></i>&nbsp; Job Assignment </span>
             <!-- <span style="margin-left:15px;"> | </span> -->
             <span (click)="loadStatus('Z')" *ngIf="viewMailBox" [style.border-bottom]="sMyJob3" style="cursor: pointer;">
             <i class="fal fa-envelope"></i>&nbsp; Mailbox
             </span>
             <span (click)="loadStatus('E')" *ngIf="viewMailBox" [style.border-bottom]="sMyJob5" style="cursor: pointer;">
               <i class="fal fa-exclamation-circle"></i>&nbsp; Error Info
               </span>
          </div>
          <!--Code for My jobs-->
          <div class="pull-right my_jobs_right" *ngIf="sMyJob == 'N'">
             <ul>
                <li>
                   <span style="color:#0bb1a9; font-size:15px; cursor:pointer; padding-top: 3px;" class="pull-right"
                      (click)="loadStatus('N1')" title="Refresh MY JOBS">
                   <i class="fal fa-refresh"></i>
                   </span>
                </li>
                <!-- <li ng-if="isPushstage == true" style="padding-top: 4px;">
                   <span ng-click="enrichmentSelfAllocate()"
                      style="color:#808080; background-color:#fff; border-radius:5px; cursor:pointer;"><i
                      class='fal fa-address-card' style='font-size:15px;color: #0bb1a9;'></i> GET JOBS</span>
                </li> -->
                <li>
                   <div class="input-group input-group-sm">
                      <input type="text" [(ngModel)]="search" class="form-control pull-right" placeholder="search"
                      style="border:1px solid #ccc">
                      <span class="input-group-append">
                      <button class="btn btn-primary waves-effect waves-themed btn-sm" type="submit">
                      <span class="fal fa-search"></span>
                      </button>
                      </span>
                   </div>
                </li>
             </ul>
          </div>
          <!-- /.box-header -->
          <!--Box Content-->
          <!--sMyjob=Y for Job status report-->
          <div *ngIf="sMyJob == 'Y' && currentjobno>0 && viewJobStatusReport" class="">
             <!--Code for job status report-->
             <div class="right_btn_group form-inline" *ngIf="sMyJob == 'Y'&& viewJobStatusReport">
                <div class="row form-inline"  *ngIf="sMyJob == 'Y'">
                   <!-- <div *ngIf="admin_dropdown===true">
                     <label class="control-label" style ="padding-left: 5px;">
                        User &nbsp;
                        </label>
                        <select class="form-control" [(ngModel)]="selected_user" (change)="selectstagedetails_1(selected_user)" style="min-width:250px;">
                           <option [value]="0">--Select--</option>
                           <option *ngFor="let g of testing" [value]="g.userid" [selected]="g.userid==selecteduserid">
                           {{g.firstname}}
                        </select>
                   </div> -->
                   <div class="form-group">
                    <label class="control-label">
                        Start & End Date &nbsp;
                      </label>                      
                        <input type="text"  placeholder="Start & End Date" class=" form-control"
                          (bsValueChange)="ondateValueChange($event)" id="selectedDaterange" bsDaterangepicker
                           [bsConfig]="{ adaptivePosition: true,dateInputFormat:'MM/DD/YYYY'}">                  
                      <label class="control-label">
                        &nbsp;&nbsp; Job Title &nbsp;
                      </label>
                      <!-- <select class="form-control" (change)="selectstagedetails($event)" style="min-width:250px;">
                         <option [value]="0">--Select--</option>
                         <option *ngFor="let j of joblist" [value]="j.jobid" [selected]="j.jobid==currentjobno">
                         {{j.title}}
                      </select> -->
                      <!--<input type="text" placeholder="Search..." [(ngModel)]="vlexjobSearch" (input)="filterJobList()" />-->

                      <ng-multiselect-dropdown [placeholder]="'Select'" style="width: auto !important; min-width: 240px; margin-bottom: 5px;"
                          [data]="joblist" textField=title [settings]="_ddljobSettings"
                          name="jobid"   [(ngModel)]="jobtitle"
                          (onSelect)="selectstagedetails($event,'')" (onDeSelect)="onJobDeSelect($event);" >
                          </ng-multiselect-dropdown>
                   </div>
                   
                   <!-- <div class="form-group" *ngIf="SupplementList.length>0">
                     <label class="control-label">
                       SUPPLEMENT TITLE &nbsp;
                     </label>
                     <select class="form-control" (change)="SupplementClick($event)" style="min-width:250px;">
                       <option *ngFor="let s of SupplementList" [value]="s.batchid" [selected]="s.batchid==currentjobno">
                         {{s.batchname}}
                     </select>
                   </div> -->
                   <div class="form-group" style="display: none;">           
                      <span (click)="onjoblistload(sdashboard_1);" class="btn btn-sm  btn-outline-primary"
                      [style.border-bottom]=""><i class="fal fa-tasks" [style.border-bottom]="sdashboard_1"></i>&nbsp;
                      {{sdashboard_2}} 
                      </span>
                   </div>
                   <div class="panel_group_tool">
                      <!-- <div class="panel-toolbar" role="menu">
                          <div style="margin-right: 10px;" *ngIf="jobload_flag">Showing jobs In Process</div>
                          <div style="font-weight: bold;margin-right: 10px;" *ngIf="!jobload_flag">Showing jobs Completed</div>
                           <div class="custom-control custom-switch" title="Job Status">
                               <input type="checkbox" (click)="onjoblistload(sdashboard_1)" class="custom-control-input" name="gra-2" id="gra-2" > 
                               <input type="checkbox" [checked]="!jobload_flag" (click)="onjoblistload(sdashboard_1)" class="custom-control-input" name="gra-2" id="gra-2" >
                               <label *ngIf="jobload_flag" style="margin-right: 10px;" class="custom-control-label" for="gra-2"></label>
                               <label *ngIf="!jobload_flag" style="margin-right: 10px;" class="custom-control-label" for="gra-2"></label>
                               </div>
                       </div> --> 
                      <div class="panel-toolbar dropdown-icon-legend" role="menu"  title="Legend info">
                         <button class="btn btn-icon btn-xs btn-success shadow-0 mr-1 rounded-circle waves-effect waves-themed" data-toggle="dropdown" aria-expanded="false">
                         <i class="fal fa-info"></i>
                         </button>
                         <div class="dropdown-menu dropdown-menu-animated dropdown-menu-right p-0" style="" x-placement="top-end1" >
                            <span class="dropdown-item" style="color:#337ab7">
                            <i class="fa fa-circle"></i>&nbsp;YTS
                            </span>    
                            <span class="dropdown-item" style="color:#f39c12">
                            <i class="fa fa-circle"></i>&nbsp;In Progress
                            </span>   
                            <span class="dropdown-item" style="color:#00a65a">
                            <i class="fa fa-circle"></i>&nbsp;Completed
                            </span>    
                            <span class="dropdown-item" style="color:#d81b60">
                            <i class="fa fa-circle"></i>&nbsp;Ignored
                            </span> 
                            <span class="dropdown-item" style="color:purple">
                            <i class="fa fa-circle"></i>&nbsp;Waiting
                            </span>    
                            <span class="dropdown-item" style="color:#a20596">
                            <i class="fa fa-circle"></i>&nbsp;Reassigned
                            </span> 
                         </div>
                      </div>
                      <div class="panel-toolbar" role="menu"  title="Job Status" title="Settings">
                         <button class="btn btn-xs btn-primary btn-icon rounded-circle waves-effect waves-themed" data-toggle="dropdown" aria-expanded="false">
                         <i class="fal fa-cog"></i>
                         </button>
                         <div class="dropdown-menu dropdown-menu-animated dropdown-menu-right p-0" style="" x-placement="top-end">
                            <!-- <span id="show_hide" class="btn waves-effect waves-themed btn-sm dropdown-item">
                            <i class="fal fa-search-minus dropdown-icon"></i>&nbsp;Status
                            </span> -->
                            <span  class="btn waves-effect waves-themed btn-sm dropdown-item"
                               (click)="pageRefresh()">
                            <i class="fal fa-sync-alt dropdown-icon"></i>&nbsp;Refresh Job Status
                            </span>
                            <span  class="btn waves-effect waves-themed btn-sm dropdown-item"
                               (click)="onJoblistSwipe();">
                            <i class="fal fa-exchange dropdown-icon"></i>&nbsp;Swipe Job Status
                            </span>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
             <div class="clearfix"></div>
               <app-jobstatusreport [(jobid)]="currentjobno" [(jobstatus)]="jobload_flag" [(admin_rights)]="admin_dropdown" [(userid)]="selecteduserid" [(swapeboardval)]="swapeboardval">
               </app-jobstatusreport>
             <!-- [(isbn)] = "joblist_output[0].isbn"  -->
          </div>
          <!--sMyjob=N for My jobs-->
          <div class="" *ngIf="sMyJob  == 'N' && selectedproject !== ''&& viewMyJobs" class="">
             <app-myjobs [projectid]="prdefid" [jobid]="currentjobno" [projectname]="projectname" [jobtitle]="jobtitle" [search]="search"></app-myjobs>
          </div>
          <!--sMyjob=A for Job assignment-->
          <div *ngIf="sMyJob == 'A' && viewJobAssignment" class="">
             <app-jobassignment [_projectdefenitionid]="prdefid" [_project_subtitle]="projectname"
             [_currentjobno]="currentjobno"></app-jobassignment>
          </div>
          <!--sMyjob=Z for Mail box-->
          <div class="" *ngIf="sMyJob  == 'Z' && viewMailBox">
             <!--Code for Mail box-->
             <div class="pull-right" *ngIf="sMyJob == 'Z'">
                <input type="text" ng-model="schange" id="schange" style="display:none; visibility:collapse; height:1px;" />
                <div class="input-group input-group-sm" style="width: 150px;">
                   <input type="text" ng-model="search1" class="form-control pull-right" placeholder="Search">
                   <span class="input-group-append">
                   <button class="btn btn-primary waves-effect waves-themed btn-sm" type="submit">
                   <span class="fal fa-search"></span>
                   </button>
                   </span>                  
                </div>
             </div>
             <div class="clearfix"></div>
             <app-mailbox></app-mailbox>
          </div>
          <div class="" *ngIf="sMyJob  == 'E' && viewMailBox">
            <app-recorderrorinfo [(jobid)]="currentjobno" [(admin_rights)]="admin_dropdown" [(userid)]="selecteduserid" [projectid]="prdefid">

            </app-recorderrorinfo>
          </div>
       </div>
    </div>
 </section>