<div class="row">
    <div class="col-12">
      <div class="card card-body">
        <h4 class="card-title">รายการเอกสาร</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">ลิงค์</th>
                <th scope="col">สถานะ</th>
                <!-- <th scope="col">ไฟล์</th> -->
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="listDoc.length == 0">
                <td colspan="7" class="text-center">ไม่พบข้อมูล</td>
              </tr>
              <tr  *ngFor="let data of filterListDoc() | 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()}}"></td>
                <!-- <td >{{data.id}}</td> -->
                <td>{{ data.thName }}</td>
                <td>{{ data.thDesc }}</td>
                <td><a href="{{data.link1}}"  target="_blank">คลิก</a></td>
                <td>{{ getStatus(data.status) }}</td>
                <!-- <td><a (click)="downloadFile(data.logId)">ดาวน์โหลด</a></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>
                </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]="listDoc.length" [maxSize]="3" [rotate]="true">
            <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
            <ng-template ngbPaginationNext>ถัดไป</ng-template>
          </ngb-pagination>
  
        </div>
  
      </div>
    </div>
  </div>