<div
  *ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'businessListings'"
  class="fixed inset-0 bg-neutral-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50"
>
  <div class="relative w-full max-h-full">
    <div class="relative bg-white rounded-lg shadow">
      <div class="flex items-start justify-between p-4 border-b rounded-t bg-primary-600">
        <h3 class="text-xl font-semibold text-white p-2 rounded">Business Listing Search</h3>
        <button (click)="closeAndSearch()" type="button" class="text-white bg-transparent hover:bg-neutral-200 hover:text-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
          </svg>
          <span class="sr-only">Close Modal</span>
        </button>
      </div>
      <div class="p-6 space-y-6">
        <div class="flex space-x-4 mb-4">
          <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
          <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
            Clear all Filter
            <div class="tooltip-arrow" data-popper-arrow></div>
          </div>
        </div>
        <!-- Display active filters as tags -->
        <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
          <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            State: {{ criteria.state }} <button (click)="removeFilter('state')" aria-label="Remove state filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" aria-label="Remove city filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" aria-label="Remove price filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" aria-label="Remove revenue filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" aria-label="Remove cashflow filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Title: {{ criteria.title }} <button (click)="removeFilter('title')" aria-label="Remove title filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" aria-label="Remove categories filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" aria-label="Remove property type filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" aria-label="Remove employees filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.establishedMin" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" aria-label="Remove established filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" aria-label="Remove broker filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
        </div>
        <div class="grid grid-cols-1 gap-6">
          <div class="space-y-4">
            <div>
              <label for="state-select" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
              <ng-select id="state-select" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state" aria-label="Location - State"></ng-select>
            </div>
            <div>
              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
            </div>
            <div *ngIf="criteria.city">
              <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
              <div class="flex items-center space-x-4">
                <label class="inline-flex items-center">
                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
                  <span class="ml-2">Exact City</span>
                </label>
                <label class="inline-flex items-center">
                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
                  <span class="ml-2">Radius Search</span>
                </label>
              </div>
            </div>
            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
              <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
              <div class="flex flex-wrap">
                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
                <button
                  type="button"
                  class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-neutral-500 hover:text-white"
                  [ngClass]="criteria.radius === radius ? 'text-white bg-neutral-500' : 'text-neutral-900 bg-white'"
                  (click)="setRadius(radius)"
                >
                  {{ radius }}
                </button>
                }
              </div>
            </div>
            <div>
              <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
              <div class="flex items-center space-x-2">
                <app-validated-price name="price-from" [ngModel]="criteria.minPrice" (ngModelChange)="updateCriteria({ minPrice: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
                </app-validated-price>
                <span>-</span>
                <app-validated-price name="price-to" [ngModel]="criteria.maxPrice" (ngModelChange)="updateCriteria({ maxPrice: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
                </app-validated-price>
              </div>
            </div>
            <div>
              <label for="salesRevenue" class="block mb-2 text-sm font-medium text-neutral-900">Sales Revenue</label>
              <div class="flex items-center space-x-2">
                <app-validated-price name="salesRevenue-from" [ngModel]="criteria.minRevenue" (ngModelChange)="updateCriteria({ minRevenue: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
                </app-validated-price>
                <span>-</span>
                <app-validated-price name="salesRevenue-to" [ngModel]="criteria.maxRevenue" (ngModelChange)="updateCriteria({ maxRevenue: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p.2.5">
                </app-validated-price>
              </div>
            </div>
            <div>
              <label for="cashflow" class="block mb-2 text-sm font-medium text-neutral-900">Cashflow</label>
              <div class="flex items-center space-x-2">
                <app-validated-price name="cashflow-from" [ngModel]="criteria.minCashFlow" (ngModelChange)="updateCriteria({ minCashFlow: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
                </app-validated-price>
                <span>-</span>
                <app-validated-price name="cashflow-to" [ngModel]="criteria.maxCashFlow" (ngModelChange)="updateCriteria({ maxCashFlow: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
                </app-validated-price>
              </div>
            </div>
            <div>
              <label for="title" class="block mb-2 text-sm font-medium text-neutral-900">Title / Description (Free Search)</label>
              <input
                type="text"
                id="title"
                [ngModel]="criteria.title"
                (ngModelChange)="updateCriteria({ title: $event })"
                class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
                placeholder="e.g. Restaurant"
              />
            </div>
            <div>
              <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
              <ng-select
                class="custom"
                [items]="selectOptions.typesOfBusiness"
                bindLabel="name"
                bindValue="value"
                [ngModel]="criteria.types"
                (ngModelChange)="onCategoryChange($event)"
                [multiple]="true"
                [closeOnSelect]="true"
                placeholder="Select categories"
                aria-label="Category"
              ></ng-select>
            </div>
            <div>
              <label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
              <ng-select
                class="custom"
                [items]="propertyTypeOptions"
                bindLabel="name"
                bindValue="value"
                [ngModel]="selectedPropertyType"
                (ngModelChange)="onPropertyTypeChange($event)"
                placeholder="Select property type"
                aria-label="Type of Property"
              ></ng-select>
            </div>
            <div>
              <label for="numberEmployees" class="block mb-2 text-sm font-medium text-neutral-900">Number of Employees</label>
              <div class="flex items-center space-x-2">
                <input
                  type="number"
                  id="numberEmployees-from"
                  [ngModel]="criteria.minNumberEmployees"
                  (ngModelChange)="updateCriteria({ minNumberEmployees: $event })"
                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
                  placeholder="From"
                />
                <span>-</span>
                <input
                  type="number"
                  id="numberEmployees-to"
                  [ngModel]="criteria.maxNumberEmployees"
                  (ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
                  placeholder="To"
                />
              </div>
            </div>
            <div>
              <label for="establishedMin" class="block mb-2 text-sm font-medium text-neutral-900">Minimum years established</label>
              <div class="flex items-center space-x-2">
                <input
                  type="number"
                  id="establishedMin"
                  [ngModel]="criteria.establishedMin"
                  (ngModelChange)="updateCriteria({ establishedMin: $event })"
                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
                  placeholder="YY"
                />
              </div>
            </div>
            <div>
              <label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
              <input
                type="text"
                id="brokername"
                [ngModel]="criteria.brokerName"
                (ngModelChange)="updateCriteria({ brokerName: $event })"
                class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
                placeholder="e.g. Brokers Invest"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- ################################################################################## -->
<!-- ################################################################################## -->
<!-- ################################################################################## -->
<div *ngIf="!isModal" class="space-y-6">
  <div class="flex space-x-4 mb-4">
    <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
    <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
      Clear all Filter
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
  </div>
  <!-- Display active filters as tags -->
  <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
    <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      State: {{ criteria.state }} <button (click)="removeFilter('state')" aria-label="Remove state filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" aria-label="Remove city filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" aria-label="Remove price filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" aria-label="Remove revenue filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" aria-label="Remove cashflow filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Title: {{ criteria.title }} <button (click)="removeFilter('title')" aria-label="Remove title filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" aria-label="Remove categories filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" aria-label="Remove property type filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" aria-label="Remove employees filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.establishedMin" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Years established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" aria-label="Remove established filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" aria-label="Remove broker filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
  </div>
  @if(criteria.criteriaType==='businessListings') {
  <div class="space-y-4">
    <div>
      <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
      <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
    </div>
    <div>
      <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
    </div>
    <div *ngIf="criteria.city">
      <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
      <div class="flex items-center space-x-4">
        <label class="inline-flex items-center">
          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
          <span class="ml-2">Exact City</span>
        </label>
        <label class="inline-flex items-center">
          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
          <span class="ml-2">Radius Search</span>
        </label>
      </div>
    </div>
    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
      <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
      <div class="flex flex-wrap">
        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
        <button
          type="button"
          class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-neutral-500 hover:text-white"
          [ngClass]="criteria.radius === radius ? 'text-white bg-neutral-500' : 'text-neutral-900 bg-white'"
          (click)="setRadius(radius)"
        >
          {{ radius }}
        </button>
        }
      </div>
    </div>
    <div>
      <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
      <div class="flex items-center space-x-2">
        <app-validated-price name="price-from" [ngModel]="criteria.minPrice" (ngModelChange)="updateCriteria({ minPrice: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5"> </app-validated-price>
        <span>-</span>
        <app-validated-price name="price-to" [ngModel]="criteria.maxPrice" (ngModelChange)="updateCriteria({ maxPrice: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5"> </app-validated-price>
      </div>
    </div>
    <div>
      <label for="salesRevenue" class="block mb-2 text-sm font-medium text-neutral-900">Sales Revenue</label>
      <div class="flex items-center space-x-2">
        <app-validated-price name="salesRevenue-from" [ngModel]="criteria.minRevenue" (ngModelChange)="updateCriteria({ minRevenue: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
        </app-validated-price>
        <span>-</span>
        <app-validated-price name="salesRevenue-to" [ngModel]="criteria.maxRevenue" (ngModelChange)="updateCriteria({ maxRevenue: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p.2.5">
        </app-validated-price>
      </div>
    </div>
    <div>
      <label for="cashflow" class="block mb-2 text-sm font-medium text-neutral-900">Cashflow</label>
      <div class="flex items-center space-x-2">
        <app-validated-price name="cashflow-from" [ngModel]="criteria.minCashFlow" (ngModelChange)="updateCriteria({ minCashFlow: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
        </app-validated-price>
        <span>-</span>
        <app-validated-price name="cashflow-to" [ngModel]="criteria.maxCashFlow" (ngModelChange)="updateCriteria({ maxCashFlow: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
        </app-validated-price>
      </div>
    </div>
    <div>
      <label for="title" class="block mb-2 text-sm font-medium text-neutral-900">Title / Description (Free Search)</label>
      <input
        type="text"
        id="title"
        [ngModel]="criteria.title"
        (ngModelChange)="updateCriteria({ title: $event })"
        class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
        placeholder="e.g. Restaurant"
      />
    </div>
    <div>
      <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
      <ng-select
        class="custom"
        [items]="selectOptions.typesOfBusiness"
        bindLabel="name"
        bindValue="value"
        [ngModel]="criteria.types"
        (ngModelChange)="onCategoryChange($event)"
        [multiple]="true"
        [closeOnSelect]="true"
        placeholder="Select categories"
      ></ng-select>
    </div>
    <div>
      <label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
      <ng-select
        class="custom"
        [items]="propertyTypeOptions"
        bindLabel="name"
        bindValue="value"
        [ngModel]="selectedPropertyType"
        (ngModelChange)="onPropertyTypeChange($event)"
        placeholder="Select property type"
      ></ng-select>
    </div>
    <div>
      <label for="numberEmployees" class="block mb-2 text-sm font-medium text-neutral-900">Number of Employees</label>
      <div class="flex items-center space-x-2">
        <input
          type="number"
          id="numberEmployees-from"
          [ngModel]="criteria.minNumberEmployees"
          (ngModelChange)="updateCriteria({ minNumberEmployees: $event })"
          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
          placeholder="From"
        />
        <span>-</span>
        <input
          type="number"
          id="numberEmployees-to"
          [ngModel]="criteria.maxNumberEmployees"
          (ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
          placeholder="To"
        />
      </div>
    </div>
    <div>
      <label for="establishedMin" class="block mb-2 text-sm font-medium text-neutral-900">Minimum years established</label>
      <div class="flex items-center space-x-2">
        <input
          type="number"
          id="establishedMin"
          [ngModel]="criteria.establishedMin"
          (ngModelChange)="updateCriteria({ establishedMin: $event })"
          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
          placeholder="YY"
        />
      </div>
    </div>
    <div>
      <label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
      <input
        type="text"
        id="brokername"
        [ngModel]="criteria.brokerName"
        (ngModelChange)="updateCriteria({ brokerName: $event })"
        class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
        placeholder="e.g. Brokers Invest"
      />
    </div>
  </div>
  }
</div>
