<section class="content-header">
  <h4 translate>
    <span class="fa fa-table"></span>&nbsp;Dashboard
    <small> </small>
  </h4>
</section>
<section class="content">
  <div class="box padding-15 clearfix" style="display: block;">
    <div class="row">
      <div class="col-sm-9">
        <a href="#/dashboard"><i class="fa fa-dashboard"></i> Go back to dashboard</a>
      </div>     
      <div class="col-sm-3 pull-right">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search Text" [(ngModel)]="searchText"
            (ngModelChange)="this.searchTextChange.next($event)" aria-label="Search">
          <!-- <span class="input-group-append">
            <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button">
              <span class="fal fa-search"></span>
            </button>
          </span> -->
          <span class="input-group-append">
            <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button">
              <span class="fal fa-search"></span>
            </button>
          </span>
        </div>
      </div>
    </div> 
<div class="table-responsive">
      <table class="table jambo_table table-striped table-condensed table-hover" style="margin-bottom:0 !important;">
        <thead>
          <tr class="headings">
            <th style="width:60px">#</th>
            <th *ngIf="(edit==true || delete==true)" style="white-space: nowrap;">
              <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
            </th>
            <th class="pointer" (click)="sort('projectname')" style="white-space: nowrap;">
              Project Name
              <i *ngIf="key =='projectname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>      
            <th class="pointer" (click)="sort('project_subtitle')" style="white-space: nowrap;">
              Project Definition Name
              <i *ngIf="key =='project_subtitle'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('job_name')" style="white-space: nowrap;">
              Job Name
              <i *ngIf="key =='job_name'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('title')" style="white-space: nowrap;">
            Chapter Name
              <i *ngIf="key =='title'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('stagename_alias')">Stage Name <i
              class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
          <th class="pointer" (click)="sort('lotstatus')">Lot Status <i
              class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
            <th class="pointer" (click)="sort('lotstatus')">Status <i *ngIf="key =='lotstatus'"
                class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i></th>
            <th class="pointer" (click)="sort('duedate')" >Due date
              <i *ngIf="key =='duedate'"
                class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i></th>
            <th class="pointer" (click)="sort('iswebapp')">Required Action <i *ngIf="key =='iswebapp'"
                class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i></th>   
          </tr>
        </thead>
        <tbody>
          <tr
            *ngFor="let item of projectDetails| orderBy: key : reverse |filter:searchText|paginate: { itemsPerPage: itemsPerPage, currentPage: p ,totalItems:totalCount};let i = index">
            <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
            <td *ngIf="(edit==true || delete==true)">
              <!-- <span class="glyphicon glyphicon-pencil blue" style="cursor:pointer;"
                (click)="openApplicationModal(applicationTemplate,'update',item)" title="Edit"
                *ngIf="edit==true"></span>&nbsp;&nbsp;
              <span *ngIf="item.active==1 && delete==true" class="img-active" style="cursor:pointer;"
                (click)="OpenConfirmTemplate(item)" title="Active"></span>
              <span *ngIf="item.active==0 && delete==true" class="img-inactive" style="cursor:pointer;"
                (click)="OpenConfirmTemplate(item)" title="Inactive"></span> -->
            </td>
            <td style="white-space: nowrap;">{{item.projectname}}</td> 
            <td>{{item.project_subtitle}} </td>
            <td>{{item.job_name}} </td>
            <td>
              <a *ngIf="(item.lotstatus == 'R' || item.lotstatus == 'YTS')   && item.holdreason === '0'" 
              (click)="WorkArea(item.pickedby,item.transactionid,item.weburl,item.projectdefinitionid)" class="badge bg-green">
              {{item.title}} <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </a>
              <a *ngIf="(item.lotstatus == 'R' || item.lotstatus == 'YTS') && item.holdreason === 1" title="{{item.reassign}}" 
              (click)="WorkArea(item.pickedby,item.transactionid,item.weburl,item.projectdefinitionid)" class="badge" style="background-color:#a20596">										   
              {{item.title}}  <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </a>
              <a *ngIf="((item.lotstatus == 'P' || item.lotstatus == 'H') && item.pickedby == userid)" title="Picked by {{item.empname}}" 
              (click)="WorkArea(item.pickedby,item.transactionid,item.weburl,item.projectdefinitionid)" class="badge bg-yellow">
              {{item.title}} <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </a>
              <a *ngIf="((item.lotstatus == 'P' || item.lotstatus == 'H') && item.pickedby != userid)" title="Picked by {{item.empname}}" 
                class="badge bg-yellow" style="cursor:pointer;">
              {{item.title}} <i class="fa fa-lock" aria-hidden="true"></i>
              </a>
              <a *ngIf="item.lotstatus == 'I' && item.pickedby == userid" title="Picked by {{item.empname}}"
               (click)="WorkArea(item.pickedby,item.transactionid,item.weburl,item.projectdefinitionid)" class="badge bg-blue">{{item.title}}
                <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
              <a *ngIf="item.lotstatus == 'I'&& item.pickedby != userid" title="Picked by {{item.empname}}" class="badge bg-blue"  style="cursor: pointer;">
                {{item.title}}  <i class="fa fa-lock" aria-hidden="true"></i></a>
                <label *ngIf="item.lotstatus == 'C'">{{item.title}}</label>
               </td>
              
            <!-- <td>
              <a *ngIf="(item.lotstatus == 'R' || item.lotstatus == 'YTS')  && item.holdreason === '0' " >
                  Start
              </a>
              <a *ngIf="(item.lotstatus == 'R' || item.lotstatus == 'YTS')   && item.holdreason === '1'" >
										   
                  Start 
              </a>
             
              <a *ngIf="item.lotstatus == 'P' || item.lotstatus == 'H'" title="Picked by {{item.empname}}" >
                  Open
              </a>	
            											  
             <a *ngIf="item.lotstatus == 'I'"  >Re Open </a>                        
             </td> -->
             <td>{{item.stagename_alias}}</td>
            <td>{{item.lotstatus}}</td>
             <td> {{item.status_notes}} 
            </td>
            <td>{{item.duedate}} </td>
            <td> {{item.action_notes}} 
              </td>
          </tr>
          <tr *ngIf="projectDetails.length==0 || (projectDetails |filter:searchText).length === 0">
            <td colspan="11" style="text-align:center;">No Records Found</td>
          </tr>
        </tbody>
      </table>
</div>
      <div *ngIf="projectDetails && projectDetails.length >0" class="row paggination-control">
        <div class="col-lg-7 col-md-7 col-sm-12" *ngIf="projectDetails && projectDetails.length >0">
          <div class="page_count">
            <span style="padding-top:5px; ">
              {{(itemsPerPage*p)-itemsPerPage+1}} - {{
                        itemsPerPage*p > totalCount ? totalCount: itemsPerPage*p
              }} of {{totalCount}}
            </span>
          </div>
          <div class="pager_controller">
            <pagination-controls (pageChange)="getPage($event)"></pagination-controls>
          </div>         
        </div>   
     <div class="col-sm-12 col-lg-5 col-md-5">
        <div class="pull-right">
          <label>Items per page</label>
          <select class="form-control page-count-ctrl" style="width: auto; display: inline-block; margin-left: 15px;" name="itemsperpage"  [(ngModel)]="itemsPerPage" (change)="changeitemsperpage($event);">
            <option [value]="10" selected>10</option>
            <option [value]="20">20</option>
            <option [value]="50">50</option>
            <option [value]="100">100</option>
          </select>
        </div>       
      </div>
    </div>    
  </div>
</section>


<ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
</ngx-spinner>
<!-- <ng-template #applicationTemplate>
  <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">
    <div class="modal-header" style="cursor:move" #dragHandle>
      <h4 class="modal-title pull-left" *ngIf="operation=='add'"><span class="fa fa-plus"></span>&nbsp;Add New
        Application</h4>
      <h4 class="modal-title pull-left" *ngIf="operation=='update'"><span class="fa fa-pencil"></span>&nbsp;Edit
        Application</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="applicationModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <form [formGroup]="applicationForm" (ngSubmit)="Post(applicationForm.value)">
        <input type="hidden" name="applicationid" formControlName="applicationid" />

        <div class="form-group">
          <label class="col-md-3 control-label">
            Application<span style="color:red;">*</span>
          </label>
          <div class="col-md-9">
            <input type="text" trim placeholder="application" name="application" formControlName="application"
              class="form-control" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-3 control-label">
            Exe path
          </label>
          <div class="col-md-9">
            <input type="text" trim placeholder="exepath" name="exepath" formControlName="exepath"
              class="form-control" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-3 control-label">
            Service url
          </label>
          <div class="col-md-9">
            <input type="text" trim placeholder="serviceurl" name="serviceurl" formControlName="serviceurl"
              class="form-control" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-3 control-label">
            App version
          </label>
          <div class="col-md-9">
            <input type="text" trim placeholder="appversion" name="appversion" formControlName="appversion"
              class="form-control" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-3 control-label">
            Paramss
          </label>
          <div class="col-md-9">
            <input type="text" trim placeholder="paramss" name="paramss" formControlName="paramss"
              class="form-control" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-3 control-label">
            Web url
          </label>
          <div class="col-md-9">
            <input type="text" trim placeholder="weburl" name="weburl" formControlName="weburl" class="form-control" />
          </div>
        </div>
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-9">
            <div class="form-inline row">
              <div class="form-group col-md-4">
                <label class="control-label">

                  <input type="checkbox" trim placeholder="isexe" name="isexe" formControlName="isexe" />isexe
                </label>
              </div>
              <div class="form-group col-md-4">
                <label class="control-label">

                  <input type="checkbox" trim placeholder="isservice" name="isservice" formControlName="isservice" />
                  isservice </label>
              </div>
              <div class="form-group col-md-4">
                <label class="control-label">

                  <input type="checkbox" trim placeholder="iswebapp" name="iswebapp" formControlName="iswebapp" />
                  iswebapp </label>
              </div>
              <div class="form-group col-md-6">
                <label>
                  <input type="checkbox" trim placeholder="isoutlineconfigtemplate" name="isoutlineconfigtemplate"
                    formControlName="isoutlineconfigtemplate" /> isoutline configtemplate</label>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group" style="padding-top: 20px;">
          <label class="col-md-3">
            Features
          </label>
          <div *ngFor="let feature of FeatureselectedItems;let i = index" class="col-md-8">
            <div class="scolumn">
              <input type="checkbox" [checked]="feature.active" id={{feature.mdata}}
                (change)="ChangeActive1($event)" name={{feature.mdata}}>
              <label for={{feature.mdata}}>{{feature.mdata}}</label><br>
            </div>
          </div>
        </div>


        <div *ngIf="operation=='update'">

          <div class="form-group">
            <label class="col-md-3">
            </label>
            <div class="col-md-8">
              <input type="checkbox" (change)="ChangeActive()" name="active"
                formControlName="active" /><label>Active</label>
            </div>
          </div>

        </div>


        <div class="form-group">
          <button type="button" class="btn btn-primary pull-right " (click)="clearForm();">Cancel</button>
          <button type="submit" *ngIf="(edit==true || add==true)" class="btn-primary btn pull-right"
            [disabled]="applicationForm.invalid">
            <span *ngIf="operation=='add' && add==true">Add</span>
            <span *ngIf="operation!='add' && edit==true">Update</span>
          </button>
        </div>

      </form>
    </div>
  </div>
</ng-template> -->

