<div>
   <div class="modal-header custom_header">
      <h5 class="modal-title">{{description}}</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="close()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
   <div class="completion_popup maxheight80">
      <div class="row" [hidden]="infotable===false">
         <div class="col-sm-12 col-md-12" *ngIf="stageorderlotlist.length>0">
            <div class="panel">
               <div class="panel-hdr">
                  <h2>Metadata Details</h2>
                  <div class="panel-toolbar" style="margin:5px 0;" >
                     <div class="row">
                        <div *ngIf="projetdefid == automailprojectid">
                           <button *ngIf="mail_url !== null && mail_url !== undefined && mail_url!=='' && projetdefid == automailprojectid" type="button" class="btn btn-sm btn-outline-primary waves-effect" (click)="showmail()" ng-dblclick="return false" ><i class="fa fa-envelope"></i>&nbsp; Open Mail</button>
                           &nbsp;&nbsp;
                        </div>
                        <div *ngIf="projetdefid == automailprojectid">
                           <select class="form-control" [(ngModel)]="selectedcategoryid" id="fieldname" [disabled]="stageorder != 2">
                           <option value="0" selected>Select Category</option>
                           <option *ngFor='let item of categorylist' value="{{item.categoryid}}">{{item.categoryname}}
                           </option>
                           </select>
                        </div>
                        &nbsp;&nbsp;
                        <div *ngIf="lotmetafields.length >0 && infotable===true">
                           <button type="button" *ngIf="stagename=='Bid Entry' || stagename=='QA'"
                           (click)="OpenMetaData(editlotMetadataTemplate);"
                           class="btn btn-outline-primary waves-effect waves-themed btn-sm">
                           <span class="fal fa-edit"></span>&nbsp;Edit
                           </button> 
                        </div>
                     </div>
                  </div>
               </div>
               <div class="panel-body">
                  <div class="row" *ngIf="infotable===true" style="margin-top: 5px;">
                     <div class="col-md-6">
                        <label>Job Info: &nbsp;</label><span style="font-weight: bold;">{{infoselectedjob}}</span>
                     </div>
                     <div class="col-md-6">
                        <label>Lot Info: &nbsp;</label><span style="font-weight: bold;">{{infoselectedlot}}</span>
                     </div>
                  </div>
                  <div *ngIf="infotable===false"
                     style="text-align:center;background-color: #ddd;padding:3px; margin-top: 10px;" class="ng-scope"><b>No Lot selected.</b></div>
                  <table  class = "table table-bordered table-condensed table-hover table-striped" *ngIf="infotable===true">
                     <thead>
                        <tr>
                           <th>Fields</th>
                           <th>Value</th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr *ngFor="let itm of lotmetafields">
                           <td>{{itm.FieldName}}</td>
                           <td>{{itm.FieldValue}}</td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <div class="table-responsive" >
               <table  class = "table table-bordered table-condensed table-hover table-striped" >
                  <thead style="color: white;">
                     <tr style="padding: 5px;">
                        <th style="width:60px">#</th>
                        <th class="pointer" >
                           Action           
                           <div class="pull-right">
                              <input type="checkbox" [checked]="insertall" [disabled]="stagename.toString()=='Bid Entry'" (click)="select('M','job')" > 
                           </div>
                        </th>
                        <th class="pointer" >
                           Job Title           
                        </th>
                        <th class="pointer" >
                           Lot Title        
                        </th>
                        <th class="pointer" >
                           Project ID      
                        </th>
                        <th class="pointer">
                           Company Name
                        </th>
                        <th class="pointer">
                           State
                        </th>
                        <th class="pointer">
                           City
                        </th>
                        <th class="pointer">
                           Status          
                        </th>
                        <th class="pointer" *ngIf="stagename=='QA'">
                         Record Error          
                        </th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr *ngFor="let job of stageorderlotlist | paginate: { id: 'first',itemsPerPage: itemsPerPage, currentPage: p};let i = index">
                        
                        <td>{{itemsPerPage * (p - 1) + i + 1}}
                        </td>
                        <td style="padding: 5px;">
                           &nbsp;&nbsp;
   
                           <span>
                           <button  class="btn btn-icon btn-xs btn-success shadow-0 mr-1 rounded-circle " (click)="show_infotable(job)" title="Info" ><i class="fal fa-info"></i></button>
                           </span>
                           &nbsp;&nbsp;
                           <input type="checkbox" [checked]="job.insert_p==1" [disabled]="stagename.toString()=='Bid Entry' && job.insert_p==0 && (job.lotstatus == 'R' || be_area ) "  (click)="select('S',job)" >
                        </td>
                        
                        <td>{{job.jobtitle}}</td>
                        <td>{{job.title}}</td>
                        <td>{{job.projectcode}}</td>
                        <td>{{job.companyname}}</td>
                        <td>{{job.state}}</td>
                        <td>{{job.city}}</td>
                        <td>
                           <a *ngIf="job.lotstatus == 'R' || job.lotstatus == 'YTS' || job.lotstatus == ''" class="badge bg-green">YTS</a>
                           <a *ngIf="job.lotstatus == 'I'" class="badge bg-blue">Hold</a>
                           <a *ngIf="job.lotstatus == 'P' || job.lotstatus == 'WIP'" title="Picked by {{job.empname}}" class="badge bg-yellow">WIP</a>                                            
                        </td>
                        <td *ngIf="stagename=='QA'">
                           <a *ngIf="job.re_count > 0" style="color: green;">True</a>
                           <a *ngIf="job.re_count == 0 || job.re_count == '' || job.re_count == undefined || job.re_count == null " style="color: red;" >False</a>
                        </td>
                     </tr>
                     <tr *ngIf="stageorderlotlist.length==0">
                        <td colspan="11" style="text-align:center;">No Records Found</td>
                     </tr>
                  </tbody>
               </table>
               <div class="col-md-4 pull-right">
                  <div *ngIf="stageorderlotlist && stageorderlotlist.length!=0">
                     <pagination-controls id="first" (pageChange)="p = $event"></pagination-controls>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-12">
            <div class="row">
               <div class="col-md-4">
                  </div>
                  <div class="col-md-4 col-sm-12 btn-group1" style="text-align: center;">
                     <div *ngIf="re_area" >
                     <button class="btn btn-outline-danger waves-effect waves-themed btn-sm errorbtn"  (click)="openrecorderror()">
                        <i class="fal fa-times"></i> &nbsp;Close
                     </button>
                     <!-- <button class="btn btn-outline-success waves-effect waves-themed btn-sm"  (click)="save('F','accept','')">
                        <i class="fa fa-check"></i> &nbsp;fr Accept
                     </button> -->
                     <button type="button"  class="btn btn-outline-success waves-effect waves-themed btn-sm" 
                     (click)="error_check('F','accept',0,errorlst.length)">
                     <i class="fa fa-check"></i>
                     Accept
                     </button>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div  class="row" *ngIf="projetdefid == automailprojectid">
         <div class="col-sm-12 col-md-12" style="margin-left: -13px">
            <div class="panel" >
               <div class="panel-hdr">
                  <h2 class="">
                     Email Details
                  </h2>
                  <div class="panel-toolbar">
                     <div  style="float:right;" style="padding:5px 0;">
                        <div class="input-group">
                           <div class="panel-toolbar" role="menu" title="Project Minimize">
                              <a href="#emaildetails" data-toggle="tooltip" class="btn btn-panel hover-effect-dot js-panel-collapse waves-effect waves-themed" data-toggle="collapse" style="line-height: 16px;">
                              <i class="fa fa-compress-alt" style="color: #fff;"></i>
                              </a> 
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div id="emaildetails" class="collapse">
                  <div class="box-body" >
                     <div class="row row-padding-bottom" style="padding-left: 10px;overflow:scroll;max-height:190px;margin-top: -8px;" *ngIf="mailbody != undefined && mailbody != null  && mailbody !=''"  >
                        <div class="mailbox-read-info">
                           <h4 class="ng-binding">
                              <span style="font-weight: 600;">Subject:</span> {{subject}}
                           </h4>
                           <h6 class="ng-binding">
                              <span style="font-weight: 600;">From:</span>  {{from_user}}
                              <span class="mailbox-read-time pull-right ng-binding">{{rec_date | date:'medium'}}</span>
                           </h6>
                        </div>
                        <div [innerHTML]="mailbody"></div>
                     </div>
                     <div class="row row-padding-bottom" style="padding-left: 10px;text-align: center !important;font-weight: 500;" *ngIf="mailbody == undefined || mailbody == null  || mailbody ==''">
                        <span>This message might have been moved or deleted.</span> 
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12 col-sm-12 btn-group1" *ngIf="stageorderlotlist.length != 0">
            <button type="button" *ngIf="stagename=='Bid Entry' &&  projetdefid != automailprojectid && stagelist.length != 4 && re_btn==false" class="btn btn-sm btn-outline-info waves-effect waves-themed" (click)="opencomment(commentPopUpTemplate,'dup')"  ng-dblclick="return false"><i class="fal fa-angle-double-right"></i> &nbsp;Duplicate</button>
            <button  *ngIf="projetdefid != automailprojectid && re_area==false" class="btn btn-sm btn-outline-warning waves-effect waves-themed"  (click)="dashboardMove(reAllocateTemplate)" ng-dblclick="return false" ><i class="fa fa-play-circle"></i>&nbsp;Bypass</button>
            <button *ngIf="moveback == null || moveback == 0 && re_area==false  && this.stagename.toString() !='QA Correction'" type="button"  class="btn btn-outline-primary waves-effect waves-themed btn-sm" (click)="save('A')" ng-dblclick="return false" [disabled]="selectedcategoryid == 0"><i class="fa fa-check"></i> Accept</button>
            <button *ngIf="moveback == null || moveback == 0 && re_area==false && this.stagename.toString() =='QA Correction'" type="button"  class="btn btn-outline-primary waves-effect waves-themed btn-sm" (click)="save('F','accept')" ng-dblclick="return false" [disabled]="selectedcategoryid == 0"><i class="fa fa-check"></i> Accept</button>
            <span *ngIf="(moveback!= null && moveback != 0) && stagename=='QA' && re_area == false">
            <button [disabled]="re_btn ==false"  type="button"  class="btn errorbtn btn-outline-danger waves-effect waves-themed btn-sm"  (click)="openrecorderror()" ng-dblclick="return false"><i class="fa fa-exclamation-circle"></i> Record Error</button>
            </span>
            <!-- <button *ngIf="moveback!= null && moveback != 0 && re_area==false" type="button" class="btn btn-sm btn-outline-danger waves-effect waves-themed hide" (click)="save('B','skip')"><i class="fal fa-times"></i> &nbsp;Reject</button> -->
            <button *ngIf="moveback!= null && moveback != 0 && re_area==false" type="button" class="btn btn-sm btn-outline-danger waves-effect waves-themed hide" (click)="opencomment(commentPopUpTemplate,'Reject')"><i class="fal fa-times"></i> &nbsp;Reject</button>
            <button *ngIf="moveback!= null && moveback != 0 && re_area==false && stagename!='QA'" type="button"  class="btn btn-outline-success waves-effect waves-themed btn-sm" (click)="save('F','accept')" ng-dblclick="return false" [disabled]="selectedcategoryid == 0" style="margin-right: 0;"><i class="fa fa-check"></i>Accept</button>
            <button *ngIf="moveback!= null && moveback != 0 && re_area==false && stagename=='QA' " type="button"  class="btn btn-outline-success waves-effect waves-themed btn-sm" (click)="error_check('F','accept')" ng-dblclick="return false" [disabled]="selectedcategoryid == 0" style="margin-right: 0;"><i class="fa fa-check"></i>Accept</button>
         </div>
      </div>
      

      <div class="accordion" id="accordionError" *ngIf="qa_corr_area === true" style="margin-top: 5px ;">
            <div class="card">
               <div class="card-header" data-toggle="collapse" data-target="#collapsetwo1" aria-expanded="true">
                  <span class="title">Errors</span>
                   <span class="accicon"><i class="fas fa-angle-down1 rotate-icon"></i></span>
               </div>
               <div id="collapsetwo" class="card-body collapse show" data-parent="#accordionError">
                  <div class="row">
                     <div class="col-sm-12 col-md-12">
                        <div class="table-responsive" style="min-height: fit-content;">
                           <div class="table-responsive">
                              <table class="table table-bordered table-condensed table-hover table-striped">
                                 <thead class="headings">
                                    <tr>
                                       <th class="sno_width" style="width: 12vh;">#</th>
                                       <th class="pointer" (click)="sort('errortype')" style="width: 47vh;">
                                          Error Type
                                          <i *ngIf="key =='errorcategory'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                                       </th>
                                       <th class="pointer" (click)="sort('remarks')">
                                          Remarks
                                          <i *ngIf="key =='remarks'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                                       </th>
                                       <th class="pointer" (click)="sort('in_files')">
                                          Input Files
                                          <i *ngIf="key =='in_files'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                                       </th>
                                       <th class="pointer" (click)="sort('out_files')">
                                          Output Files
                                          <i *ngIf="key =='out_files'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                                       </th>

                                    </tr>
                                 </thead>
                                 <tbody>
                                    <tr *ngFor="let item of errorlst| orderBy: key : reverse |filter:searchText1 |paginate: { id: 'second',itemsPerPage: itemsPerPage1, currentPage: p1};let i = index">
                                       <td>{{itemsPerPage1 * (p1 - 1) + i + 1}}</td>
                                       <td>{{item.errortype}}</td>
                                       <td>{{item.remarks}}</td>
                                       <td >
                                          <div *ngFor="let infile of item.in_files">
                                             <button class="btn btn-link" style="padding-top: 0%; padding-bottom: 0%;" (click)="download_files(infile)">
                                                {{infile.filename}}
                                            </button>
                                    </div>
                                       </td>
                                       <td >
                                          <div *ngFor="let outfile of item.out_files">
                                             <button class="btn btn-link" style="padding-top: 0%; padding-bottom: 0%;" (click)="download_files(outfile)">
                                                {{outfile.filename}}
                                            </button>
                                       </div>
                                          </td>
                                    </tr>
                                    <tr *ngIf=" errorlst.length==0 || (errorlst |filter:searchText).length === 0">
                                       <td colspan="11" style="text-align:center;">No Records Found</td>
                                    </tr>
                                 </tbody>
                              </table>
                              <div *ngIf="errorlst && errorlst.length!=0" class="pull-right">
                                 <pagination-controls id="second" (pageChange)="p1 = $event"></pagination-controls>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               </div>
      </div>

      <div [hidden]="!re_area" class="accordion" id="accordionError">
         <div class="card">
            <div class="card-header" data-toggle="collapse" data-target="#collapseOne1" aria-expanded="true">
               <span class="title">Record Error </span>
                <span class="accicon"><i class="fas fa-angle-down1 rotate-icon"></i></span>
            </div>
            <div id="collapseOne" class="card-body collapse show" data-parent="#accordionError">
               <div class="row" *ngIf="recorderrordetailslst.length != 0" style="padding-bottom: 14px !important;">
                  <div class="col-sm-12 col-md-12">
                     <div class="row">
                        <div class="col-md-4 col-sm-12">
                           <ul class="project_column">
                              <li>
                                 <span class="label"  >Project</span>
                                 <span class="value">{{recorderrordetailslst[0].workflow}}</span>
                              </li>
                              <li>
                                 <span class="label" >Project ID</span>
                                 <span class="value">{{recorderrordetailslst[0].projectid }}</span>
                              </li>
                           </ul>
                        </div>
                        <div class="col-md-4 col-sm-12">
                           <ul class="checkagent_column">
                              <li>
                                 <span class="label">Production Agent</span>
                                 <span class="value">{{recorderrordetailslst[0].agentname}}</span>
                              </li>
                              <li>
                                 <span class="label">Production Date</span>
                                 <span class="value">{{recorderrordetailslst[0].productiondate | date:'MM-dd-yyyy'}}</span>
                              </li> 
                           </ul>
                        </div>
                        <div class="col-md-4 col-sm-12" *ngIf="recorderrordetailslst[0].bidentryname!=null && recorderrordetailslst[0].bidentrydate!=null">
                           <ul class="checkagent_column" >
                              <li *ngIf="recorderrordetailslst[0].bidentryname!=null">
                                 <span class="label">Bid Entry Agent</span>
                                 <span class="value" >{{recorderrordetailslst[0].bidentryname}}</span>
                               <!--   <span class="value" *ngIf="recorderrordetailslst[0].bidentryname==null"></span> -->
                              </li>
                              <li  *ngIf="recorderrordetailslst[0].bidentrydate!=null">
                                 <span class="label">Bid Entry Date</span>
                                 <span class="value">{{recorderrordetailslst[0].bidentrydate | date:'MM-dd-yyyy'}}</span>
                                 <!-- <span class="value" *ngIf="recorderrordetailslst[0].bidentrydate==null"></span> -->
                              </li>
                           </ul>
                        </div>
              
                        <div class="col-md-4 col-sm-12">
                           <ul class="project_column">
                              <li>
                                 <span class="label" >Job Title</span>
                                 <span class="value">{{recorderrordetailslst[0].jobtitle}}</span>
                              </li>
                              <li>
                                 <span class="label">Lot Title</span>
                                 <span class="value">{{recorderrordetailslst[0].lottitle}}</span>
                              </li>
                           </ul>
                        </div>
                        <div class="col-md-4 col-sm-12" *ngIf="recorderrordetailslst[0].biddate">
                           <ul class="date_column" >
                              <li>
                                 <span class="label" >QA Agent</span>
                                 <span class="value">{{recorderrordetailslst[0].qacheckagenet}}</span>
                              </li> 
                              
                           </ul>
                           <ul class="date_column">
                              <li>
                                 <span class="label" >QA Date</span>
                                 <span *ngIf="recorderrordetailslst[0].qadate != null" class="value">{{recorderrordetailslst[0].qadate | date:'MM-dd-yyyy'}}</span>
                                 <!-- <span *ngIf="recorderrordetailslst[0].qadate == null" class="value"></span> -->
                              </li>  
                           </ul>
                        </div>
                        <div class="col-md-4 col-sm-12" *ngIf="recorderrordetailslst[0].biddate">
                           <ul class="date_column">
                              <li>
                                 <span class="label" >Bid Date</span>
                                 <span class="value">{{recorderrordetailslst[0].biddate | date:'MM-dd-yyyy'}}</span>
                              </li> 
                           </ul>  
                           
                         
                        </div>
                        <div class="col-md-4 col-sm-12">
                           
                        </div>
                     </div>
                  </div>
               </div>          
                        <div class="row">
                           <div class="col-sm-12 col-md-12">
                              <div class="row">
                                 <div class="col-md-3 col-sm-12 multiselect_custom" >
                                    <input type="hidden" [(ngModel)]="recorderrorid">
                                    <ng-multiselect-dropdown [placeholder]="'Select The Error Type...'" [data]="qaremarklst"
                                    textField="errortype" [settings]="_ddlQASettings" name="ddlQAtype"
                                    [(ngModel)]="_qaremarkselected" (onDeSelect)="onItemDeSelect($event,'recorderror')"
                                    (onSelect)="onItemSelect($event,'recorderror');" style="margin-left: -15px;">
                                    </ng-multiselect-dropdown>
                                 </div>
                                 <div class="col-md-3 col-sm-12 multiselect_custom" *ngIf="errorremarkslst.length != 0">
                                    <input type="hidden" [(ngModel)]="e_remarks">
                                    <ng-multiselect-dropdown [placeholder]="'Select The Error Remarks...'" [data]="errorremarkslst"
                                    textField="errorremarks" [settings]="_ddlerrorremarkSettings" name="errorremarkslst"
                                    [(ngModel)]="_errorremarkselected" (onDeSelect)="onItemDeSelect($event,'remarks')"
                                    (onSelect)="onItemSelect($event,'remarks');" style="margin-left: -15px;" [disabled]="btnqa == false">
                                    </ng-multiselect-dropdown>
                                 </div>
                                 <!-- <div class="col-md-4 col-sm-2" style="margin-top: 16px;">
                                    <button class="btn btn-outline-primary waves-effect waves-themed btn-sm"
                                        (click)="remarks()" [disabled]="btnqa ==false"> QA Remarks</button>
                                    
                                    </div> -->
                                 <div [ngClass]="{'col-md-9 col-sm-12':  errorremarkslst.length ===0 , 'col-md-6 col-sm-12':  errorremarkslst.length !=0}" 
                                 style="padding-bottom: 10px;">
                                    <textarea name="remarkstextarea" id="remarktextarea" cols="10" rows="5"
                                    [disabled]="btnqa == false"  [(ngModel)]="errorremark" style="width: inherit; font-size: 0.8rem;
                                    letter-spacing: 1px;"></textarea>
                                   
                                
                                 </div>
                                 </div>
                                 <div class="row">
                                    <div class="col-md-3" *ngIf="errorremarkslst.length == 0"></div>
                                    <div class="col-md-6" *ngIf="errorremarkslst.length != 0"></div>
                                    <div  [ngClass]="{'col-md-3':  errorremarkslst.length === 0 , 'col-md-2':  errorremarkslst.length !=0}">
                                       <label class="labelfont control-label">Input File :</label>
                                       <input #input_file_upload type="file" name="input_file_upload" id="input_file_upload" [hidden]="file_hide==false" [disabled]="btnqa == false"
                                       (change)="upload_file($event.target.files,$event)" 
                                        multiple="multiple">
                                       <!-- [(ngModel)]="errorfile" -->

                                 <!-- <label class="labelfont control-label" [hidden]="file_hide ==true"
                                 style="width: max-content;font-weight: 600;">Uploaded Filename: {{uploaded_filename}}  
                              <button type="button" spellcheck="true" class="btn btn-icon btn-xs btn-red shadow-0 mr-1 rounded-circle" aria-label="Close" (click)="delete_file()" [hidden]="file_hide ==true">
                              <span aria-hidden="true">&times;</span>
                              </button>
                              </label> -->
                              <br>
                              <div *ngIf="in_files.length!= 0">
                              <table class="table table-borderless table-condensed table-hover" style="border: none;">
                                 <tbody style="border: none;">
                                    <tr *ngFor="let item of in_files" style="border: none;">
                                    <td style="border: none;text-wrap: balance;" >{{item.filename}}</td>
                                    <td style="border: none;"><i class="fa fa-download" aria-hidden="true" style="color: #009b00;" (click)="download_files(item)"></i></td>
                                    <td style="border: none;"> <button type="button" spellcheck="true" class="btn btn-icon btn-xs btn-red shadow-0 mr-1 rounded-circle" aria-label="Close" (click)="delete_file(item)">
                                       <span aria-hidden="true">&times;</span>
                                       </button>
                                    </td>
                                 </tr>
                                 </tbody>
                              </table>
                           </div>
                           </div>
                           <div  [ngClass]="{'col-md-3':  errorremarkslst.length === 0 , 'col-md-2':  errorremarkslst.length !=0}">
                              <label class="labelfont control-label">Output File :</label>
                              <input #output_file_upload type="file" name="output_file_upload" id="output_file_upload" [hidden]="file_hide==false"[disabled]="btnqa == false"
                              (change)="upload_outfile($event.target.files,$event)" multiple="multiple">
                             
                        <!-- <label class="labelfont control-label" [hidden]="file_hide ==true"
                        style="width: max-content;font-weight: 600;">Uploaded Filename: {{uploaded_filename}}  
                     <button type="button" spellcheck="true" class="btn btn-icon btn-xs btn-red shadow-0 mr-1 rounded-circle" aria-label="Close" (click)="delete_file()" [hidden]="file_hide ==true">
                     <span aria-hidden="true">&times;</span>
                     </button>
                     </label> -->
                     <br>
                     <div *ngIf="out_files.length !=0">
                     <table class="table table-borderless table-condensed table-hover" style="border: none;">
                        <tbody style="border: none;">
                           <tr *ngFor="let item of out_files" style="border: none;">
                           <td style="border: none;text-wrap: balance;">{{item.filename}}</td>
                           <td style="border: none;"><i class="fa fa-download" aria-hidden="true" style="color: #009b00;" (click)="download_files(item)"></i></td>
                           <td style="border: none;"> <button type="button" spellcheck="true" class="btn btn-icon btn-xs btn-red shadow-0 mr-1 rounded-circle" aria-label="Close" (click)="delete_file(item)">
                              <span aria-hidden="true">&times;</span>
                              </button>
                           </td>
                        </tr>
                        </tbody>
                     </table>
                  </div>
                  </div>
                                 <div Class="col-md-2 col-sm-3 btn-group1" style="text-align: left !important;" *ngIf="errorremarkslst.length !=0" >
                                    <button class="btn btn-outline-success waves-effect waves-themed btn-sm" style="margin-bottom: 10px"
                                       (click)="save_recorderror()">{{btn}}</button>
                                       <br>
                                    <button class="btn btn-outline-danger waves-effect waves-themed btn-sm errorbtn" style="margin-right:0 !important"
                                       (click)="reset()">Reset</button>
                                 </div>
                                 
                                 <div Class="col-md-3 col-sm-3 btn-group1" *ngIf="errorremarkslst.length == 0" >
                                    <button class="btn btn-outline-success waves-effect waves-themed btn-sm"
                                       (click)="save_recorderror()">{{btn}}</button>
                                    <button class="btn btn-outline-danger waves-effect waves-themed btn-sm errorbtn" style="margin-right:0 !important"
                                       (click)="reset()">Reset</button>
                                 </div>
                              </div>
                           </div>
                           <div>
                           </div>
                        </div>     
                       
            </div>
         </div>         
         <div class="card">
            <div class="card-header" data-toggle="collapse" data-target="#collapsetwo1" aria-expanded="true">
               <span class="title">Errors</span>
                <span class="accicon"><i class="fas fa-angle-down1 rotate-icon"></i></span>
            </div>
            <div id="collapsetwo" class="card-body collapse show" data-parent="#accordionError">
               <div class="row">
                  <div class="col-sm-12 col-md-12">
                     <div class="table-responsive" style="min-height: fit-content;">
                        <div class="table-responsive">
                           <table class="table table-bordered table-condensed table-hover table-striped">
                              <thead class="headings">
                                 <tr>
                                    <th class="sno_width" style="width: 12vh;">#</th>
                                    <th class="pointer" (click)="sort('errortype')" style="width: 47vh;">
                                       Error Type
                                       <i *ngIf="key =='errorcategory'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                                    </th>
                                    <th class="pointer" (click)="sort('remarks')">
                                       Remarks
                                       <i *ngIf="key =='errortype'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                                    </th>
                                    <th class="pointer" style="width: 12vh;">
                                       Action
                                    </th>
                                 </tr>
                              </thead>
                              <tbody>
                                 <tr *ngFor="let item of errorlst| orderBy: key : reverse |filter:searchText1 |paginate: { id: 'second',itemsPerPage: itemsPerPage1, currentPage: p1};let i = index">
                                    <td>{{itemsPerPage1 * (p1 - 1) + i + 1}}</td>
                                    <td>{{item.errortype}}</td>
                                    <td>{{item.remarks}}</td>
                                    <td style="text-align: center !important;width: fit-content;">
                                       <span class="fal fa-pencil blue" style="cursor:pointer;padding-right: 8px;font-size: medium;"
                                          (click)="edit(item,'onclick')"></span>
                                       <span class="fal fa-trash red" style="cursor:pointer;font-size: medium;"
                                          (click)="delete(item)"></span>
                                    </td>
                                 </tr>
                                 <tr *ngIf=" errorlst.length==0 || (errorlst |filter:searchText).length === 0">
                                    <td colspan="11" style="text-align:center;">No Records Found</td>
                                 </tr>
                              </tbody>
                           </table>
                           <div *ngIf="errorlst && errorlst.length!=0" class="pull-right">
                              <pagination-controls id="second" (pageChange)="p1 = $event"></pagination-controls>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            </div>
         </div>    
   </div>

</div>
<!--<ngx-spinner bdColor="rgba(144, 144, 144, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
   </ngx-spinner>-->
<ng-template #Skippopup>
   <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">
      <div class="modal-header" style="cursor:move" #dragHandle>
         <h4 class="modal-title pull-left">&nbsp;Skip stage</h4>
         <div class="pull-right">
            <button type="button" class="close pull-right" aria-label="Close" style="margin-top: -35px;
               margin-right: -8px;" (click)="closefrom()">
            <span aria-hidden="true">&times;</span>
            </button> 
         </div>
      </div>
      <div class="modal-body">
         <form>
            <input type="hidden" >
            <div *ngFor="let item of uniqueStageTitles">
               <span>
               <input type="checkbox" (change)="ChangeActive($event,item)" name="item.stagename_alias" >&nbsp;<label>{{item.stagename_alias}}</label>
               </span>&nbsp;
            </div>
            <div class="form-group">
               <button type="submit"  class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right">
               <span >Submit</span>
               </button>
            </div>
         </form>
      </div>
   </div>
   <ngx-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>
</ng-template>
<ng-template #reAllocateTemplate>
   <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">
      <div class="modal-header" style="cursor:move" #dragHandle>
         <h4 class="modal-title pull-left">{{allocatetype}} Settings</h4>
         <button type="button" class="close pull-right" aria-label="Close" (click)="reAllocateModalRef.hide();">
         <span aria-hidden="true">&times;</span>
         </button>
      </div>
      <div class="modal-body">
         <div class="mailbox-read-info" >
            <h4 style="font-size: 13px; line-height: 23px;"><span style="font-weight: 600;">Stage :</span>  {{stagename}}</h4>
            <h4 style="font-size: 13px; line-height: 23px;"><span style="font-weight: 600;">Title   :</span>
               <span *ngFor="let item of skiptitle_lst">
               {{item}};
               </span> 
            </h4>
            <h5>
               <!--  <span class="mailbox-read-time pull-right">{{callType.mailtemp.senton|date:'medium'}}</span>-->
            </h5>
         </div>
         <div class="mailbox-read-message">
            <button type="button" *ngIf="allocatetype == 'Re Allocation'" class="btn btn-google btn-sm" data-container="body"
            title="Remove title from {{assignee}}"  (click)="relMove();">
            <i class="fa fa-trash-o"></i> Remove the Title ({{lottitle}})  from {{assignee}}
            </button>
            <!-- <div *ngIf="allocatetype != 'Re Allocation'" class="row"> -->
            <table class="table-bordered" style="width:100%;">
               <tr>
                  <td>
                     <label style="text-align:left;">Back</label>
                  </td>
                  <td>
                     <label>Current Stage</label>
                  </td>
                  <td>
                     <label>Forward</label>
                  </td>
               </tr>
               <tr>
                  <td>
                     <select name="selback" id="selback" [(ngModel)]="selback" class="form-control" (change)="changeSelBack(selback);">
                     <option value="0">Select</option>
                     <option *ngFor="let uni of backstage" value="{{uni.stageorder}}">{{uni.stagename_alias}}</option>
                     </select>
                  </td>
                  <td>
                     <button type="button" class="btn-outline-primary btn-sm" data-container="body">
                     {{stagename}}
                     </button>
                  </td>
                  <td>
                     <select name="selforward" id="selforward" [(ngModel)]="selforward" class="form-control" (change)="changeSelForward(selforward);">
                     <option value="0">Select</option>
                     <option *ngFor="let uni of forwardstage" value="{{uni.stageorder}}">{{uni.stagename_alias}}</option>
                     </select>
                  </td>
               </tr>
               <tr>
                  <td colspan="3" style="padding-top:15px; text-align:center;">
                     <button type="button" class="btn btn-facebook btn-sm" (click)="selMove();">
                     <i class="fa fa-angle-double-left"></i> Move <i class="fa fa-angle-double-right"></i>
                     </button>
                  </td>
               </tr>
            </table>
            <!-- </div> -->
         </div>
         <!-- /.mailbox-read-message -->
      </div>
   </div>
   <ngx-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>
</ng-template>
<ng-template #worlAreaPopUpTemplate style="width:80%">
   <div class="modal-content" ngDraggable [handle]="dragHandle" >
      <div class="modal-header" style="cursor:move;" #dragHandle>
       <h4 class="modal-title">{{comments}}</h4>
       <button type="button" class="close pull-right" aria-label="Close" (click)="workAreaPopUpModalRef.hide();">
       <span aria-hidden="true">&times;</span>
       </button>
    </div>
    <div class="modal-body">
     <div style="visibility:visible">
       <div class="form-group">
          <label for="comment">{{comments_header}}</label><span style="color: red;" *ngIf="command && buttonType == 'Duplicate'"><sup>*</sup></span>
     <textarea class="form-control" rows="4" id="desc"
     [(ngModel)]="procomment"></textarea>
     </div>
     </div>
     <br>
     <div class="form-group row" *ngIf="!command">
       <label class="col-md-4 control-label">To Stage</label>
       <div class="col-mod-8">
          <select name="selback" id="selback"  [(ngModel)]="selback" class="form-control">
             <option value="">Select</option>
             <option *ngFor=" let uni of uniqueStageTitles" value="{{uni.jobworkflowid}}">{{uni.stagename_alias}}</option>
          </select>
       </div>
    </div>
    <button type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm" (click)="commentsave()" ng-dblclick="return false"><i class="fa fa-comment"></i> {{buttonType}}</button>
    </div>
     </div>
     <ngx-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>
  </ng-template>
<ng-template #commentPopUpTemplate >
   <div class="modal-content" ngDraggable [handle]="dragHandle" >
      <div class="modal-header" style="cursor:move;" #dragHandle>
         <h4 class="modal-title">{{comments}}</h4>
         <button type="button" class="close pull-right" aria-label="Close" (click)="commentsPopUpModalRef.hide();">
         <span aria-hidden="true">&times;</span>
         </button>        
      </div>
      <div class="modal-body">
         <div style="visibility:visible">
            <div class="form-group">
               <label for="comment">{{comments_header}}</label><span style="color: red;" *ngIf="command"><sup>*</sup></span>
               <textarea class="form-control" rows="4" id="desc"
               [(ngModel)]="procomment"></textarea>
            </div>
         </div>
         <br>
         <button *ngIf="buttonType === 'Duplicate'" type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm" (click)="save('F','dup')" ng-dblclick="return false"><i class="fa fa-comment"></i> {{buttonType}}</button>
         <button *ngIf="buttonType === 'Reject'" type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm" (click)="save('B','Rej')" ng-dblclick="return false"><i class="fa fa-comment"></i> {{buttonType}}</button>
      </div>
   </div>
   <ngx-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>
</ng-template>
<ng-template #editlotMetadataTemplate>
   <div class="modal-content" id="mainNgCnt1" ngDraggable>
      <div class="modal-header" style="cursor:move" #dragHandle>
         <h4>Edit Metadata</h4>
         <button  type="button" class="close pull-right" aria-label="Close" (click)="editlotmetadataPopUpModalRef.hide()">
         <span aria-hidden="true">&times;</span>
         </button>
      </div>
      <div class="modal-body">
         <div class="form-horizontal"  style="max-height: 50vh !important;overflow-y: auto ;overflow-x:hidden;">
            <div *ngIf="metadatalist.length >0">
               <div class="form-group" *ngFor="let item of metadatalist">
                  <label class="col-md-4" *ngIf="item.isexcelmeta === false">{{item.FieldName}}<i *ngIf="item.isrequired === true" style="color:red;">*</i></label>
                  <div class="col-md-8" *ngIf="item.isexcelmeta === false">
                    
                     <!-- <input *ngIf="item.inputtype === 'text'" class="form-control"  [(ngModel)]="item.FieldValue" type="text"
                     required placeholder="Enter Value"> -->
    <!--                  <input *ngIf="item.inputtype === 'text' && item.FieldName == 'Project ID'" class="form-control"  [(ngModel)]="item.FieldValue" type="text"
                     required placeholder="Enter Value"  oninput="this.value = this.value.toUpperCase()"> -->
                     <input *ngIf="item.inputtype==='text' && item.FieldName == 'Project ID'" 
                          type="text" 
                          name="item.FieldName"
                          [ngModel]="item.FieldValue.includes('-') ? item.FieldValue.split('-')[0] : item.FieldValue.toUpperCase()"
                          class="form-control" 
                          (input)="item.FieldValue = $event.target.value.toUpperCase()" />
                         
                     <input *ngIf="item.inputtype === 'text' && item.FieldName != 'Project ID'" class="form-control"  [(ngModel)]="item.FieldValue" type="text"
                     required placeholder="Enter Value">
                     <select *ngIf="item.inputtype === 'dropdown'" [(ngModel)]="item.FieldValue" class="form-control" >
                     <option value="0" selected>
                        --Select--
                     </option>
                     <option *ngFor="let i of item.Fieldselectoption">
                        {{i.Fieldselectoption}}
                     </option>
                     </select>
                     <input *ngIf="item.inputtype === 'date'" style="line-height: 1.37 !important;" class="form-control"  [(ngModel)]="item.FieldValue" type="date">
                     <div *ngIf="item.inputtype==='checkbox'">
                        <div *ngFor="let i of item.Fieldselectoption">
                          <input 
                            type="checkbox" 
                            [checked]="item.FieldValue === i.Fieldselectoption"
                            (change)="onCheckboxChange(i.Fieldselectoption,item.FieldName)">
                          {{ i.Fieldselectoption }}
                        </div>
                       </div>
                  </div>
               </div>
            </div>
            <div class="col-md-12" style="text-align:center;" *ngIf="metadatalist.length ===0" >
               <span style="font-weight: bold;">
               No Jobmeta data Found.
               </span>
            </div>
         </div>
         <div class="" style="text-align: right; margin-top: 10px;" *ngIf="metadatalist.length>0">
            <button type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm" (click)="AddMetaData();">Update</button>
         </div>
      </div>
   </div>
</ng-template>
<ngx-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>