{% extends "base.html" %}
{% load i18n static property_tags %}

{% block title %}{% trans "Biens immobiliers" %}{% endblock %}

{% block content %}

{# ── Hero ────────────────────────────────────────────────────────────────── #}
{% if properties.count == 1 %}
  {% with prop=properties.first %}
  <section class="hero"
    {% if prop.thumbnail %}
      style="--hero-bg:url('{{ prop.thumbnail.url }}')"
    {% elif prop.cover_photo %}
      style="--hero-bg:url('{{ prop.cover_photo.image.url }}')"
    {% endif %}>
    <div class="hero-overlay"></div>
    <div class="hero-content container">
      <span class="hero-label">
        {% if prop.status == 'sale' %}{% trans "À vendre" %}{% else %}{% trans "À louer" %}{% endif %}
      </span>
      <h1 class="hero-title">{{ prop.name }}</h1>
      <p class="hero-meta">
        {{ prop.city }}&ensp;&bull;&ensp;{{ prop.living_area }} m²&ensp;&bull;&ensp;{{ prop.rooms_count }} {% trans "pièces" %}
      </p>
      {% if not prop.price_on_request %}
      <p class="hero-price">{{ prop.price|price_fr }}</p>
      {% else %}
      <p class="hero-price">{% trans "Prix sur demande" %}</p>
      {% endif %}
      <a href="{{ prop.get_absolute_url }}" class="btn btn-primary btn-hero">
        {% trans "Découvrir ce bien" %} →
      </a>
    </div>
  </section>
  {% endwith %}
{% else %}
  <section class="hero hero-generic">
    <div class="hero-overlay"></div>
    <div class="hero-content container">
      <h1 class="hero-title">{% trans "Nos biens immobiliers" %}</h1>
      <p class="hero-subtitle">{% trans "Trouvez votre futur chez-vous" %}</p>
    </div>
  </section>
{% endif %}

{# ── Grille des biens ────────────────────────────────────────────────────── #}
<section class="properties-section">
  <div class="container">

    {% if not properties %}
      <div class="empty-state">
        <p>{% trans "Aucun bien immobilier disponible pour le moment." %}</p>
      </div>
    {% else %}
      <div class="properties-grid">
        {% for prop in properties %}
        <article class="property-card" data-status="{{ prop.status }}">
          <a href="{{ prop.get_absolute_url }}" class="property-card-link">

            <div class="property-card-img-wrapper">
              {% if prop.thumbnail %}
                <img src="{{ prop.thumbnail.url }}"
                     alt="{{ prop.name }}"
                     class="property-card-img"
                     loading="lazy">
              {% elif prop.cover_photo %}
                <img src="{{ prop.cover_photo.image.url }}"
                     alt="{{ prop.name }}"
                     class="property-card-img"
                     loading="lazy">
              {% else %}
                <div class="property-card-img-placeholder">🏠</div>
              {% endif %}
              <span class="property-card-status
                {% if prop.status == 'sale' %}status-sale{% else %}status-rent{% endif %}">
                {% if prop.status == 'sale' %}{% trans "À vendre" %}{% else %}{% trans "À louer" %}{% endif %}
              </span>
              {% if prop.energy_class %}
                <span class="property-card-dpe" style="background:{{ prop.energy_class|dpe_color }}">
                  {{ prop.energy_class }}
                </span>
              {% endif %}
            </div>

            <div class="property-card-body">
              <h2 class="property-card-title">{{ prop.name }}</h2>
              <p class="property-card-location">📍 {{ prop.city }} ({{ prop.postal_code }})</p>

              <ul class="property-card-specs">
                <li title="{% trans 'Surface habitable' %}">
                  <span class="spec-icon">⬜</span> {{ prop.living_area }} m²
                </li>
                <li title="{% trans 'Pièces' %}">
                  <span class="spec-icon">🚪</span> {{ prop.rooms_count }} {% trans "p." %}
                </li>
                <li title="{% trans 'Chambres' %}">
                  <span class="spec-icon">🛏</span> {{ prop.bedrooms_count }}
                </li>
                <li title="{% trans 'Salles d\'eau' %}">
                  <span class="spec-icon">🚿</span> {{ prop.bathrooms_count }}
                </li>
              </ul>

              <p class="property-card-price">
                {% if prop.price_on_request %}
                  {% trans "Prix sur demande" %}
                {% else %}
                  {{ prop.price|price_fr }}
                  {% if prop.status == 'rent' %}<small>{% trans "/ mois" %}</small>{% endif %}
                {% endif %}
              </p>
            </div>

          </a>
        </article>
        {% endfor %}
      </div>
    {% endif %}

  </div>
</section>

{% endblock %}