<div class="row">
  <div class="col-12">
    <div class="card card-body">
      <h4 class="card-title">Template List</h4>
      <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">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>{{ template.Salary }}</td>
              <td><a style="color: blue;">{{ template.imagePath }}</a></td>
              <td>
                <a href="javascript: void(0);" (click)="openModal(editTemplateModal, template)" class="link mr-2"
                  placement="top" ngbTooltip="Download">
                  <i-feather name="download" 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="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>
