137 lines
7.2 KiB
HTML
137 lines
7.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Browse Properties - NexHome{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 py-10">
|
|
<h1 class="text-3xl font-bold text-primary mb-8">Browse Properties</h1>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-8">
|
|
<!-- Filter Sidebar -->
|
|
<aside class="w-full lg:w-72 flex-shrink-0">
|
|
<form action="/properties" method="GET" class="bg-white rounded-2xl shadow-md p-6 space-y-5 sticky top-4">
|
|
<h3 class="font-semibold text-primary text-lg border-b pb-3">Filters</h3>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Search</label>
|
|
<input type="text" name="search" value="{{ search|default('') }}"
|
|
placeholder="City, state, zip..."
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-accent outline-none">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Property Type</label>
|
|
<select name="type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-accent outline-none">
|
|
<option value="">All Types</option>
|
|
<option value="house" {% if prop_type == 'house' %}selected{% endif %}>House</option>
|
|
<option value="condo" {% if prop_type == 'condo' %}selected{% endif %}>Condo</option>
|
|
<option value="townhouse" {% if prop_type == 'townhouse' %}selected{% endif %}>Townhouse</option>
|
|
<option value="land" {% if prop_type == 'land' %}selected{% endif %}>Land</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Price Range (USD)</label>
|
|
<div class="flex gap-2">
|
|
<input type="number" name="min_price" value="{{ min_price|default('') }}"
|
|
placeholder="Min" min="0"
|
|
class="w-1/2 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-accent outline-none">
|
|
<input type="number" name="max_price" value="{{ max_price|default('') }}"
|
|
placeholder="Max" min="0"
|
|
class="w-1/2 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-accent outline-none">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Bedrooms</label>
|
|
<select name="bedrooms" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-accent outline-none">
|
|
<option value="">Any</option>
|
|
<option value="1" {% if bedrooms == '1' %}selected{% endif %}>1+</option>
|
|
<option value="2" {% if bedrooms == '2' %}selected{% endif %}>2+</option>
|
|
<option value="3" {% if bedrooms == '3' %}selected{% endif %}>3+</option>
|
|
<option value="4" {% if bedrooms == '4' %}selected{% endif %}>4+</option>
|
|
<option value="5" {% if bedrooms == '5' %}selected{% endif %}>5+</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">City</label>
|
|
<input type="text" name="city" value="{{ city_filter|default('') }}"
|
|
placeholder="e.g. Austin"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-accent outline-none">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">State</label>
|
|
<input type="text" name="state" value="{{ state_filter|default('') }}"
|
|
placeholder="e.g. TX"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-accent outline-none">
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full bg-accent hover:bg-blue-700 text-white font-semibold py-2.5 rounded-lg transition text-sm">
|
|
Apply Filters
|
|
</button>
|
|
<a href="/properties" class="block text-center text-sm text-gray-500 hover:text-accent transition">
|
|
Clear all filters
|
|
</a>
|
|
</form>
|
|
</aside>
|
|
|
|
<!-- Property Grid -->
|
|
<div class="flex-1">
|
|
{% if properties %}
|
|
<div class="mb-4 text-sm text-gray-500">
|
|
Showing {{ properties|length }} propert{{ "y" if properties|length == 1 else "ies" }}
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
{% from "components/property_card.html" import property_card %}
|
|
{% for prop in properties %}
|
|
{{ property_card(prop) }}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if total_pages > 1 %}
|
|
<div class="flex justify-center items-center gap-2 mt-10">
|
|
{% if page > 1 %}
|
|
<a href="?{{ query_string }}&page={{ page - 1 }}"
|
|
class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition">
|
|
« Previous
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% for p in range(1, total_pages + 1) %}
|
|
{% if p == page %}
|
|
<span class="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium">{{ p }}</span>
|
|
{% else %}
|
|
<a href="?{{ query_string }}&page={{ p }}"
|
|
class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition">
|
|
{{ p }}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if page < total_pages %}
|
|
<a href="?{{ query_string }}&page={{ page + 1 }}"
|
|
class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition">
|
|
Next »
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<div class="text-center py-20 text-gray-400">
|
|
<svg class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
<p class="text-lg mb-2">No properties found</p>
|
|
<p class="text-sm">Try adjusting your filters or <a href="/properties" class="text-accent hover:underline">clear all filters</a>.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|