{{#features}}
<li class="item">
  <div class="dvf-feature-card" data-id="{{id}}">
    <div class="dvf-card">
      <div class="dvf-header">
        <i class="fa fa-2x fa-fw default {{type_local}}"></i>
        <h3 class="dvf-title">{{type_local}}</h3>
      </div>

      <div class="dvf-body">
        <div class="dvf-price-container">
          <span class="dvf-prix" data-valeur="{{valeur_fonciere}}">{{valeur_fonciere}} €</span>
        </div>
        
        <div class="dvf-specs">
          {{#nombre_pieces_principales}}
          <span class="spec-item border-right">
            <strong>{{nombre_pieces_principales}}</strong> <span class="label">pièce(s)</span>
          </span>
          {{/nombre_pieces_principales}}
          
          {{#surface_reelle_bati}}
          <span class="spec-item border-right">
            <strong>{{surface_reelle_bati}}</strong> <span class="label">m²</span>
          </span>
          <span class="spec-item">
            <strong class="dvf-prixm2" data-prix="{{valeur_fonciere}}" data-surface="{{surface_reelle_bati}}">-</strong>
          </span>
          {{/surface_reelle_bati}}
        </div>
      </div>

      <hr class="dvf-separator">

      <div class="dvf-footer">
        <div class="dvf-address">
          <i class="fa fa-map-marker-alt network-icon"></i>
          <span>{{adresse_numero}} {{adresse_nom_voie}}, {{code_postal}} {{nom_commune}}</span>
        </div>
        <div class="dvf-date-row">
          <span class="label">Mutation :</span>
          <span class="dvf-date" data-date="{{date_mutation}}">{{date_mutation}}</span>
        </div>
      </div>
    </div>
  </div>
</li>
{{/features}}

<style>
/* Reset mviewer sur .item */
.item { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; margin-bottom: 0 !important; }

/* Carte */
.dvf-card { font-family: Arial, sans-serif; color: #333; background: #fdfdfd; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px; margin-bottom: 10px; }
.dvf-header { display: flex; align-items: center; margin-bottom: 8px; }
.dvf-title { margin: 0 0 0 10px; font-size: 18px; font-weight: 700; text-transform: capitalize; }
.dvf-body { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.dvf-prix { font-size: 22px; font-weight: 900; color: #2c3e50; }
.dvf-specs { display: flex; align-items: center; font-size: 14px; background: #f1f2f6; padding: 4px 8px; border-radius: 4px; }
.spec-item { padding: 0 6px; }
.spec-item.border-right { border-right: 1px solid #ccc; }
.spec-item .label { color: #666; font-size: 12px; }
.dvf-separator { border: 0; border-top: 1px dashed #ddd; margin: 8px 0; }
.dvf-footer { font-size: 13px; color: #555; }
.dvf-address { margin-bottom: 4px; font-weight: 600; }
.dvf-address i { color: #e74c3c; margin-right: 4px; }
.dvf-date-row .label { color: #777; }
.dvf-date { font-weight: 600; }

/* Icônes */
.default.Maison:before { content: "\f015"; }
.default.Maison { color: #3498db; }
.default.Appartement:before { content: "\f1ad"; }
.default.Appartement { color: #636e72; }
.default:before { content: "\f275"; }
.default { color: #ffa500; }
</style>

<script>
setTimeout(function() {
  $(".dvf-feature-card").each(function() {
    var $card = $(this);

    var $dateEl = $card.find(".dvf-date");
    var rawDate = $dateEl.attr("data-date");
    if (rawDate) {
      var d = new Date(rawDate.split("Z")[0].split(" ")[0]);
      if (!isNaN(d.getTime())) $dateEl.text(d.toLocaleDateString("fr-FR"));
    }

    var $prixEl = $card.find(".dvf-prix");
    var val = parseFloat($prixEl.attr("data-valeur"));
    $prixEl.text(!isNaN(val) ? val.toLocaleString("fr-FR") + " €" : "Non renseigné");

    var $m2El = $card.find(".dvf-prixm2");
    var prix = parseFloat($m2El.attr("data-prix"));
    var surface = parseFloat($m2El.attr("data-surface"));
    if (!isNaN(prix) && !isNaN(surface) && surface > 0) {
      $m2El.text(Math.round(prix / surface).toLocaleString("fr-FR") + " €/m²");
    } else {
      $m2El.closest(".spec-item").hide();
    }
  });
}, 100);
</script>