<div class="row" *ngIf="checkType == '1'">
    <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" class="text-center">วันที่อัพโหลด</th>
                <th scope="col" class="text-center">วันล่าสุดดาวน์โหลด</th>
                <th scope="col" class="text-center">จำนวนดาวน์โหลด</th>
                <th scope="col" *ngIf="checkType == '1'"></th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="listCourse.length == 0">
                <td colspan="{{checkType == '1' ? '9' : '8'}}" class="text-center">ไม่พบข้อมูล</td>
              </tr>
              <tr  *ngFor="let data of filterListCourse() | 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.thName }}</td>
                <td class="text-wrap">{{ data.thDesc }}</td>
                <td>{{data.courseType}}</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.courseId)"></i></td>
                <td class="text-center">{{data.uploadDate}} {{data.uploadTime}}</td>
                <td class="text-center">{{data.downloadDate}} {{data.downloadTime}}</td>
                <td class="text-center">{{data.dwTime}} ครั้ง</td>
                <td *ngIf="checkType == '1'">
                  <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]="listCourse.length" [maxSize]="3" [rotate]="true">
            <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
            <ng-template ngbPaginationNext>ถัดไป</ng-template>
          </ngb-pagination>
  
        </div>
  
      </div>
    </div>
  </div>


  <div class="row" *ngIf="checkType != '1'">
    <div class="col-12">
      <div class="py-3">
        <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
      </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-4  mb-3"  *ngFor="let data of filterListCourse()">
      <div class="card border-5 border border-course h-100 shadow" >
        <div class=" p-2 border-5">
          <img  width="100" class="card-img-top cover" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())">
        </div>
        <div class="card-body">
          <h4 class="card-title">{{ data.thName }}</h4>
          <p class="card-text ">{{ data.thDesc }}</p>
          <p class="text-info pointer mb-0" (click)="downloadFile(data.courseId)"><i class="fas fa-download mr-1"></i> ดาวน์โหลด <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}} {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></p>
  
          <p class="text-info pointer mb-0" (click)="openLink(data.link1)"><i class="fas fa-link mr-1"></i> ตัวอย่างวิธีใช้งาน</p>
        </div>
        <div class="card-footer border-bottom-5" >
          <small class="text-muted">วันที่อัพโหลด	 {{coverDate(data.uploadDate)}} {{data.uploadTime}}</small>
        </div>
      </div>
    </div>
  </div>