<div class="row">
  <div class="col-12">
    <div class="card card-body">
      <h4 class="card-title">Employee Table</h4>
      <h5 class="card-subtitle">Here is the employee list you can add, edit or delet the emplyee</h5>
      <div class="d-flex mb-3 mt-3">
        <input type="text" class="form-control w-25" placeholder="Search by Name or Email" [(ngModel)]='searchTerm'>
        <button class="btn btn-primary ml-auto" (click)="openModal(editUserModal, null)">Add User</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">Email</th>
              <th scope="col">Mobile</th>
              <th scope="col">Date of Joining</th>
              <th scope="col">Salary</th>
              <th scope="col">Projects</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let user of filterArray | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">

              <td class="text-center">
                {{user.id}}
              </td>

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

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

              <td>{{ user.Salary }}</td>
              <td>{{ user.Projects }}</td>
              <td>
                <a href="javascript: void(0);" (click)="openModal(editUserModal, user)" 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)="deleteUser(user.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]="userList.length"></ngb-pagination>
      </div>
    </div>
  </div>
</div>


<ng-template #editUserModal let-modal>

  <div class="modal-header">

    <h5 class="modal-title" id="editUserLabel">Edit User</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]="editUser" (ngSubmit)="onSubmit()">

      <div class="form-group row">
        <label for="name" class="col-sm-4 col-form-label">Name</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" formControlName="Name" id="name" (blur)=logValidationErrors(editUser)>
          <span class="help-block" *ngIf="formsErrors.Name">
            {{formsErrors.Name}}
          </span>
        </div>
      </div>


      <div class="form-group row">
        <label for="position" class="col-sm-4 col-form-label">Position</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" formControlName="Position" id="position"
            (blur)=logValidationErrors(editUser)>
          <span class="help-block" *ngIf="formsErrors.Position">
            {{formsErrors.Position}}
          </span>
        </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(editUser)>
          <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(editUser)>
          <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(editUser)>
          <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(editUser)>
          <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(editUser)>
          <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]="editUser.invalid">Save</button>
      </div>


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