templates/search_properties/_card.html.twig line 1

Open in your IDE?
  2. <a class='offer-card offers-container' href='{{ path(detailPath, parameters|merge({encodedTitle: card.url}) ) }}' data-open-detail="{{card.url}}">
  3.     <div class='grid-x grid-margin-x mb--16'>
  4.         <div class='medium-6 cell mb-16'>
  5.             <div class='offer-card__carousel'>
  6.                 <div class='swiper-container' data-carousel='card'>
  7.                     <div class='swiper-wrapper'>
  8.                     {% for img in card.images %}
  9.                         <div class='swiper-slide offer-card__aspect-ratio'>
  10.                             <img class='swiper-lazy' data-src='{{ asset(img) | imagine_filter('offer_bien') }}' class='of-cover' alt/>
  11.                         </div>
  12.                     {% endfor %}
  13.                     </div>
  14.                     <div class='circle-32 bg-white carousel-button carousel-button--prev offer-card__button flex-container align-center align-middle' data-prev>
  15.                         <svg width='5' height='10' class='inline-block-middle'>
  16.                             <use xlink:href='#chevron-small'/></svg>
  17.                     </div>
  18.                     <div class='circle-32 bg-white carousel-button carousel-button--next offer-card__button flex-container align-center align-middle' data-next>
  19.                         <div class='scale-x--1'>
  20.                             <svg width='5' height='10'>
  21.                                 <use xlink:href='#chevron-small'/></svg>
  22.                         </div>
  23.                     </div>
  24.                 </div>
  25.                 
  26.                 <div class='offer-card__carousel-bottom grid-x align-bottom'>
  27.                     {% if card.isNewProject is defined and card.isNewProject %}
  28.                         {% set newProject = app.request.locale == "fr" ? "NOUVEAU PROJET":"NEW PROJECT" %}
  29.                         <div class='shrink cell'>
  30.                             <span class='bg-red offer-tag-accent t-small uppercase fw-500 inline-block-top'>{{newProject}}</span>
  31.                         </div>
  32.                     {% endif %}
  33.                     <div class='auto cell text-right'>
  34.                         {% if card.videoUrl is defined  and card.videoUrl is not empty %}
  35.                             <svg width="30" height="40" viewbox="0 0 24 24" class="white-icon-spacing inline-block-middle">
  36.                                 <use xlink:href='#film'/>
  37.                             </svg>
  38.                         {% endif %}
  39.                         {% if card.link360 is defined and card.link360 is not empty %}
  40.                             <svg width="40" height="40" viewBox="0 0 32 32" class="white-icon-spacing inline-block-middle">
  41.                                 <use xlink:href='#360'/>
  42.                             </svg>
  43.                         {% endif %}
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.         </div>
  48.         <div class='medium-6 cell flex-container flex-dir-column offer-card__content mb-16'>
  49.             <h3 class='t-card mb-8'>{{card.title}}</h3>
  50.             <p class='o-05 t-p-medium single-line-ellipsis' title='{{card.city}}'>{{card.city}}</p>
  51.             <div class='mt-auto pt-16'>
  52.                 <p class='t-p-medium fw-500 mb-16'>
  53.                     {% if parameters.priceSqm is defined and card.priceM2an is defined %}
  54.                         <sub class='t-small-uppercase inline-block-bottom lh-20'>CHF</sub>
  55.                         {{card.priceM2an|number_format(0, '.', "'")}}.- {{'par m² /an'|trans}}
  56.                     {% elseif parameters.priceSqm is not defined and card.price is defined  %}
  57.                     {% if card.price == '' %} {{card.price ~ 'prix sur demande'|trans|capitalize}} {% else %}
  58.                         <sub class='t-small-uppercase inline-block-bottom lh-20'>CHF</sub>
  59.                          {{card.price|number_format(0, '.', "'")}}.-
  60.                         {% if card.isForRent %}{{'/ mois'|trans}}{% endif %} {% endif %}
  61.                     {% else %}
  63.                         {{card.price ~ 'prix sur demande'|trans|capitalize}}
  64.                     {% endif %}
  65.                 </p>
  67.                 {% if card.tags is defined %}
  68.                     <p class='offer-tags-spacing'>
  69.                         {% for tag in card.tags %}
  71.                             <span class='offer-tag t-label-regular inline-block-top bg-light-gray'>{{tag|raw}}</span>
  72.                         {% endfor %}
  73.                     </p>
  74.                 {% endif %}
  76.         {# <p>{{card.dateModification}}</p> #}
  77.         {# <p>{{card.dateModificationInt}}</p> #}
  78.             </div>
  79.         </div>
  80.     </div>
  81. </a>