{% extends "base.html" %}
{% block title %}Propiedades — Casa Hunter FL{% endblock %}
{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="fw-bold mb-0" style="color:var(--primary)"><i class="fas fa-building me-2" style="color:var(--accent)"></i>Propiedades en Oportunidad</h4>
  <button class="btn btn-accent btn-sm" onclick="runScan()"><i class="fas fa-sync me-1"></i>Actualizar</button>
</div>

<!-- Filters -->
<div class="card mb-4">
  <div class="card-body py-2">
    <form method="get" class="row g-2 align-items-end">
      <div class="col-6 col-md-3">
        <label class="form-label small fw-bold mb-1">Ciudad</label>
        <input type="text" name="city" class="form-control form-control-sm" placeholder="Vero Beach..." value="{{ city_filter }}">
      </div>
      <div class="col-6 col-md-3">
        <label class="form-label small fw-bold mb-1">Fuente</label>
        <select name="source" class="form-select form-select-sm">
          <option value="">Todas</option>
          {% for s in sources %}<option value="{{ s }}" {% if s==current_source %}selected{% endif %}>{{ s }}</option>{% endfor %}
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small fw-bold mb-1">Score mín.</label>
        <select name="min_score" class="form-select form-select-sm">
          <option value="0">Todos</option>
          <option value="70">70+</option>
          <option value="80">80+</option>
          <option value="90">90+</option>
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small fw-bold mb-1">Ordenar</label>
        <select name="sort" class="form-select form-select-sm">
          <option value="score" {% if current_sort=='score' %}selected{% endif %}>Mejor score</option>
          <option value="price_asc" {% if current_sort=='price_asc' %}selected{% endif %}>Precio ↑</option>
          <option value="price_desc" {% if current_sort=='price_desc' %}selected{% endif %}>Precio ↓</option>
          <option value="newest" {% if current_sort=='newest' %}selected{% endif %}>Más reciente</option>
        </select>
      </div>
      <div class="col-6 col-md-1">
        <button type="submit" class="btn btn-primary btn-sm w-100"><i class="fas fa-filter"></i></button>
      </div>
      <div class="col-6 col-md-1">
        <a href="/properties?favorites=1" class="btn btn-outline-warning btn-sm w-100"><i class="fas fa-star"></i></a>
      </div>
    </form>
  </div>
</div>

{% if properties %}
<p class="text-muted small mb-3"><strong>{{ properties|length }}</strong> propiedades encontradas</p>
<div class="row g-3">
  {% for p in properties %}
  <div class="col-12 col-md-6 col-xl-4">
    <div class="card h-100 {% if p.is_favorite %}border-warning{% endif %}">
      {% if p.image_url %}
      <img src="{{ p.image_url }}" class="card-img-top" style="height:150px;object-fit:cover;border-radius:12px 12px 0 0" alt="">
      {% else %}
      <div style="height:80px;background:linear-gradient(135deg,#1a3a5c,#2d6a9f);border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:center">
        <i class="fas fa-home fa-2x text-white opacity-50"></i>
      </div>
      {% endif %}
      <div class="card-body">
        <div class="d-flex justify-content-between mb-2">
          <span class="source-tag">{{ p.source }}</span>
          <span class="score-badge {% if p.score >= 75 %}score-high{% elif p.score >= 50 %}score-mid{% else %}score-low{% endif %}">{{ p.score }}/100</span>
        </div>
        <div class="prop-price mb-1">${{ "{:,.0f}".format(p.price) }}</div>
        <p class="text-muted small mb-1">{{ p.address }}</p>
        <p class="text-muted small mb-2">{{ p.city }}{% if p.county %}, {{ p.county }}{% endif %}</p>
        <div class="d-flex gap-2 text-muted small mb-3">
          {% if p.beds %}<span><i class="fas fa-bed me-1"></i>{{ p.beds }}</span>{% endif %}
          {% if p.baths %}<span><i class="fas fa-bath me-1"></i>{{ p.baths }}</span>{% endif %}
          {% if p.sqft %}<span><i class="fas fa-ruler-combined me-1"></i>{{ p.sqft }}sf</span>{% endif %}
        </div>
        <div class="d-flex gap-1">
          <a href="/property/{{ p.id }}" class="btn btn-primary btn-sm flex-fill">Ver Detalle</a>
          {% if p.url %}<a href="{{ p.url }}" target="_blank" class="btn btn-outline-secondary btn-sm"><i class="fas fa-external-link-alt"></i></a>{% endif %}
          {% if p.is_favorite %}<span class="btn btn-warning btn-sm"><i class="fas fa-star"></i></span>{% endif %}
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="card text-center py-5">
  <div class="card-body">
    <i class="fas fa-search fa-3x mb-3" style="color:var(--accent)"></i>
    <h5>No hay propiedades</h5>
    <p class="text-muted">Haz clic en Buscar Ahora para encontrar oportunidades</p>
    <button class="btn btn-primary" onclick="runScan()"><i class="fas fa-sync me-2"></i>Buscar Ahora</button>
  </div>
</div>
{% endif %}
{% endblock %}