<!--
<div class="surface-200 h-full">
  <div class="wrapper">
    <div class="grid">
      @for (listing of listings; track listing.id) {
      <div class="col-12 xl:col-4 flex">
        <div class="surface-card p-2 flex flex-column flex-grow-1 justify-content-between" style="border-radius: 10px">
          <article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
            <div class="relative">
              @if (listing.imageOrder?.length>0){
              <img
                src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}"
                alt="Image"
                class="border-round w-full h-full md:w-12rem md:h-9rem"
              />
              } @else {
              <img src="assets/images/placeholder_properties.jpg" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem" />
              }
              <p class="absolute px-2 py-1 border-round-lg text-sm font-normal text-white mt-0 mb-0" style="background-color: rgba(255, 255, 255, 0.3); backdrop-filter: invert(30%); top: 3%; left: 3%">
                {{ selectOptions.getState(listing.state) }}
              </p>
            </div>
            <div class="flex flex-column w-full gap-3">
              <div class="flex w-full justify-content-between align-items-center flex-wrap gap-3">
                <p class="font-semibold text-lg mt-0 mb-0">{{ listing.title }}</p>
              </div>
              <p class="font-normal text-lg text-600 mt-0 mb-0">{{ listing.city }}</p>
              <div class="flex flex-wrap justify-content-between xl:h-2rem mt-auto">
                <p class="text-base flex align-items-center text-900 mt-0 mb-1">
                  <i class="pi pi-list mr-2"></i>
                  <span class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</span>
                </p>
              </div>
              <p class="font-semibold text-3xl text-900 mt-0 mb-2">{{ listing.price | currency }}</p>
            </div>
          </article>
          <div class="px-4 py-3 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-commercial-property-listing', listing.id]"
            ></button>
          </div>
        </div>
      </div>

      }
    </div>
  </div>
</div> -->
<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">
    <!-- Property Card 1 -->
    @for (listing of listings; track listing.id) {
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      @if (listing.imageOrder?.length>0){
      <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}" alt="Image" class="w-full h-48 object-cover" />
      } @else {
      <img src="assets/images/placeholder_properties.jpg" alt="Image" class="w-full h-48 object-cover" />
      }
      <div class="p-4">
        <div class="flex items-center justify-between mb-2">
          <span class="bg-gray-200 text-gray-700 text-xs font-semibold px-2 py-1 rounded">{{ selectOptions.getState(listing.state) }}</span>
          <span class="text-gray-600 text-sm"><i [class]="selectOptions.getIconTypeOfCommercials(listing.type)" class="mr-1"></i> {{ selectOptions.getCommercialProperty(listing.type) }}</span>
        </div>
        <h3 class="text-lg font-semibold mb-2">{{ listing.title }}</h3>
        <p class="text-gray-600 mb-2">{{ listing.city }}</p>
        <p class="text-xl font-bold mb-4">{{ listing.price | currency }}</p>
        <button [routerLink]="['/details-commercial-property-listing', listing.id]" class="bg-green-500 text-white px-4 py-2 rounded-full w-full hover:bg-green-600 transition duration-300">
          View Full Listing <i class="fas fa-arrow-right ml-1"></i>
        </button>
      </div>
    </div>
    }
  </div>
</div>
@if(pageCount>1){
<app-paginator [page]="page" [pageCount]="pageCount" (pageChange)="onPageChange($event)"></app-paginator>
}
