<div *ngIf="Type === 0">
  <div class="card-body border-secondary">
    <div class="form-group" *ngIf="Options.showSearchPanel">
      <div class="input-group">
        <input
          type="text"
          class="form-control"
          placeholder="Search...."
          [(ngModel)]="FilterOptions.term"
        />
        <div class="input-group-append">
          <button
            (click)="prepareSearchOptions()"
            class="btn btn-outline-secondary"
            type="button"
          >
            Go
          </button>
        </div>
      </div>
    </div>

    <!-- Checkbox List -->
    <div class="m-b-10" *ngIf="Options.filters.length > 0">
      <div
        class="form-check  p-l-0 p-r-0 m-b-5"
        *ngFor="let filter of Options.filters"
      >
        <label class="form-check-label">
          <input
            [(ngModel)]="filter.selected"
            (change)="prepareSearchOptions()"
            type="checkbox"
          />
          {{ filter.title }}
        </label>
      </div>
      <hr />
    </div>

    <!-- Radio Button List -->
    <div class="m-b-10" *ngIf="Options.checkFilters.length > 0">
      <div class="m-b-10" *ngFor="let filter of Options.checkFilters">
        <div class="m-b-10">
          <strong>{{ filter.caption }}</strong>
        </div>
        <div
          class="form-check p-l-0 p-r-0 m-b-5"
          *ngFor="let option of filter.options"
        >
          <label class="form-check-label">
            <input
              type="radio"
              value="{{ option.value }}"
              name="{{ filter.group }}"
              [checked]="filter.value == option.value"
              (change)="choose(filter, $event)"
            />
            {{ option.title }}
          </label>
        </div>
      </div>
      <hr />
    </div>

    <!-- categories -->
    <div class="m-b-10" *ngIf="Options.categories.length > 0">
      <label>Categories</label>
      <div
        class="form-check  p-l-0 p-r-0 m-b-5"
        *ngFor="let filter of Options.categories"
      >
        <label class="form-check-label">
          <input
            [(ngModel)]="filter.selected"
            (change)="prepareSearchOptions()"
            type="checkbox"
          />
          {{ filter.value }}
        </label>
      </div>
      <hr />
    </div>

    <!-- dropdown list -->
    <div *ngIf="Options.dropdownFilters.length > 0">
      <div *ngFor="let filter of Options.dropdownFilters">
        <div class="form-group">
          <label>{{ filter.caption }}</label>
          <select
            class="form-control form-control-line"
            [(ngModel)]="filter.value"
            (change)="prepareSearchOptions()"
          >
            <option
              [value]="option.value"
              *ngFor="let option of filter.options"
              >{{ option.title }}</option
            >
          </select>
        </div>
      </div>
    </div>
  </div>
</div>
<div *ngIf="Type === 1">
  <div class="m-b-10">
    <button (click)="togglerFilter()" class="btn btn-light">
      <i class="fa fa-bars" aria-hidden="true"></i> Filter
    </button>
  </div>
  <div class="m-b-10" *ngIf="showFilterOptions">
    <div class="row">
      <div class="col-md-3 col-sm-4" *ngFor="let option of Options.NavList">
        <div class="m-b-10">
          {{ option.title }}
        </div>
        <hr />
        <div class="vertical-menu">
          <a
            href="#"
            [ngClass]="option.value === nav.value ? 'active' : ''"
            (click)="selectOption(option, nav, $event); (false)"
            *ngFor="let nav of option.options"
            >{{ nav.title }}</a
          >
        </div>
      </div>
    </div>
  </div>
  <hr />
</div>
