<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" >
          <button class="btn btn-primary ml-auto" (click)="openModal(editTemplateModal)">เพิ่มวิทเจ็ท</button>
        </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"></th>
              </tr>
            </thead>
            <tbody>
              <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()}}" (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">
  
                  <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" [disabled]="data.status != 0" class="btn btn-circle btn-primary rounded-circle btn-sm mr-2" (click)="openModal(editTemplateModal,data)" placement="top" ngbTooltip="แก้ไข">
                    <i class="fas fa-edit"></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]="listDoc.length" [maxSize]="3" [rotate]="true">
            <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
            <ng-template ngbPaginationNext>ถัดไป</ng-template>
          </ngb-pagination>
  
        </div>
  
      </div>
    </div>
  </div>
  
  
  <ng-template #editTemplateModal let-modal>
    <div class="modal-header">
      <h5 class="modal-title" id="edittemplateLabel">{{checkEdit?"แก้ไขวิทเจ็ท":"เพิ่มวิทเจ็ท"}}</h5>
      <button type="button" class="close" (click)="closeBtnClick()" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  
    <div class="modal-body">
        <div class="form-group row">
          <label for="nameth" class="col-sm-4 col-form-label">ชื่อ (ไทย)</label>
          <div class="col-sm-8">
            <input type="text" class="form-control"  id="nameth" [(ngModel)]="modelDoc.thName">
          </div>
        </div>
        <div class="form-group row">
          <label for="nameeng" class="col-sm-4 col-form-label">ชื่อ (อังกฤษ)</label>
          <div class="col-sm-8">
            <input type="text" class="form-control"  id="nameeng" [(ngModel)]="modelDoc.engName">
          </div>
        </div>
  
        <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">รายละเอียด (ไทย)</label>
            <div class="col-sm-8">
                <textarea class="form-control" [(ngModel)]="modelDoc.thDesc"></textarea>
            </div>
        </div>
        
        <div class="form-group row">
          <label for="position" class="col-sm-4 col-form-label">รายละเอียด (อังกฤษ)</label>
          <div class="col-sm-8">
              <textarea class="form-control" [(ngModel)]="modelDoc.engDesc"></textarea>
          </div>
        </div>
  
        <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">ภาษาที่รองรับ</label>
            <div class="col-sm-8">
                <select class="custom-select" [(ngModel)]="modelDoc.langSupport">
                  <option value="THA">ไทย</option>
                  <option value="ENG">English</option>
              </select>
              <!-- <input type="text" class="form-control"  id="nameeng" [(ngModel)]="modelDoc.langSupport"> -->
            </div>
        </div>
        <div class="form-group row">
          <label for="name" class="col-sm-4 col-form-label">รูปภาพตัวอย่าง</label>
          <div class="col-sm-8">
            <input type="file" class="form-control" (change)="onUploadImage($event)">
            <div class="msg-detail">ไฟล์ที่อนุญาต:*.jpeg, *.jpg, *.png</div>
          </div>
        </div>
  
        <div class="form-group row">
            <label for="name" class="col-sm-4 col-form-label">Link ตัวอย่าง</label>
            <div class="col-sm-8">
              <input type="text" class="form-control"  id="nameeng" [(ngModel)]="modelDoc.link1">
            </div>
          </div>
          <div class="form-group row">
            <label for="name" class="col-sm-4 col-form-label">แท็ก</label>
            <div class="col-sm-8">
            <tag-input [theme]="'bootstrap'" [(ngModel)]='modelDoc.tags' placeholder="+แท็ก" [onlyFromAutocomplete]="true"
            secondaryPlaceholder="กดปุ่ม Enter เพื่อเพิ่มแท็กใหม่" [addOnBlur]="true" [clearOnBlur]="true">
            <tag-input-dropdown [autocompleteItems]="listTag" [showDropdownIfEmpty]="true">
            </tag-input-dropdown>
          </tag-input>
            </div>
          </div>
          <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">กลุ่ม</label>
            <div class="col-sm-8">
              <select class="custom-select" [(ngModel)]="modelDoc.group.groupId" (change)="selectGroup()">
                <option  *ngFor="let item of listGroup" [ngValue]="item.groupId">{{item.thName}}</option>
            </select>
            </div>
        </div>
          <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">หมายเหตุ</label>
            <div class="col-sm-8">
                <textarea class="form-control"[(ngModel)]="modelDoc.remark"></textarea>
            </div>
          </div>
  
  
  
        <div class="modal-footer ">
            <button type="submit" class="btn btn-info" (click)="onSumit()" [disabled]="!modelDoc.thName||!modelDoc.engName">บันทึก</button>
            <button type="button" class="btn btn-danger" (click)="closeBtnClick()">ปิด</button>
        </div>
    </div>
  </ng-template>