<div class="row">
    <div class="col-12">
      <div class="card card-body">
        <h4 class="card-title">Template Manage (แยกแต่ละประเภทของไฟล์)</h4>
        <h5 class="card-subtitle">Here is the template list you can add, edit or delet the 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>
                </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="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">
              <select class="form-control">
                <option>Excel</option>
                <option>Mail Merge</option>
                <option>Resume</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">
              <select class="form-control">
                <option>เปิดใช้งาน</option>
                <option>ปิดการใช้งาน</option>
              </select>
          </div>
        </div>
  
        <!-- <div class="form-group row">
          <label for="email" class="col-sm-4 col-form-label">Email</label>
          <div class="col-sm-8">
            <input type="email" class="form-control" formControlName="Email" id="email"
              (blur)=logValidationErrors(edittemplate)>
            <span class="help-block" *ngIf="formsErrors.Email">
              {{formsErrors.Email}}
            </span>
          </div>
        </div>
  
        <div class="form-group row">
          <label for="mobile" class="col-sm-4 col-form-label">Mobile</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" formControlName="Mobile" id="mobile"
              (blur)=logValidationErrors(edittemplate)>
            <span class="help-block" *ngIf="formsErrors.Mobile">
              {{formsErrors.Mobile}}
            </span>
          </div>
        </div>
  
        <div class="form-group row">
          <label for="doj" class="col-sm-4 col-form-label">Date Of Joining</label>
          <div class="col-sm-8">
            <input type="date" class="form-control" formControlName="DateOfJoining" [(ngModel)]="joiningDate" id="doj"
              (blur)=logValidationErrors(edittemplate)>
            <span class="help-block" *ngIf="formsErrors.DateOfJoining">
              {{formsErrors.DateOfJoining}}
            </span>
          </div>
        </div>
  
        <div class="form-group row">
          <label for="salary" class="col-sm-4 col-form-label">Salary</label>
          <div class="col-sm-8">
            <input type="number" class="form-control" formControlName="Salary" id="salary"
              (blur)=logValidationErrors(edittemplate)>
            <span class="help-block" *ngIf="formsErrors.Salary">
              {{formsErrors.Salary}}
            </span>
          </div>
        </div>
  
        <div class="form-group row">
          <label for="projects" class="col-sm-4 col-form-label">Projects</label>
          <div class="col-sm-8">
            <input type="number" class="form-control" formControlName="Projects" id="projects"
              (blur)=logValidationErrors(edittemplate)>
            <span class="help-block" *ngIf="formsErrors.Projects">
              {{formsErrors.Projects}}
            </span>
          </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>