34 lines
1.9 KiB
HTML
34 lines
1.9 KiB
HTML
<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">
|
|
@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.location.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 }}
|
|
@if(listing.draft){
|
|
<span class="bg-red-100 text-red-800 text-sm font-medium me-2 ml-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Draft</span>
|
|
}
|
|
</h3>
|
|
<p class="text-gray-600 mb-2">{{ listing.location.name }}</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>
|
|
}
|