<!-- Mobile toggle button -->
<a
  [ngClass]="showSidebar ? 'ti-close' : 'ti-menu'"
  class="btn btn-success show-left-part d-block d-lg-none"
  href="javascript:void(0)"
  (click)="mobileSidebar()"
></a>

<div class="main-part" style="height: calc(100vh - 175px)">
  <!-- left part -->
  <div
    class="left-part bg-white fixed-left-part"
    [ngClass]="{ 'show-panel': showSidebar }"
  >
    <div class="position-relative" style="height: 100%">
      <div
        class="p-l-15 p-r-25 py-3 d-flex align-items-center mt-1 border-bottom"
      >
        <div>
          <img
            src="assets/images/users/8.jpg"
            width="45"
            alt="user"
            class="rounded-circle"
          />
        </div>
        <div class="text-dark m-b-0 m-l-15 font-18">
          Bruce Banner
          <p class="m-b-0 font-12">
            <i class="fa fa-circle text-success font-10 m-r-5"></i>
            <span>Online</span>
          </p>
        </div>
      </div>
      <div class="p-3">
        <button
          type="button"
          class="btn btn-info btn-block"
          (click)="openModal(AddJobItem)"
        >
          Add Job
        </button>
        <div class="form-group mt-4">
          <input
            type="text"
            class="form-control"
            placeholder="Search"
            [(ngModel)]="searchTerm"
          />
        </div>
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="Location"
            [(ngModel)]="locationsearch"
          />
        </div>
      </div>

      <!-- listing filter -->
      <ul class="mailbox list-style-none">
        <li>
          <div
            class="message-center"
            style="height: calc(100vh - 450px)"
            [perfectScrollbar]="config"
          >
            <div class="px-3 pb-3">
              <h6 class="font-weight-normal text-muted text-uppercase mb-0">
                Filter
              </h6>
            </div>
            <div *ngFor="let item of itemsList">
              <a class="message-item border-0 d-flex align-items-center py-3">
                <div class="custom-control custom-radio">
                  <input
                    type="radio"
                    class="custom-control-input"
                    [(ngModel)]="radioSelected"
                    name="list_name"
                    value="{{ item.value }}"
                    (change)="onItemChange(item)"
                  />
                  <label class="custom-control-label">{{ item.name }}</label>
                </div>
              </a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- right part -->
  <div class="right-part bg-white">
    <div class="position-relative" style="height: 100%">
      <div
        class="d-md-flex align-items-center p-4 border-bottom mail-pagination"
      >
        <h4 class="card-title mb-0">Jobs</h4>
        <div class="ml-auto mt-3 mt-md-0">
          <ngb-pagination
            [(page)]="page"
            [pageSize]="pageSize"
            [collectionSize]="filjobs.length"
          >
          </ngb-pagination>
        </div>
      </div>
      <!-- listing of jobs -->
      <div
        class="position-relative"
        style="height: calc(100vh - 260px)"
        [perfectScrollbar]="config"
      >
        <div
          *ngFor="
            let job of filjobs
              | slice: (page - 1) * pageSize:(page - 1) * pageSize + pageSize
          "
        >
          <div class="card border-bottom">
            <div class="card-body">
              <div *ngIf="job.featured">
                <button
                  class="btn btn-circle btn-warning featured-btn d-flex align-items-center justify-content-center"
                >
                  <i class="mdi mdi-star font-18"></i>
                </button>
              </div>
              <div class="row">
                <div
                  class="col-md-2 col-xl-1 col-4 mb-3 mb-md-0 d-flex align-items-center justify-content-start"
                >
                  <img
                    [src]="job.image"
                    alt="pic"
                    class="img-fluid rounded-lg"
                  />
                </div>
                <div class="col-md-10 col-xl-11">
                  <a
                    [routerLink]="['/apps/job-detail/', job.id]"
                    class="card-title font-16"
                  >
                    {{ job.title }}
                  </a>
                  <p class="mb-0">{{ job.location }}</p>
                  <p>
                    <span
                      *ngIf="job.jobType === 'Full time'"
                      class="badge badge-danger px-2 font-medium"
                      ><i class="fas fa-circle font-10 mr-1"></i>Full time</span
                    >
                    <span
                      *ngIf="job.jobType === 'Part time'"
                      class="badge badge-success px-2 font-medium"
                      ><i class="fas fa-circle font-10 mr-1"></i>Part time</span
                    >
                    <span
                      *ngIf="job.jobType === 'Internship'"
                      class="badge badge-primary px-2 font-medium"
                      ><i class="fas fa-circle font-10 mr-1"></i
                      >Internship</span
                    >
                  </p>

                  {{ job.description }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #AddJobItem let-modal>
  <div class="modal-header">
    <h5 class="modal-title">Add Jobs</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]="jobAdd" (ngSubmit)="onSubmit()">
      <div class="form-group row">
        <label for="name" class="col-sm-4 col-form-label">Job Image</label>
        <div class="col-sm-8">
          <input
            type="file"
            style="display: none"
            (change)="preview(filevar.files)"
            #filevar
          />
          <img
            [src]="selectedImage"
            class="rounded-circle image cursor-pointer"
            alt=""
            height="100px"
            width="100px"
            (click)="filevar.click()"
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Job Title</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" formControlName="Title" />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Job Loction</label>
        <div class="col-sm-8">
          <select class="form-control" formControlName="Location">
            <option value="" disabled>Choose location</option>
            <option *ngFor="let loc of location" [ngValue]="loc">
              {{ loc }}
            </option>
          </select>

          <!-- <input type="text" class="form-control" formControlName="Location"> -->
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Description</label>
        <div class="col-sm-8">
          <input
            type="email"
            class="form-control"
            formControlName="Description"
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Qualification</label>
        <div class="col-sm-8">
          <textarea
            class="form-control"
            formControlName="Qualification"
            rows="4"
            cols="50"
          >
          </textarea>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Job Type</label>
        <div class="col-sm-8">
          <select class="form-control" formControlName="JobType">
            <option value="" disabled>Choose type of job</option>
            <option *ngFor="let jt of jobtype" [ngValue]="jt">{{ jt }}</option>
          </select>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Job In</label>
        <div class="col-sm-8">
          <select class="form-control" formControlName="Nature">
            <option value="" disabled>Choose job in</option>
            <option *ngFor="let ji of jobin" [ngValue]="ji">{{ ji }}</option>
          </select>

          <!-- <input type="text" class="form-control" formControlName="Nature"> -->
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Job Icon</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" formControlName="Icon" />
        </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]="jobAdd.invalid"
        >
          Save
        </button>
      </div>
    </form>
  </div>
</ng-template>