<!-- <div id="sky-line" class="hidden-lg-down"></div>
<div class="search">
  <div class="wrapper">
    <div class="grid p-4 align-items-center">
      <div class="col-2">
        <p-dropdown [filter]="true" filterBy="name" [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '100%' }">
          <ng-template let-state pTemplate="item">
            <div class="flex align-items-center gap-2">
              <div>{{ state.name }} ({{ state.count }})</div>
            </div>
          </ng-template>
        </p-dropdown>
      </div>
      <div class="col-2">
        <p-dropdown
          [filter]="true"
          filterBy="name"
          [options]="selectOptions.typesOfBusiness"
          [(ngModel)]="criteria.type"
          optionLabel="name"
          optionValue="value"
          [showClear]="true"
          placeholder="Categorie of Business"
          [style]="{ width: '100%' }"
        ></p-dropdown>
      </div>
      <div class="col-2">
        <p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Min Price" [style]="{ width: '100%' }"></p-dropdown>
      </div>
      <div class="col-2">
        <p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Max Price" [style]="{ width: '100%' }"></p-dropdown>
      </div>
      <div class="col-2">
        <p-inputGroup>
          <input id="name" type="text" pInputText [(ngModel)]="criteria.title" placeholder="Title" />
          <button type="button" pButton icon="pi pi-times" class="p-button-secondary" (click)="reset()"></button>
        </p-inputGroup>
      </div>
      <div class="col-1" pTooltip="Real Estate excluded/included" tooltipPosition="top">
        <p-toggleButton [(ngModel)]="criteria.realEstateChecked" onLabel="RE incl." offLabel="RE excl."></p-toggleButton>
      </div>
      <div class="col-1">
        <p-button label="Refine" (click)="refine()"></p-button>
      </div>
    </div>
  </div>
</div>
<div class="surface-200 h-full">
  <div class="wrapper">
    <div class="grid">
      @for (listing of listings; track listing.id) {
      <div class="col-12 lg:col-3 p-3">
        <div class="shadow-2 border-round surface-card h-full flex-column justify-content-between flex">
          <div class="p-4 flex flex-column relative h-full">
            <div class="flex align-items-center">
              <span [class]="selectOptions.getBgColorType(listing.type)" class="inline-flex border-circle align-items-center justify-content-center mr-3" style="width: 38px; height: 38px">
                <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
              </span>
              <span class="text-900 font-medium text-2xl">{{ selectOptions.getBusiness(listing.type) }}</span>
            </div>
            <div class="text-900 my-3 text-xl font-medium">{{ listing.title }}</div>
            <p class="mt-0 mb-1 text-700 line-height-3">Asking price: {{ listing.price | currency }}</p>
            <p class="mt-0 mb-1 text-700 line-height-3">Sales revenue: {{ listing.salesRevenue | currency }}</p>
            <p class="mt-0 mb-1 text-700 line-height-3">Net profit: {{ listing.cashFlow | currency }}</p>
            <p class="mt-0 mb-1 text-700 line-height-3">Location: {{ selectOptions.getState(listing.state) }}</p>
            <p class="mt-0 mb-1 text-700 line-height-3">Established: {{ listing.established }}</p>
            <div class="icon-pos">
              <a routerLink="/details-user/{{ listing.userId }}" class="mr-2"
                ><img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" (error)="imageErrorHandler(listing)" class="rounded-image"
              /></a>
            </div>
          </div>
          <div class="px-4 py-3 surface-100 text-left">
            <button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full Listing" class="p-button-rounded p-button-success" [routerLink]="['/details-business-listing', listing.id]"></button>
          </div>
        </div>
      </div>
      }
    </div>
    <div class="mb-2 surface-200 flex align-items-center justify-content-center paginator-bar">
      <div class="mx-1 text-color">Total number of Listings: {{ totalRecords }}</div>
      <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
    </div>
  </div>
</div> -->
<!-- business-listing.component.html -->
<!-- <div class="w-full bg-slate-100"> -->

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    @for (listing of listings; track listing.id) {
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <div class="p-4 flex flex-col h-full relative z-[0]">
        <div class="flex items-center mb-2">
          <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2"></i>
          <span [class]="selectOptions.getTextColorType(listing.type)" class="font-semibold">{{ selectOptions.getBusiness(listing.type) }}</span>
        </div>
        <h2 class="text-lg font-semibold mb-2">{{ listing.title }}</h2>
        <p class="text-sm text-gray-600 mb-1">Asking price: {{ listing.price | currency }}</p>
        <p class="text-sm text-gray-600 mb-1">Sales revenue: {{ listing.salesRevenue | currency }}</p>
        <p class="text-sm text-gray-600 mb-1">Net profit: {{ listing.cashFlow | currency }}</p>
        <p class="text-sm text-gray-600 mb-1">Location: {{ listing.city }} - {{ selectOptions.getState(listing.state) }}</p>
        <p class="text-sm text-gray-600 mb-1">Established: {{ listing.established }}</p>
        <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" alt="Company logo" class="absolute bottom-[70px] right-[30px] h-[35px] w-auto" />
        <div class="flex-grow"></div>
        <button class="bg-green-500 text-white px-4 py-2 rounded-md w-full flex items-center justify-center mt-2" [routerLink]="['/details-business-listing', listing.id]">
          View Full Listing
          <i class="fas fa-arrow-right ml-2"></i>
        </button>
      </div>
    </div>
    }
  </div>
</div>
@if(pageCount>1){
<app-paginator [page]="page" [pageCount]="pageCount" (pageChange)="onPageChange($event)"></app-paginator>
}

<!-- <div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @for (listing of listings; track listing.id) {
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <div class="p-4">
        <h3 class="text-lg font-semibold mb-2">{{ listing.title }}</h3>
      </div>
    </div>
    }
  </div>
</div> -->

<!-- </div> -->
