<div class="row">
  <div class="col-12">
    <div class="card card-body">
      <h4 class="card-title">รายการ Excel</h4>
      <div class="d-flex mb-3 mt-3">
        <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
      </div>
      <div class="table-responsive">
        <table class="table table-striped mb-0 no-wrap v-middle ">
          <thead class="bg-info text-white">
            <tr>
              <th class="text-center" scope="col">#</th>
              <th scope="col">รูปภาพ</th>
              <!-- <th scope="col">รหัสเอกสาร</th> -->
              <th scope="col">ชื่อ</th>
              <th scope="col">รายละเอียด</th>
              <th scope="col" class="text-center">ลิงค์</th>
              <th scope="col" class="text-center">ไฟล์</th>
              <th scope="col" class="text-center">สถานะ</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr *ngIf="listExcel.length == 0">
              <td colspan="8" class="text-center">ไม่พบข้อมูล</td>
            </tr>
            <tr  *ngFor="let data of filterListExcel() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
              <td class="text-center">{{i+1}}</td>
              <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
              <!-- <td >{{data.id}}</td> -->
              <td>{{ data.thName }}</td>
                <td>{{ data.thDesc }}</td>
                <td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)"></i></td>
                <td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.logId)"></i></td>
                <td class="text-center">
                  <span class="fa-stack rt_anim" *ngIf="data.status == '0'"  ngbTooltip="รออนุมัติ" container="body" tooltipClass="myhrcolor-1">
                  <i class="fa fa-circle fa-stack-2x text-info"></i>
                  <i class=" fas fa-hourglass-half fa-stack-1x fa-inverse"></i>
                </span>

                <span class="fa-stack rt_anim" *ngIf="data.status == '1'" ngbTooltip="เปิดใช้งาน" container="body" tooltipClass="myhrcolor-2">
                    <i class="fa fa-circle fa-stack-2x text-success"></i>
                    <i class=" fas fa-check  fa-stack-1x fa-inverse"></i>
                  </span>

                  <span class="fa-stack rt_anim" *ngIf="data.status == '2'" ngbTooltip="ไม่อนุมัติ" container="body" tooltipClass="myhrcolor-3">
                  <i class="fa fa-circle fa-stack-2x text-danger"></i>
                  <i class="fas fa-times fa-stack-1x fa-inverse" style="font-size: 1.25em;"></i>
                </span>

                </td>
              <td>
                <button type="button" class="btn btn-circle btn-success rounded-circle btn-sm mr-2" (click)="onApprove(data)"><i class="fa fa-check"></i></button>
                <button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" (click)="onCancelApprove(data)"><i class="fas fa-times"></i></button>
                <button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fas fa-trash-alt"></i></button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="d-flex justify-content-end py-2">

        <select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize"  (ngModelChange)="page">
          <option [ngValue]="10">รายการต่อหน้า: 10</option>
          <option [ngValue]="50">รายการต่อหน้า: 50</option>
          <option [ngValue]="100">รายการต่อหน้า: 100</option>
        </select>
        <ngb-pagination  [(page)]="page" [pageSize]="pageSize" [collectionSize]="listExcel.length" [maxSize]="3" [rotate]="true">
          <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
          <ng-template ngbPaginationNext>ถัดไป</ng-template>
        </ngb-pagination>

      </div>

    </div>
  </div>
</div>