<div class="container">

  <div class="row">
    <div class="col-12">
      <ul class="list-unstyled titilList">
        <li class="headingText-w">Customers List</li>
      </ul>
    </div>
  </div>

  <div class="containerContent-w">

  
    <div class="row"> 
        
        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
          <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdding()"><i class="fas fa-plus marginFontAowsome-w"></i> Add New</button>
          <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w"style="margin-left:10px" (click)="onDelete()"><i class="fas fa-times marginFontAowsome-w" style="padding-right: 5px"></i>Delete</button>
        </div>

        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
          <div class="form-group textAlignRight">
            <span class="spanSelect-w" style="margin-right:10px;">
              <span class="select-filter-before">Number of Elements:</span>
              <select [ngModel]="dataTableNumber" class="form-control select-filter" (input)="onGetValue($event)">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
              </select>
            </span>
          </div>
        </div>
        
    </div>

    <div class="row">
      <div class="col-12">
        <div class="cardBody">
          <table class="table table-bordered" >
              <thead>
                <tr>
                    <th style="width:20px;">
                    <div class="custom-control custom-checkbox">
                      <nb-checkbox status="danger" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1"></nb-checkbox>
                    </div>
                  </th>
                  <th>Edit</th>
                  <th> Name </th>
                  <th>industrial</th>
                  <th>website</th>
                  <th>phone</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index "  >
                  <td style="width:20px;">
                    <div class="custom-control custom-checkbox centerIneerItem">
                      <nb-checkbox status="danger" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected()"></nb-checkbox>
                    </div>
                  </td>
                  <td><button type="button" class="btn btn-outline-secondary defaultStyle" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
                  <td>{{ data.name }}</td>
                  <td> {{ data.industrial }}</td>
                  <td>{{ data.website_address }}</td>
                  <td>{{ data.phone }}</td>
              </tr>
            </tbody>
          </table>
          
        <pagination-controls  class="pagination-control" nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
      
        </div>
      </div>
    </div>
      

  
  <!-- <ng2-smart-table [settings]="settings" [source]="dataList" ></ng2-smart-table> -->

  <div class="col-12" *ngIf="this.count == 0" >
    <h2 class="title"> Opps,there's no data to show  </h2>
  </div>
  </div>
</div>

