<div class="row">
  <div class="col-12">
    <div class="card card-body">
      <h4 class="card-title">Template List Approve (แยกแต่ละประเภทของไฟล์)</h4>
      <h5 class="card-subtitle"> You can Approve template</h5>
      <div class="d-flex mb-3 mt-3">
        <input type="text" class="form-control w-25" placeholder="Search" [(ngModel)]='searchTerm'>
        <!-- <button class="btn btn-primary ml-auto" (click)="openModal(editTemplateModal, null)">Add template</button> -->
      </div>
      <div class="table-responsive table-bordered">
        <table class="table table-striped mb-0 no-wrap v-middle">
          <thead>
            <tr>
              <th class="text-center" scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Description</th>
              <th scope="col">Upload Date</th>
              <th scope="col">Status</th>
              <th scope="col">Type</th>
              <th scope="col">File</th>
              <th scope="col">Example</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let template of filterArray | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">

              <td class="text-center">
                {{template.id}}
              </td>
              <td>{{ template.Name }}</td>
              <!-- <td>
                <div class="d-flex align-items-center">
                  <img class="rounded-circle" [src]='template.imagePath' height=" 50px" width="50px">
                  <div class="ml-3">
                    <p class="font-medium mb-0">{{ template.Name }}</p>
                    <small>{{template.Position}}</small>
                  </div>
                </div>
              </td> -->
              <td>{{ template.Email }}</td>

              <td>{{ template.DateOfJoining |date :'fullDate' }}</td>
              <td>{{ template.Mobile }}</td>

              <td>{{ typeStatus }}</td>
              <td><a style="color: blue;">{{ template.imagePath }}</a></td>
              <td>
                <a href="javascript: void(0);" (click)="openModal(examplePhotoFile)" class="link mr-2"
                ngbTooltip="Example">
                  <i-feather name="image" class="feather-sm" ></i-feather>
                </a>
              </td>
              <td>
                <!-- <a href="javascript: void(0);" (click)="openModal(editTemplateModal, template)" class="link mr-2"
                  placement="top" ngbTooltip="Edit">
                  <i-feather name="edit-2" class="feather-sm"></i-feather>
                </a>
                <a href="javascript: void(0);" class="link" (click)="deletetemplate(template.id)" placement="top"
                  ngbTooltip="Delete">
                  <i-feather name="trash-2" class="feather-sm"></i-feather>
                </a> -->
                <button type="button" class="btn btn-success"><i-feather name="check" class="feather-sm"></i-feather></button>
                <button type="button" class="btn btn-danger"><i-feather name="x" class="feather-sm"></i-feather></button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="d-flex justify-content-center mt-5">
        <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="templateList.length"></ngb-pagination>
      </div>
    </div>
  </div>
</div>


<ng-template #editTemplateModal let-modal>

  <div class="modal-header">

    <h5 class="modal-title" id="edittemplateLabel">Edit template</h5>

    <button type="button" class="close" (click)="closeBtnClick()" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>

  </div>

  <div class="modal-body">

    <form [formGroup]="edittemplate" (ngSubmit)="onSubmit()">

      <div class="form-group row">
        <label for="name" class="col-sm-4 col-form-label">ชื่อ</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" formControlName="Name" id="name" (blur)=logValidationErrors(edittemplate)>
          <span class="help-block" *ngIf="formsErrors.Name">
            {{formsErrors.Name}}
          </span>
        </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">
        </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"></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="form-control">
              <option>เปิดใช้งาน</option>
              <option>ปิดการใช้งาน</option>
            </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="closeBtnClick()">Close</button>

        <button type="submit" class="btn btn-primary" [disabled]="edittemplate.invalid">Save</button>
      </div>


    </form>
  </div>
</ng-template>

<ng-template #examplePhotoFile let-modol>
  <img src="assets\images\phototest\excel.jpg" alt="">
  <div class="row col-12 justify-content-end ml-0 pr-0">
    <button type="button" class="btn btn-danger" (click)="closeBtnClick()" aria-label="Close">close</button>
</div>
</ng-template>

