<div *ngIf="!AssignedLotLoading_2" style="margin-top:1%;margin-left:50%;">
  <div class="loader1">
    <div class="bar1"></div>
    <div class="bar1"></div>
    <div class="bar1"></div>
    <div class="bar1"></div>
  </div>
</div>
<section class="content">						 
<div class="">
  <table class="table table-bordered table-striped table-condensed" *ngIf="AssignedLotLoading_2" id="example1"
    st-table="projectjoblist" st-safe-src="rowCollection" search-watch-model="query">

 <thead>
  <tr *ngIf="projectjoblist.length">
    <th st-ratio="1" st-sort="jobno" class="st-sort-default sheader">Job No</th>
    <th st-ratio="1" st-sort="jobtitle" class="st-sort-default">Job Title</th>
    <th st-ratio="1" st-sort="title" class="st-sort-default">Lot Name</th>
    <th st-ratio="1" st-sort="jobcreateddate" class="st-sort-default">Create Date</th>
    <th st-ratio="1" st-sort="stagename_alias" class="st-sort-default sheader">Stage</th>
    <th st-ratio="1" st-sort="totalunits" class="st-sort-default sheader">Units</th>
    <th st-ratio="1" st-sort="lotstatus" class="st-sort-default sheader">Status</th>
  </tr>
</thead>

    <tbody>
  <tr *ngFor="let job of projectjoblist | filter: search | paginate: { itemsPerPage: itemsPerPage, currentPage: p };">
    <td st-ratio="1" class="sbody">{{ job.jobno }}</td>
    <td st-ratio="1">{{ job.jobtitle }}</td>
    <td st-ratio="1">
      {{ job.title }} <span *ngIf="job.sType == 'BATCH'">(B)</span>
    </td>
    <td st-ratio="1">{{ job.jobcreateddate }}</td>
    <td st-ratio="1" class="sbody">{{ job.stagename_alias }}</td>
    <td st-ratio="1" class="sbody">{{ job.totalunits }}</td>
    <td st-ratio="1" class="sbody" style="text-align: center;">
      <a *ngIf="(job.lotstatus == 'R' || job.lotstatus == 'YTS') && job.holdreason === 0"
         (click)="openDialog(job)" class="badge bg-green">
        Start <i class="fal fa-angle-double-right"></i>
      </a>
      <a *ngIf="(job.lotstatus == 'R' || job.lotstatus == 'YTS') && job.holdreason === 1"
         title="{{ job.reassign }}" (click)="openDialog(job)" class="badge"
         style="background-color: #a20596">
        Start <i class="fal fa-angle-double-right"></i>
      </a>
      <a *ngIf="job.lotstatus == 'P' || job.lotstatus == 'H'"
         title="Picked by {{ job.empname }}" (click)="openDialog(job)"
         class="badge bg-yellow">
        Open <i class="fal fa-angle-double-right"></i>
      </a>
      <a *ngIf="job.lotstatus == 'AP'" class="badge bg-gray"
         title="Already allocated to {{ job.empname === '' ? 'Automation' : job.empname }}">
        {{ job.empname === '' ? 'Automation' : job.empname }}
      </a>
      <a *ngIf="job.lotstatus == 'OP'" class="badge bg-yellow"
         title="Picked by {{ job.empname === '' ? 'Automation' : job.empname }}">
        {{ job.empname === '' ? 'Automation' : job.empname }}
      </a>
      <a *ngIf="job.lotstatus == 'I'" (click)="openDialog(job)"
         class="badge bg-blue">
        Re Open <i class="fal fa-angle-double-right"></i>
      </a>
    </td>
  </tr>
</tbody>

  </table>
  <div *ngIf="AssignedLotLoading_2 && projectjoblist.length===0"
    style="text-align:center;background-color: #ddd;padding:3px;margin-top: 20px !important;" class="ng-scope"><b>No Records Found.</b></div>
</div>
<br />
<div *ngIf="AssignedLotLoading_2 && projectjoblist.length!=0" class="pull-right">
  <pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
</section>
<br>
<br>
<ngx-spinner *ngIf="spinner" bdColor = "rgba(255, 255, 255, 0.8)" size = "small" color = "#000000" type = "ball-fall" [fullScreen] = "false"><p style="color: black;" > Loading... </p></ngx-spinner>