<section class="content-header">
    <h4 translate class="subheader-title">
        <span class="subheader-icon fal fa-tasks"></span>
    Project Definition Master
    <small> </small>
  </h4>
</section>
<section class="content">
  <div class="box padding-15" style="display: block;">
    <div class="row">
      <div class="col-sm-9">
        <div class="dataTables_length" id="datatable_length">
           <button type="button" *ngIf="add==true"  class="btn btn-outline-primary waves-effect waves-themed btn-sm" (click)="moveProjectDefinition(0);">
            <span class="fal fa-plus"></span> &nbsp;Add New</button>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Project Definition Name" [(ngModel)]="searchText" 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>
        </div>
        <!--<input id="txtPending" type="text" class="form-control table-search" [(ngModel)]="searchText" placeholder="Search" aria-label="Search">-->
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-bordered table-condensed table-hover table-striped">
        <thead>
          <tr class="headings">
            <th style="width:60px">#</th>
            <th *ngIf="(edit==true || delete==true)" style="width:110px;">
              <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
              <span *ngIf="showall==false" class="img-showactive" style="cursor:pointer;" (click)="getactiveinactive(false)" title="Show all"></span>
              <span *ngIf="showall==true" class="img-showall" style="cursor:pointer;" (click)="getactiveinactive(true)" title="Show only active"></span>
            </th>
            <th class="pointer" (click)="sort('project_subtitle')">
              Project Definition
              <i *ngIf="key =='project_subtitle'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('projectname')">
              Project Name
              <i *ngIf="key =='projectname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('createdbyname')">
              Created By
              <i *ngIf="key =='createdbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>            
            <th class="pointer" (click)="sort('createdon')">
              Created Date
              <i *ngIf="key =='createdon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('updatedbyname')">
              Last Modified By
              <i *ngIf="key =='updatedbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('updatedon')">
              Last Modified Date
              <i *ngIf="key =='updatedon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of projectdefinitions | orderBy: key : reverse | filter:searchText | paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
            <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
            <td *ngIf="(edit==true || delete==true)">
              <span class="fal fa-pencil blue" style="cursor:pointer;"  title="Edit" (click)="moveProjectDefinition(item);" *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 class="text-capitalize">{{item.project_subtitle}}</td>
            <td class="text-capitalize">{{item.projectname}}</td>
            <td>
              <span> {{item.createdbyname}}</span>
            </td>
            <td>
              <span> {{item.createdon | date:'dd-MM-yyyy'}}</span>
            </td>
            <td>
              <span> {{item.updatedbyname }}</span>
            </td>
            <td>
              <span> {{item.updatedon | date:'dd-MM-yyyy'}}</span>
            </td>
          </tr>
          <tr *ngIf="projectdefinitions.length==0 || (projectdefinitions |filter:searchText).length === 0"><td colspan="8" style="text-align:center;">No Records Found</td></tr>

        </tbody>
      </table>
      <div *ngIf="projectdefinitions && projectdefinitions.length!=0" class="pull-right">
        <pagination-controls (pageChange)="p = $event"></pagination-controls>
      </div>
    </div>
  </div>

</section>
