{% set image = offre is defined and offre.photo1 ? asset('/uploads/offres/' ~ offre.photo1) : asset('/uploads/0226fa452868f552ab82c44bd9d99440e1c963ca.jpg') %}
{% set nature = offre is defined and offre.nature ? offre.nature.libelle|lower : 'location' %}
{% set type = offre is defined and offre.type ? offre.type.libelle : 'Bureaux' %}
{% set surface = offre is defined ? offre.surfaceTotale : 2552 %}
{% set ville = offre is defined ? offre.ville : 'Montigny Le Bretonneux' %}
{% set cp = offre is defined ? offre.cp : '78180' %}
{% set loyer = offre is defined ? offre.loyerGlobal : 46787 %}
{% set prix = offre is defined ? offre.prixVenteGlobal : null %}
{% set prixM2 = offre is defined ? (nature == 'vente' ? offre.prixMCarre : offre.loyerMCarre) : 650 %}
{% set montantPrincipal = nature == 'vente' ? prix : loyer %}
{% set detailUrl = offre is defined and offre.refInterne ? path('app_offre', { refInterne: offre.refInterne }) : '#' %}

<div class="card cardOffre position-relative br-12 bg-white">
    <div class="c_visuel">
        <img src="{{ image }}" class="img-fluid" alt="{{ type }} {{ ville }}">
        <a href="#" title="" class="btn btn-picto-40 bg-white_03 br-6 favoris">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_530_940)"><path d="M1.33337 6.33333C1.33339 5.59147 1.55844 4.86706 1.9788 4.25578C2.39916 3.6445 2.99505 3.17511 3.68778 2.9096C4.38051 2.64409 5.13748 2.59496 5.85872 2.7687C6.57995 2.94243 7.23152 3.33085 7.72737 3.88267C7.7623 3.92001 7.80452 3.94978 7.85142 3.97013C7.89833 3.99049 7.94891 4.00099 8.00004 4.00099C8.05117 4.00099 8.10175 3.99049 8.14866 3.97013C8.19556 3.94978 8.23778 3.92001 8.27271 3.88267C8.767 3.32727 9.41872 2.93558 10.1411 2.75974C10.8635 2.58389 11.6224 2.63223 12.3166 2.89832C13.0109 3.16441 13.6076 3.63564 14.0274 4.24927C14.4473 4.8629 14.6702 5.58984 14.6667 6.33333C14.6667 7.86 13.6667 9 12.6667 10L9.00537 13.542C8.88115 13.6847 8.72799 13.7993 8.55607 13.8782C8.38415 13.9571 8.1974 13.9986 8.00823 13.9998C7.81906 14.001 7.63181 13.9619 7.4589 13.8852C7.28599 13.8084 7.13139 13.6958 7.00537 13.5547L3.33337 10C2.33337 9 1.33337 7.86667 1.33337 6.33333Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_530_940"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>
        </a>
    </div>
    <a class="c_infos" href="{{ detailUrl }}" title="{{ type }} {{ ville }}">
        <h3>
            <span class="titreCard grey01">
                <span>{{ type }} {{ nature == 'vente' ? 'a vendre' : 'a louer' }}</span>
                {% if surface %}
                    <span>{{ surface|number_format(0, ',', ' ') }} m²</span>
                {% endif %}
            </span>
            <span class="villecp black">{{ ville|title }}{% if cp %} ({{ cp }}){% endif %}</span>
        </h3>
        <ul class="listPrix">
            <li>
                <span class="valeur orange">{{ montantPrincipal|default(0)|number_format(0, ',', ' ') }} €</span>
                <span class="unite grey01">{{ nature == 'vente' ? 'HT net vendeur' : 'HT HC /mois' }}</span>
            </li>
            <li>
                <hr>
            </li>
            <li>
                <span class="valeur orange">{{ prixM2|default(0)|number_format(0, ',', ' ') }} €</span>
                <span class="unite grey01">{{ nature == 'vente' ? 'HT /m²' : 'HT HC /m²/an' }}</span>
            </li>
        </ul>
    </a>
</div>