From 1534c14a68203fbd3ae2d50aeb499f6b92b87d3c Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Thu, 4 Jul 2024 20:43:07 +0200
Subject: [PATCH] Umbau broker listing

---
 .../broker-listings.component.html            | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
index f479ec0..581f413 100644
--- a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
+++ b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
@@ -61,3 +61,37 @@
     </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">
+          View Full profile
+          <i class="fas fa-arrow-right ml-2"></i>
+        </button>
+      </div>
+    </div>
+    }
+  </div>
+</div>