{% extends 'base.html' %}
{% load humanize %}
{% block title %}Properties — {{ site.site_name }}{% endblock %}
{% block content %}
<section class="page-header">
  <div class="container">
    <h1>Properties</h1>
    <p>{{ total_results }} listing{{ total_results|pluralize }} found</p>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="row g-4">
      <aside class="col-lg-3">
        <form class="filter-card" method="get">
          <h6>Refine Search</h6>
          <div class="mb-3">
            <label class="form-label small">Search</label>
            <input type="text" name="q" value="{{ filters.q }}" class="form-control form-control-sm" placeholder="Keyword">
          </div>
          <div class="mb-3">
            <label class="form-label small">Category</label>
            <select name="category" class="form-select form-select-sm">
              <option value="">All</option>
              {% for c in categories %}<option value="{{ c.slug }}" {% if filters.category == c.slug %}selected{% endif %}>{{ c.name }}</option>{% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label small">Location</label>
            <select name="location" class="form-select form-select-sm">
              <option value="">All</option>
              {% for l in locations %}<option value="{{ l.slug }}" {% if filters.location == l.slug %}selected{% endif %}>{{ l.name }}, {{ l.state }}</option>{% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label small">Min Price (₦)</label>
            <input type="number" name="min_price" value="{{ filters.min_price }}" class="form-control form-control-sm" min="0">
          </div>
          <div class="mb-3">
            <label class="form-label small">Max Price (₦)</label>
            <input type="number" name="max_price" value="{{ filters.max_price }}" class="form-control form-control-sm" min="0">
          </div>
          <div class="mb-3">
            <label class="form-label small">Min Bedrooms</label>
            <select name="bedrooms" class="form-select form-select-sm">
              <option value="">Any</option>
              {% for n in "12345"|make_list %}<option value="{{ n }}" {% if filters.bedrooms == n %}selected{% endif %}>{{ n }}+</option>{% endfor %}
            </select>
          </div>
          <button class="btn btn-primary w-100">Apply Filters</button>
          <a href="{% url 'properties:list' %}" class="btn btn-link btn-sm w-100 mt-2">Clear Filters</a>
        </form>
      </aside>

      <div class="col-lg-9">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
          <div class="text-muted small">{{ total_results }} result{{ total_results|pluralize }}</div>
          <form method="get" class="d-flex align-items-center gap-2">
            {% for k, v in filters.items %}{% if v and k != 'sort' %}<input type="hidden" name="{{ k }}" value="{{ v }}">{% endif %}{% endfor %}
            <label class="small text-muted mb-0">Sort:</label>
            <select name="sort" onchange="this.form.submit()" class="form-select form-select-sm" style="width:auto;">
              <option value="-created_at" {% if filters.sort == '-created_at' %}selected{% endif %}>Newest</option>
              <option value="created_at" {% if filters.sort == 'created_at' %}selected{% endif %}>Oldest</option>
              <option value="price" {% if filters.sort == 'price' %}selected{% endif %}>Price: Low to High</option>
              <option value="-price" {% if filters.sort == '-price' %}selected{% endif %}>Price: High to Low</option>
              <option value="-views_count" {% if filters.sort == '-views_count' %}selected{% endif %}>Most Viewed</option>
            </select>
          </form>
        </div>

        {% if page_obj.object_list %}
        <div class="row g-4">
          {% for property in page_obj.object_list %}
            <div class="col-md-6 col-xl-4">{% include 'partials/property_card.html' %}</div>
          {% endfor %}
        </div>

        {% if page_obj.has_other_pages %}
        <nav class="mt-5">
          <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for k,v in filters.items %}{% if v %}&{{k}}={{v}}{% endif %}{% endfor %}">Previous</a></li>{% endif %}
            {% for n in page_obj.paginator.page_range %}
              {% if n == page_obj.number %}<li class="page-item active"><span class="page-link">{{ n }}</span></li>
              {% elif n > page_obj.number|add:-3 and n < page_obj.number|add:3 %}<li class="page-item"><a class="page-link" href="?page={{ n }}{% for k,v in filters.items %}{% if v %}&{{k}}={{v}}{% endif %}{% endfor %}">{{ n }}</a></li>{% endif %}
            {% endfor %}
            {% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}{% for k,v in filters.items %}{% if v %}&{{k}}={{v}}{% endif %}{% endfor %}">Next</a></li>{% endif %}
          </ul>
        </nav>
        {% endif %}
        {% else %}
        <div class="empty-state text-center py-5">
          <i class="bi bi-house-x display-1 text-muted"></i>
          <h4 class="mt-3">No properties match your filters</h4>
          <p class="text-muted">Try broadening your search or <a href="{% url 'properties:list' %}">view all properties</a>.</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>
{% endblock %}