<!-- <div class="surface-ground h-full">
  <div class="px-6 py-5">
    @if (user){
    <div class="surface-card p-4 shadow-2 border-round">
      <div class="surface-section px-6 pt-5">
        <div class="flex align-items-start flex-column lg:flex-row lg:justify-content-between">
          <div class="flex align-items-start flex-column md:flex-row">
            @if(user.hasProfile){
            <img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
            } @else {
            <img src="assets/images/person_placeholder.jpg" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
            }
            <div>
              <span class="text-900 font-medium text-3xl">{{ user.firstname }} {{ user.lastname }}</span>
              <i class="pi pi-star text-2xl ml-4 text-yellow-500"></i>
              <div class="flex align-items-center flex-wrap text-sm">
                <div class="mr-5 mt-3">
                  <span class="font-medium text-500">Company</span>
                  <div class="text-700 mt-2">{{ user.companyName }}</div>
                </div>
                <div class="mr-5 mt-3">
                  <span class="font-medium text-500">For Sale</span>
                  <div class="text-700 mt-2">{{ businessListings?.length + commercialPropListings?.length }}</div>
                </div>
                <div class="flex align-items-center mt-3">
                  <div>
                    @if(user.hasCompanyLogo){
                    <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 60px; max-width: 100px" />
                    }
                  </div>
                </div>
              </div>
            </div>
          </div>
          @if(historyService.canGoBack){
          <p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="historyService.goBack()"></p-button>
          }
        </div>
        <p class="mt-2 text-700 line-height-3 text-l font-semibold">{{ user.description }}</p>
      </div>
      <div class="px-6 py-5">
        <div class="surface-card p-4 shadow-2 border-round">
          <div class="font-medium text-3xl text-900 mb-3">Company Profile</div>
          <div class="text-500 mb-5" [innerHTML]="companyOverview"></div>
          <ul class="list-none p-0 m-0 border-top-1 border-300">
            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
              <div class="text-500 w-full md:w-2 font-medium">Name</div>
              <div class="text-900 w-full md:w-10">{{ user.firstname }} {{ user.lastname }}</div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap">
              <div class="text-500 w-full md:w-2 font-medium">Phone Number</div>
              <div class="text-900 w-full md:w-10 line-height-3">{{ formatPhoneNumber(user.phoneNumber) }}</div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
              <div class="text-500 w-full md:w-2 font-medium">EMail Address</div>
              <div class="text-900 w-full md:w-10 line-height-3">{{ user.email }}</div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap">
              <div class="text-500 w-full md:w-2 font-medium">Company Location</div>
              <div class="text-900 w-full md:w-10 line-height-3">{{ user.companyLocation }}</div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
              <div class="text-500 w-full md:w-2 font-medium">Services we offer</div>
              <div class="text-900 w-full md:w-10" [innerHTML]="offeredServices"></div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap">
              <div class="text-500 w-full md:w-2 font-medium">Areas (Counties) we serve</div>
              <div class="text-900 w-full md:w-10">
                @for (area of user.areasServed; track area) {
                <p-tag styleClass="mr-2" value="{{ area.county }}-{{ area.state }}" [rounded]="true"></p-tag>
                }
              </div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap">
              <div class="text-500 w-full md:w-2 font-medium">Licensed In</div>
              <div class="text-900 w-full md:w-10">
                @for (license of user.licensedIn; track license) {
                <p-tag styleClass="mr-2" value="{{ license.registerNo }}-{{ license.state }}" [rounded]="true" severity="success"></p-tag>
                }
              </div>
            </li>
            @if(businessListings?.length>0){
            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
              <div class="text-500 w-full md:w-2 font-medium">My Business Listings For Sale</div>
              <div class="text-900 w-full md:w-10">
                <div class="grid mt-0 mr-0">
                  @for (listing of businessListings; track listing) {
                  <div class="col-12 md:col-6 cursor-pointer" [routerLink]="['/details-business-listing', listing.id]">
                    <div class="p-3 border-1 surface-border border-round surface-card">
                      <div class="text-900 mb-2">
                        <span 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="font-medium">{{ selectOptions.getBusiness(listing.type) }}</span>
                      </div>
                      <div class="text-700">{{ listing.title }}</div>
                    </div>
                  </div>
                  }
                </div>
              </div>
            </li>
            } @if(commercialPropListings?.length>0){
            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
              <div class="text-500 w-full md:w-2 font-medium">My Commercial Property Listings For Sale</div>
              <div class="text-900 w-full md:w-10">
                <div class="grid mt-0 mr-0">
                  @for (listing of commercialPropListings; track listing) {
                  <div class="col-12 md:col-6 cursor-pointer" [routerLink]="['/details-commercial-property-listing', listing.id]">
                    <div class="p-3 border-1 surface-border border-round surface-card">
                      <div class="text-900 mb-2 flex align-items-center">
                        @if (listing.imageOrder?.length>0){
                        <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" class="mr-3" style="width: 45px; height: 45px" />
                        } @else {
                        <img src="assets/images/placeholder_properties.jpg" class="mr-3" style="width: 45px; height: 45px" />
                        }
                        <span class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</span>
                      </div>
                      <div class="text-700">{{ listing.title }}</div>
                    </div>
                  </div>
                  }
                </div>
              </div>
            </li>
            }
          </ul>
        </div>
      </div>
      @if( user?.email===keycloakUser?.email || isAdmin()){
      <button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/account', user.id]"></button>
      }
    </div>
    }
  </div>
</div> -->
<div class="container mx-auto p-4">
  @if(user){
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
    <!-- Header -->
    <div class="flex items-center justify-between p-4 border-b">
      <div class="flex items-center space-x-4">
        <!-- <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" /> -->
        @if(user.hasProfile){
        <img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-20 h-20 rounded-full object-cover" />
        } @else {
        <img src="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" />
        }
        <div>
          <h1 class="text-2xl font-bold flex items-center">
            {{ user.firstname }} {{ user.lastname }}
            <span class="text-yellow-400 ml-2">&#9733;</span>
          </h1>
          <p class="text-gray-600">
            Company
            <span class="mx-1">-</span>
            {{ user.companyName }}
            <span class="mx-2">|</span>
            For Sale
            <span class="mx-1">-</span>
            <!-- <i class="fas fa-building text-red-500"></i> -->
            <span>{{ businessListings?.length + commercialPropListings?.length }}</span>
          </p>
        </div>
        @if(user.hasCompanyLogo){
        <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-11 h-14" />
        }
        <!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
      </div>
      <button class="text-red-500 text-2xl" (click)="historyService.goBack()">&times;</button>
    </div>

    <!-- Description -->
    <p class="p-4 text-gray-700">{{ user.description }}</p>

    <!-- Company Profile -->
    <div class="p-4">
      <h2 class="text-xl font-semibold mb-4">Company Profile</h2>
      <p class="text-gray-700 mb-4" [innerHTML]="companyOverview"></p>

      <!-- Profile Details -->
      <div class="space-y-2">
        <div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
          <span class="font-semibold w-40 p-2">Name</span>
          <span class="p-2 flex-grow">{{ user.firstname }} {{ user.lastname }}</span>
        </div>
        <div class="flex flex-col sm:flex-row sm:items-center">
          <span class="font-semibold w-40 p-2">Phone Number</span>
          <span class="p-2 flex-grow">{{ formatPhoneNumber(user.phoneNumber) }}</span>
        </div>
        <div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
          <span class="font-semibold w-40 p-2">EMail Address</span>
          <span class="p-2 flex-grow">{{ user.email }}</span>
        </div>
        <div class="flex flex-col sm:flex-row sm:items-center">
          <span class="font-semibold w-40 p-2">Company Location</span>
          <span class="p-2 flex-grow">{{ user.companyLocation }}</span>
        </div>
      </div>

      <!-- Services -->
      <div class="mt-6">
        <h3 class="font-semibold mb-2">Services we offer</h3>
        <p class="text-gray-700 mb-4" [innerHTML]="offeredServices"></p>
      </div>

      <!-- Areas Served -->
      <div class="mt-6">
        <h3 class="font-semibold mb-2">Areas (Counties) we serve</h3>
        <div class="flex flex-wrap gap-2">
          @for (area of user.areasServed; track area) {
          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">{{ area.county }}-{{ area.state }}</span>
          }
        </div>
      </div>

      <!-- Licensed In -->
      <div class="mt-6">
        <h3 class="font-semibold mb-2">Licensed In</h3>
        @for (license of user.licensedIn; track license) {
        <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">{{ license.registerNo }}-{{ license.state }}</span>
        }
      </div>
    </div>

    <!-- Business Listings -->

    <div class="p-4">
      @if(businessListings?.length>0){
      <h2 class="text-xl font-semibold mb-4">My Business Listings For Sale</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        @for (listing of businessListings; track listing) {
        <div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/details-business-listing', listing.id]">
          <div class="flex items-center mb-2">
            <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2"></i>
            <span class="font-medium">{{ selectOptions.getBusiness(listing.type) }}</span>
          </div>
          <p class="text-gray-700">{{ listing.title }}</p>
        </div>
        }
      </div>
      }
      <!-- Commercial Property Listings -->
      @if(commercialPropListings?.length>0){
      <div class="p-4">
        <h2 class="text-xl font-semibold mb-4">My Commercial Property Listings For Sale</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          @for (listing of commercialPropListings; track listing) {
          <div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/details-commercial-property-listing', listing.id]">
            <div class="flex items-center space-x-4">
              @if (listing.imageOrder?.length>0){
              <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" class="w-12 h-12 object-cover rounded" />
              } @else {
              <img src="assets/images/placeholder_properties.jpg" class="w-12 h-12 object-cover rounded" />
              }
              <div>
                <p class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</p>
                <p class="text-gray-700">{{ listing.title }}</p>
              </div>
            </div>
          </div>
          }
        </div>
      </div>
      } @if( user?.email===keycloakUser?.email || isAdmin()){
      <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" [routerLink]="['/account', user.id]">Edit</button>
      }
    </div>
  </div>
  }
</div>
