{% 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">
                    &laquo; 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 &raquo;
                </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 %}