125 lines
4.9 KiB
HTML
125 lines
4.9 KiB
HTML
{% 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 }} • {{ prop.living_area }} m² • {{ 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 %}
|