<section class="content-header">
    <h4 translate class="subheader-title">
        <span class="subheader-icon fal fa-table"></span>
    Outline Master
    <small> </small>
  </h4>
</section>

<section class="content">
  <div class="box padding-15 clearfix" style="display: block;">
    <div class="row">
      <div class="col-sm-9">
        <div class="dataTables_length" id="datatable_length">
          <!-- <button type="button" *ngIf="add==true" (click)="openOutlineModal(outlineTemplate,'add')" class="btn-primary btn btn-sm">Add New</button> -->
          <button type="button" *ngIf="add==true" (click)="moveToOutlineConfiguration('',false);"
          class="btn btn-outline-primary waves-effect waves-themed btn-sm">
            <span class="fa 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="Outline 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 jambo_table table-sm">
        <thead>
          <tr class="headings">
            <th style="width:60px;min-width:auto !important;">#</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('projectname')">
              Project
              <i *ngIf="key =='projectname'" class="fal {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('projectdname')">
              Project Definition
              <i *ngIf="key =='projectdname'" class="fal {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <!-- <th class="pointer" (click)="sort('stagename')">
              Stage
              <i *ngIf="key =='stagename'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th> -->
            <th class="pointer" (click)="sort('toolset')">
              Toolset
              <i *ngIf="key =='toolset'" class="fal {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            
            <th class="pointer" (click)="sort('issmartchart')">
              Is Smart Chart
              <i *ngIf="key =='issmartchart'" class="fal {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('newsalert')">
              News Alert
              <i *ngIf="key =='newsalert'" class="fal {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('isnotapplicable')">
              Enable Not Applicable for heading
              <i *ngIf="key =='isnotapplicable'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            *ngFor="let item of outlines | 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;"
                (click)="moveToOutlineConfiguration(item,false);" title="Edit" *ngIf="edit==true"></span>&nbsp;&nbsp;
                <span class="fal fa-save" style="cursor:pointer;"
                (click)="OpenConfirmTemplateForsaveAs(item,false);" title="Save as" *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>&nbsp;&nbsp;
             
            </td>
            <td class="text-capitalize">{{item.projectname}}</td>
            <td class="text-capitalize">{{item.projectdname}}</td>
            <!-- <td class="text-capitalize">{{item.stagename}}</td> -->
            <td class="text-capitalize">{{item.toolset}}</td>
            <td>
              <span *ngIf="item.issmartchart == 1" class="fal fa-check" style="color: green;"></span>
              <span *ngIf="item.issmartchart != 1" class="fal fa-times"
                style="color: mediumvioletred;"></span>
            </td>
            <td>
              <span *ngIf="item.newsalert == 1" class="fal fa-check" style="color: green;"></span>
              <span *ngIf="item.newsalert != 1" class="fal fa-times"
                style="color: mediumvioletred;"></span>
            </td>
            <td>
              <span *ngIf="item.isnotapplicable == 1" class="fal fa-check" style="color: green;"></span>
              <span *ngIf="item.isnotapplicable != 1" class="fal fa-times"
                style="color: mediumvioletred;"></span>
            </td>
          </tr>
          <tr *ngIf="outlines.length==0 || (outlines |filter:searchText).length === 0">
            <td colspan="7" style="text-align:center;">No Records Found</td>
          </tr>

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

		
	  