templates/search_properties/_detail.html.twig line 1

Open in your IDE?
  3. <div class='medium-pt-32 offers-container-negative'>
  4.   {# images card #}
  5.     <div  class='mb-16 medium-mb-32'>
  6.       <detail-carousel v-if="detail && detail.images" :on-slide-click='i => openGallery(detail.images, i)' :images='detail.images'/>
  7.     </div>
  8. </div>
  12. {# begin toolbar #}
  13. <div class='grid-x mb-16'>
  15.   {% set buttonClass = 'button-reset t-label-regular py-16 border hover-bc-dark-blue margin-detail-toolbar-control icon-left' %}
  17.   <button v-if='detail && detail.images' class='{{buttonClass}}' @click='openGallery(detail.images)'>
  20.     <svg width="18" height="16">
  21.     <path fill-rule="evenodd" clip-rule="evenodd" d="M5.597 3.938l.64-1.923c.07-.171.204-.26.348-.26h4.776c.145 0 .28.09.349.264l.686 1.928a.5.5 0 00.47.333h2.152c.681 0 1.221.544 1.221 1.183v7.574c0 .639-.54 1.183-1.22 1.183H2.97c-.681 0-1.221-.544-1.221-1.183V5.463c0-.64.54-1.183 1.221-1.183h2.151a.5.5 0 00.475-.342zM6.585.755c-.628 0-1.094.414-1.284.91a.507.507 0 00-.008.021L4.762 3.28H2.97C1.759 3.28.75 4.25.75 5.463v7.574c0 1.212 1.009 2.183 2.221 2.183h12.047c1.212 0 2.221-.971 2.221-2.183V5.463c0-1.212-1.009-2.183-2.22-2.183h-1.8l-.57-1.603-.004-.012c-.19-.496-.656-.91-1.284-.91H6.585zM5.622 8.83c0-1.805 1.5-3.287 3.373-3.287 1.873 0 3.372 1.482 3.372 3.287s-1.5 3.287-3.373 3.287c-1.873 0-3.372-1.482-3.372-3.287zm3.373-4.287c-2.405 0-4.373 1.909-4.373 4.287s1.968 4.287 4.373 4.287c2.404 0 4.372-1.909 4.372-4.287s-1.968-4.287-4.373-4.287z" fill="currentColor"/>
  22.     </svg>
  23.     {{'photos'|trans|title}}
  24.     (<span v-text='detail.images.length'></span>)
  25.   </button>
  26.   <button v-if='detail && detail.link360' class='{{buttonClass}} icon-left--no-text' aria-label='{{'Visite virtuelle'|trans}}' @click='openIframe(detail.link360)'>
  27.     <div class='px-8'>
  28.       <svg width="32" height="15">
  29.       <path d="M11.958 6.11c.005.339-.06.675-.192.988-.124.29-.312.548-.548.756a2.45 2.45 0 01-.881.484 3.836 3.836 0 01-1.183.17 4.141 4.141 0 01-.75-.065 4.849 4.849 0 01-.618-.155 2.8 2.8 0 01-.45-.185 1.224 1.224 0 01-.23-.139.365.365 0 01-.114-.191.757.757 0 01-.028-.151 1.947 1.947 0 01-.01-.218A.734.734 0 017 7.096a.137.137 0 01.126-.086c.08.017.157.05.224.098.139.08.283.15.43.213.2.084.404.155.613.212.255.069.517.102.78.1.252.003.502-.033.742-.11.196-.06.376-.161.531-.295.142-.124.252-.28.323-.453.073-.181.11-.375.107-.57a1.29 1.29 0 00-.538-1.079 1.911 1.911 0 00-.654-.302 3.361 3.361 0 00-.875-.104h-.78a.242.242 0 01-.098-.022.204.204 0 01-.083-.071.41.41 0 01-.058-.13.8.8 0 01-.022-.209.835.835 0 01.019-.194.371.371 0 01.053-.123.23.23 0 01.077-.068.23.23 0 01.1-.02h.69c.248.002.494-.033.73-.106a1.55 1.55 0 00.55-.302c.148-.129.267-.29.345-.471.081-.194.12-.403.116-.613.003-.16-.021-.32-.072-.472a1.067 1.067 0 00-.24-.39 1.105 1.105 0 00-.411-.261 1.614 1.614 0 00-.577-.095 1.933 1.933 0 00-.656.107 4.162 4.162 0 00-.92.462.508.508 0 01-.216.102.184.184 0 01-.078-.016.115.115 0 01-.055-.061.4.4 0 01-.031-.13 2.207 2.207 0 01-.01-.218c0-.063 0-.116.007-.164a.518.518 0 01.068-.218.55.55 0 01.084-.101c.07-.064.148-.121.23-.17.141-.084.288-.157.44-.219.196-.077.399-.138.605-.18.242-.052.489-.076.736-.075.333-.006.664.044.98.146.259.082.497.218.699.4.186.17.33.383.42.619.094.255.141.525.138.798.002.236-.032.472-.1.7a1.763 1.763 0 01-1.398 1.24v.013c.262.026.517.095.755.207.218.101.417.24.588.41a1.805 1.805 0 01.525 1.284zM18.619 5.804c0 .345-.054.687-.16 1.014A2.353 2.353 0 0117.12 8.28c-.382.16-.794.238-1.208.23a2.882 2.882 0 01-.88-.123 2.074 2.074 0 01-.666-.346 1.92 1.92 0 01-.471-.56 3.244 3.244 0 01-.302-.758 5.799 5.799 0 01-.164-.93 11.386 11.386 0 01-.049-1.085c0-.347.018-.693.056-1.038.035-.345.1-.685.197-1.018a4.21 4.21 0 01.385-.915c.159-.282.365-.534.61-.746.259-.22.557-.39.878-.503.383-.13.785-.192 1.189-.184a3.93 3.93 0 01.892.101c.113.025.225.06.333.102a.842.842 0 01.179.09c.026.02.048.045.064.073a.408.408 0 01.035.087c.008.034.015.07.018.105 0 .04.006.086.006.144v.191a.352.352 0 01-.024.13.18.18 0 01-.055.073.145.145 0 01-.09.026.576.576 0 01-.186-.042 3.47 3.47 0 00-.687-.19 3.114 3.114 0 00-.552-.044 1.89 1.89 0 00-1.66.863 2.84 2.84 0 00-.389.915 5.31 5.31 0 00-.144 1.088 3.784 3.784 0 01.798-.352 3.99 3.99 0 01.501-.115c.188-.032.378-.047.568-.046.37-.01.74.05 1.09.175.275.103.521.27.718.487.186.21.32.462.391.734.08.295.119.6.117.906zm-1.073.1a2.757 2.757 0 00-.071-.651 1.225 1.225 0 00-.236-.496 1.08 1.08 0 00-.444-.314 1.855 1.855 0 00-.685-.116c-.153 0-.305.014-.455.04-.15.028-.297.067-.44.116-.14.046-.276.101-.408.166-.123.06-.24.129-.354.206-.006.446.027.892.102 1.332.048.3.148.591.295.859.112.198.28.359.484.46.213.098.444.146.678.14.237.006.471-.045.684-.149.188-.093.352-.228.48-.395.129-.168.224-.358.28-.561.06-.208.09-.422.09-.638zM25.076 4.38a8.921 8.921 0 01-.145 1.676c-.079.46-.242.903-.48 1.304a2.34 2.34 0 01-.878.844 3.128 3.128 0 01-2.604.031 2.084 2.084 0 01-.829-.788 3.695 3.695 0 01-.446-1.282 10.225 10.225 0 01-.133-1.747 8.85 8.85 0 01.151-1.674c.082-.46.245-.902.481-1.306.213-.353.514-.644.875-.844a3.139 3.139 0 012.604-.03c.345.18.632.453.83.788.225.396.376.83.445 1.282.093.577.136 1.161.13 1.746zm-1.084.075c0-.399-.015-.756-.043-1.072a6.389 6.389 0 00-.127-.838 2.719 2.719 0 00-.215-.626 1.497 1.497 0 00-.32-.431 1.152 1.152 0 00-.423-.247 1.75 1.75 0 00-.534-.077 1.374 1.374 0 00-.85.247 1.665 1.665 0 00-.514.677c-.134.323-.22.664-.256 1.011-.047.413-.069.829-.067 1.244-.006.508.025 1.016.092 1.52.043.353.141.698.293 1.02.11.238.287.439.51.576.232.125.493.187.756.179.208.003.414-.037.607-.115.172-.072.325-.18.45-.318.13-.147.236-.315.31-.496a3.48 3.48 0 00.201-.64c.052-.25.086-.505.102-.76.018-.274.028-.558.028-.854zM29.156 1.405a1.425 1.425 0 01-.923 1.34 1.634 1.634 0 01-.607.115 1.66 1.66 0 01-.595-.102 1.413 1.413 0 01-.46-.285 1.315 1.315 0 01-.31-.444 1.447 1.447 0 01-.115-.577 1.434 1.434 0 01.116-.576c.074-.175.184-.332.322-.461.143-.13.309-.231.489-.3.386-.144.81-.144 1.195 0 .173.065.332.162.468.286.134.12.24.267.314.431.075.182.11.377.106.573zm-.777.024a.866.866 0 00-.055-.311.75.75 0 00-.155-.249.69.69 0 00-.525-.223.702.702 0 00-.518.223.76.76 0 00-.154.246.93.93 0 000 .63c.034.093.088.179.156.251a.758.758 0 00.54.222.692.692 0 00.51-.232.827.827 0 00.151-.249.836.836 0 00.05-.308z" fill="currentColor"/>
  30.       <path d="M27.177 4.776a.489.489 0 00-.25.945c3.019.796 4.094 1.738 4.094 2.355 0 .592-1.013 1.505-3.86 2.29-2.67.737-6.284 1.178-10.175 1.24a.49.49 0 00.008.98h.008c3.972-.066 7.67-.52 10.42-1.277C30.417 10.483 32 9.366 32 8.082c0-1.682-2.624-2.725-4.823-3.306zM13.718 10.046a.489.489 0 10-.692.692l.84.84c-3.448-.124-6.62-.547-9.024-1.211C1.992 9.582.978 8.669.978 8.077c0-.617 1.075-1.56 4.094-2.356a.489.489 0 10-.249-.945C2.623 5.357 0 6.4 0 8.076c0 1.29 1.583 2.407 4.579 3.234 2.488.692 5.755 1.122 9.298 1.246l-.85.849a.489.489 0 00.691.691l1.678-1.68a.486.486 0 000-.691l-1.678-1.678z" fill="currentColor"/>
  31.       </svg>
  32.     </div>
  33.   </button>
  35.   <button v-if='youtubeIframe' class='{{buttonClass}}' @click='openIframe(youtubeIframe)'>
  36.     <svg width='16' height='16' viewbox="0 0 24 24">
  37.     <use xlink:href='#film'/>
  38.     </svg>
  39.     {{'vidéos'|trans|title}}
  40.   </button>
  41.   <a v-else-if='detail && detail.videoUrl' :href="detail.videoUrl" target="_blank" rel="noopener noreferrrer" class='{{buttonClass}}'>
  42.     <svg width='16' height='16' viewbox="0 0 24 24">
  43.     <use xlink:href='#film'/>
  44.     </svg>
  45.     {{'vidéos'|trans|title}}
  46.   </a>
  47.   <a :href='detail.website' target='_blank' rel='noopener noreferrer' class='{{buttonClass}}' v-if='detail.website'>
  48.     <svg width="16" height="16" fill="none">
  49.     <path d="M7.646 4.465l1.238-1.238a2.75 2.75 0 113.889 3.89l-1.768 1.767a2.75 2.75 0 01-3.889 0" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
  50.     <path d="M8.354 11.535l-1.238 1.238a2.75 2.75 0 11-3.889-3.89l1.768-1.767a2.75 2.75 0 013.889 0" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
  51.     </svg>
  52.     {{'site web'|trans|title}}
  53.   </a>
  55.   <span class='show-for-medium mr-auto'></span>
  57.   
  58.   <button class='{{buttonClass}}' id="printButton" onclick="print()">
  59.     <svg width="18" height="18" fill="none">
  60.     <path d="M7.412 1.941h-4.53A1.888 1.888 0 001 3.824v11.294C1 16.153 1.847 17 2.882 17h11.294a1.888 1.888 0 001.883-1.882v-4.53M9 9l7.941-7.941M17 6.647V1.471c0-.283-.188-.471-.47-.471h-5.177" stroke="currentColor" stroke-miterlimit="10" stroke-linejoin="round"/>
  61.     </svg>
  62.     {{'imprimer'|trans|title}}
  63.   </button>
  65.   <button class='{{buttonClass}}' @click='pickPopup("share")'>
  66.     <svg width="18" height="18" fill="none">
  67.     <path d="M7.412 1.941h-4.53A1.888 1.888 0 001 3.824v11.294C1 16.153 1.847 17 2.882 17h11.294a1.888 1.888 0 001.883-1.882v-4.53M9 9l7.941-7.941M17 6.647V1.471c0-.283-.188-.471-.47-.471h-5.177" stroke="currentColor" stroke-miterlimit="10" stroke-linejoin="round"/>
  68.     </svg>
  69.     {{'partager'|trans|title}}
  70.   </button>
  71. </div>
  72. {# end toolbar #}
  74. <div class='show-for-medium border-top'></div>
  76. <div class="printTable" id="printTable2">
  80. {# infos card #}
  81. <div class='medium-pt-32 grid-x grid-margin-x align-top align-justify w-1184'>
  82.   <div id="corp" class='large-8 cell mb-64 w-688'>
  83.     {% include 'search_properties/elements/flashWrapper.html.twig' %}
  84.     
  85.     <div id="spaces"><br><br></div>
  87.     <!-- Dump the first image -->
  88.     <img id="firstImg" style="visibility: hidden;" v-if="detail && detail.images && detail.images.length > 0" :src="detail.images[0]" />
  90.     <p class='t-p-medium mb-16'>Ref:
  91.       <span class='fw-500' v-text="detail.ref"></span>
  92.     </p>
  94.     <h1 id="theTitle" class='t-title-h2 mb-32' v-if="detail" v-text="detail.title">{{title is defined ? title : ''}}</h1>
  96.     <div id="body_spaces"></div>
  98.     <div class='grid-x grid-margin-x align-middle mb-16 border-top'>
  100.       <p class='t-p-big fw-500 medium-auto cell pt-16'>
  102.         {# if detail.price is not defined, "prix sur demande" is displayed #}
  103.         <span v-if="detail && detail.price != null">
  104.           <sub class='inline-block-bottom t-p-small uppercase'>CHF</sub>
  105.           <span v-if='detail.isForRent && displayPriceRent === "perSqmPerYear" && detail.priceM2an' v-text="formatPriceNumber(detail.priceM2an)">{{ price is defined ? price|number_format(0, '.', "'") : ''}}</span>
  106.           <span v-else-if='detail.isForRent && displayPriceRent === "perYear" && detail.pricePerAn' v-text="formatPriceNumber(detail.pricePerAn)">{{ price is defined ? price|number_format(0, '.', "'") : ''}}</span>
  107.           <span v-else v-text="formatPriceNumber(detail.price)">{{ price is defined ? price|number_format(0, '.', "'") : ''}}</span>
  108.           <span>.-</span>
  109.         </span>
  110.   
  111.         <span v-else-if="detail.isForRent">{{'loyer sur demande'|trans|capitalize}}</span>
  112.         <span v-else>{{'prix sur demande'|trans|capitalize}}</span>
  113.       </p>
  114.   
  115.       <div class='medium-shrink cell pt-16' v-if="detail && detail.price && detail.isForRent">
  116.         <div
  117.           class='grid-x'> 
  118.           <button class='button-reset small-tab-button t-label-regular auto medium-shrink cell text-center' 
  119.             :class='{"active": displayPriceRent === "perMonth" || (displayPriceRent === "perSqmPerYear" && !detail.priceM2an) || (displayPriceRent === "perYear" && !detail.pricePerAn)}' 
  120.             @click='displayPriceRent = "perMonth"'>{{'par mois'|trans}}</button>
  121.           <button v-if="detail.priceM2an" class='button-reset small-tab-button t-label-regular auto medium-shrink cell text-center' :class='{"active": displayPriceRent === "perSqmPerYear"}' @click='displayPriceRent = "perSqmPerYear"'>{{'par m² /an'|trans}}</button>
  122.           <button v-if="detail.pricePerAn" class='button-reset small-tab-button t-label-regular auto medium-shrink cell text-center' :class='{"active": displayPriceRent === "perYear"}' @click='displayPriceRent = "perYear"'>{{'par an'|trans}}</button>
  123.         </div>
  124.       </div>
  125.     </div>
  127.     <div class='t-p-medium pt-24 mb-56'>
  129.       {# Charges are displayed only if it is defined. This is to keep the page easily readable and informative #}
  130.       <div v-if='detail.chargesPerMonth' class='grid-x border-bottom pt-24'>
  131.         <div class='medium-shrink cell mb-8 medium-mb-16'>{{'charges'|trans|capitalize}}<span v-if="!detail.isForRent">&nbsp;({{'par mois'|trans}})</span>:</div>
  132.         <div class='medium-auto medium-text-right cell fw-500 mb-16'>
  133.           <sub class='inline-block-bottom t-p-small uppercase'>CHF</sub>
  134.           <span v-if="detail.isForRent" v-text="formatPriceRent(detail.chargesPerMonth, detail.surface)"></span>
  135.           <span v-else v-text="formatPriceNumber(detail.chargesPerMonth)"></span>
  136.           <span>.-</span>
  137.         </div>
  138.       </div>
  140.       {# Surface is displayed only if it is defined. This is to keep the page easily readable and informative #}
  141.       <div v-if='detail.surface' class='grid-x border-bottom pt-24'>
  142.         <div class='medium-shrink cell mb-8 medium-mb-16'>{{'superficie'|trans|capitalize}}:</div>
  143.         <div class='medium-auto medium-text-right cell fw-500 mb-16' v-text="detail.surface + ' m²'">{{surface is defined ? surface : ''}}</div>
  144.       </div>
  146.       {# Address is displayed only if it is defined. This is to keep the page easily readable and informative #}
  147.       {# <div v-if='detail.address' class='grid-x border-bottom pt-24'>
  148.         <div class='medium-shrink cell mb-8 medium-mb-16'><span v-text="detail.displayAddress ? '{{'adresse'|trans|capitalize}}':'{{'localité'|trans|capitalize}}'"></span>:</div>
  149.         <div class='medium-auto medium-text-right cell fw-500 mb-16' v-text="detail.address">{{address is defined ? address : ''}}</div>
  150.       </div> #}
  152.       <div v-if='detail.rentAddress && detail.isForRent' class='grid-x border-bottom pt-24'>
  153.         <div class='medium-shrink cell mb-8 medium-mb-16'><span v-text="detail.displayAddress ? '{{'adresse'|trans|capitalize}}':'{{'localité'|trans|capitalize}}'"></span>:</div>
  154.         <div class='medium-auto medium-text-right cell fw-500 mb-16' v-text="detail.rentAddress">{{rentAddress is defined ? rentAddress : ''}}</div>
  155.       </div>
  157.       <div v-if='detail.buyAddress && !detail.isForRent' class='grid-x border-bottom pt-24'>
  158.         <div class='medium-shrink cell mb-8 medium-mb-16'><span v-text="detail.displayAddress ? '{{'adresse'|trans|capitalize}}':'{{'localité'|trans|capitalize}}'"></span>:</div>
  159.         <div class='medium-auto medium-text-right cell fw-500 mb-16' v-text="detail.buyAddress">{{buyAddress is defined ? buyAddress : ''}}</div>
  160.       </div>
  162.       <div class='grid-x border-bottom pt-24'>
  163.         <div class='medium-shrink cell mb-8 medium-mb-16'>{{'disponibilité'|trans|capitalize}}:</div>
  164.         <div class='medium-auto medium-text-right cell fw-500 mb-16' v-text="detail.availability"></div>
  165.       </div>
  167.       <div class='grid-x border-bottom pt-24' v-if="detail.theoreticGrossYield">
  168.         <div class='medium-shrink cell mb-8 medium-mb-16'>{{'rendement brut théorique'|trans|capitalize}}:</div>
  169.         <div class='medium-auto medium-text-right cell fw-500 mb-16' v-text="detail.theoreticGrossYield+'%'"></div>
  170.       </div>
  171.     </div>
  173.     <div class='t-p-medium child-h3-custom child-content-spacing mb-48 ws-pre-wrap child-links-td-underline' v-if="detail.fullDescription" v-html="detail.fullDescription">
  174.       {{fullDescription is defined ? fullDescription|raw : ''}}
  175.     </div>
  177.     <div class='border-top'></div>
  178.   </div>
  180.   <div id="visites" class='large-4 cell mb-64 sticky top-right offer-sidebar'>
  181.     {# Begin right sidebar. All items in right sidebar may be or may not be present in every specific property depending on content. #}
  183.     <div class='border pt-32 offers-container mb-24' v-if="detail.contactPerson || detail.contactPersonVisits">
  184.       <div class='c-dark-blue mb-32'>
  185.         {% include 'search_properties/elements/logo.svg.twig' with { attrs: 'width="200" height="48"' } %}
  186.       </div>
  188.       <div class='border-top pt-24 mb-32' v-if="detail.contactPersonVisits">
  189.         <p class='t-p-medium lh-20 mb-24'>
  190.           <span class='fw-500'>{{'visites'|trans|capitalize}}</span><br>
  191.           <span class='fw-500' v-text="detail.contactPersonVisits.name"></span><br>
  192.           <span v-if="detail.contactPersonVisits.comment" v-html="detail.contactPersonVisits.comment"></span>
  193.         </p>
  195.         {% include 'search_properties/_show-phone.html.twig' with {
  196.                         phone: 'detail.contactPersonVisits.phone',
  197.                         contactPerson: 'detail.contactPersonVisits',
  198.                 } %}
  199.       </div>
  200.     </div>
  201.   </div>
  203.   {# end sidebar #}
  204. </div>
  208. </div>
  212. {# end pdf file #}
  213. {# </div> #}
  216. <div class='t-p-medium child-h3-custom child-content-spacing mb-32' v-if="detail.amenities && detail.amenities.length">
  217.   <h3>{{'Commodités'|trans}}</h3>
  218.   <div v-if="detail.amenitiesText" v-html="detail.amenitiesText">{{amenitiesText is defined ? amenitiesText|raw : ''}}</div>
  219. </div>
  221. <div class='mb-8 medium-mb-32 scroll-x custom-scrollbar' v-if="detail.amenities && detail.amenities.length">
  222.   <div class='flex-container underlined-tabs'>
  223.     <button class='t-p-medium lh-16 button-reset px-16 py-16 underlined-tab' :class="{active: !currentAmenityType}" @click="currentAmenityType = null">{{'tous'|trans|capitalize}}</button>
  224.     <button class='t-p-medium lh-16 button-reset px-16 py-16 underlined-tab' v-for="type in availableAmenityTypes" :key="type" v-text="type" :class="{active: currentAmenityType === type}" @click="currentAmenityType = type"></button>
  225.   </div>
  226. </div>
  228. {# map section #}
  229. <div class='offers-container-negative offers-container-negative--small-only'>
  230.   <map-with-popup v-if="detail" map-element-class='mb-64 amenities-map-height custom-google-map' :markers='filteredAmenities' :use-circles='!detail.isForRent' markers-dir='{{asset('frontend/search/images/vector/')}}' card-component='card-amenity' :map-options="{minZoom: 12, maxZoom: detail.displayAddress ? 18 : 15}" :no-clusterer="true" :swiss-coordinates="false"></map-with-popup>
  231. </div>
  233. {# Biens similaires #}
  234. <div class='border-top pt-32' v-if="detail && detail.similar && detail.similar.length">
  235.   <h3 class='mb-40'>{{'Biens similaires'|trans|capitalize}}</h3>
  236.   <div v-if="detail.similar.length === 1" class="grid-x grid-margin-x">
  237.     <div v-for="card in detail.similar" :key="card.id" class="shrink cell">
  238.       <card :card="card" class='offer-card--similar' :show-description='true' @click.native="toggleCursor(false);openDetail(card.url)" title-class='h-48'
  239.             :url='getDetailUrl(card.url)'
  240.             :display-price-per-sqm="filters.priceSqm" />
  241.     </div>
  242.   </div>
  243.   <div v-else class='offers-container-negative' @mouseover='toggleCursor(true)' @mouseleave='toggleCursor(false)' @mousedown='toggleActiveCursor(true)' @mouseup='toggleActiveCursor(false)'>
  244.     <swiper :options='similarSwiperConfig'>
  245.       <swiper-slide v-for="card in detail.similar" :key="card.id" class='allow-shrink'>
  246.         <card :card="card" class='offer-card--similar' :show-description='true' @click.native="toggleCursor(false);openDetail(card.url)" title-class='h-48'
  247.               :url='getDetailUrl(card.url)'
  248.               :display-price-per-sqm="filters.priceSqm" />
  249.       </swiper-slide>
  250.     </swiper>
  251.   </div>
  252. </div>
  254. <div class='pt-128'></div>
  256. <!-- Include the jsPDF library from a CDN -->
  257. <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
  258. <!-- Include the html2canvas library from a CDN -->
  259. <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
  262. {# simple print by class :  #}
  263. <script type="text/javascript">
  264.   var name = "{{title}}";
  265.   window.jsPDF = window.jspdf.jsPDF;
  266.   var docPDF = new jsPDF();
  267.   function print() {
  268.     
  269.     /* variables */
  270.     firstImg = document.getElementById('firstImg');
  271.     firstImg.style.visibility = 'visible';
  272.     // Use the replace() method to remove the '/rent/' segment
  273.     const modifiedUrl = firstImg.src.replace('/rent/', '/');
  274.     firstImg.src = modifiedUrl;
  276.     /* hide elements */
  277.     visites = document.getElementById('visites');
  278.     visites.style.visibility = 'hidden';
  280.     spaces = document.getElementById('spaces');
  281.     spaces.style.visibility = 'visible';
  283.     corp = document.getElementById('corp');
  284.     corp.classList.add('large-12');
  286.     theTitle = document.getElementById('theTitle');
  287.     originalTitleFontSize = window.getComputedStyle(theTitle).fontSize;
  288.     theTitle.style.fontSize = "20px";
  291.     var spacesDiv = document.getElementById('body_spaces');
  292.     spacesDiv.innerHTML = '<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>';
  295.     var elementHTML = document.querySelector(".printTable");
  296.     docPDF.html(elementHTML, {
  297.          callback: function(docPDF) {
  298.           var fontSize = 4; // Adjust the font size as needed
  299.           docPDF.setFontSize(fontSize);
  300.           docPDF.save(name);
  301.          },
  302.        x: 15,
  303.        y: 15,
  304.        width: 170,
  305.        windowWidth: 650
  306.     });
  308.     setTimeout(() => {
  309.       /* show elements */
  310.       firstImg.src = '';
  311.       visites.style.visibility = 'visible';
  312.       spaces.style.visibility = 'hidden';
  313.       corp.classList.add('large-8', 'cell', 'mb-64', 'w-688');
  314.       theTitle.style.fontSize = originalTitleFontSize;
  315.       spacesDiv.innerHTML = '';
  316.     }, 1000);
  318.   }
  319. </script>
  321. {# print 2 divs by id : #}
  322. <script type="text/javascript">
  323.   
  324. </script>