<!-- <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="Location" [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-inputGroup>
          <input id="name" type="text" pInputText [(ngModel)]="criteria.name" placeholder="Name" />
          <button type="button" pButton icon="pi pi-times" class="p-button-secondary" (click)="reset()"></button>
        </p-inputGroup>
      </div>
      <div class="col-1 col-offset-7">
        <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 (user of users; track user) {
      <div class="col-12 lg:col-6 xl:col-4 p-4 flex flex-column">
        <div class="surface-card shadow-2 p-2 flex flex-column flex-grow-1 justify-content-between" style="border-radius: 10px">
          <div class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full">
            <span>
              @if(user.hasProfile){
              <img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-5rem" />
              } @else {
              <img src="assets/images/person_placeholder.jpg" class="w-5rem" />
              }
            </span>
            <div class="flex flex-column align-items-center md:align-items-stretch ml-4 mt-4 md:mt-0">
              <p class="mt-0 mb-3 line-height-3 text-center md:text-left">{{ user.description }}</p>
              <span class="text-900 font-medium mb-1 mt-auto">{{ user.firstname }} {{ user.lastname }}</span>
              <div class="text-600 text-sm">{{ user.companyName }}</div>
            </div>
          </div>
          <div class="px-4 py-3 text-right flex justify-content-between align-items-center">
            @if(user.hasCompanyLogo){
            <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-image" />
            } @else {
            <img src="assets/images/placeholder.png" class="rounded-image" />
            }
            <button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full profile" class="p-button-rounded p-button-success" [routerLink]="['/details-user', user.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 Professionals/Brokers: {{ totalRecords }}</div>
      <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
    </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">
    <!-- Amanda Taylor -->
    @for (user of users; track user) {
    <div class="bg-white rounded-lg shadow-md p-6 flex flex-col justify-between">
      <div class="flex items-start space-x-4">
        <!-- <img src="https://placehold.co/80x105" alt="Portrait of Amanda Taylor, a professional woman with long dark hair" class="rounded-md w-20 h-26 object-cover" /> -->
        @if(user.hasProfile){
        <img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-md w-20 h-26 object-cover" />
        } @else {
        <img src="assets/images/person_placeholder.jpg" class="rounded-md w-20 h-26 object-cover" />
        }
        <div class="flex-1">
          <p class="text-sm text-gray-800 mb-2">{{ user.description }}</p>
          <h3 class="text-lg font-semibold">{{ user.firstname }} {{ user.lastname }}</h3>
          <p class="text-sm text-gray-600">{{ user.companyName }}</p>
        </div>
      </div>
      <div class="mt-4 flex justify-between items-center">
        <!-- <img src="https://placehold.co/35x45" alt="Lone Star Business Brokers logo" class="w-8 h-10 object-contain" /> -->
        @if(user.hasCompanyLogo){
        <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-8 h-10 object-contain" />
        } @else {
        <img src="assets/images/placeholder.png" class="w-8 h-10 object-contain" />
        }
        <button class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-full flex items-center" [routerLink]="['/details-user', user.id]">
          View Full profile
          <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>
}
