templates/homepage/detailVehicle.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ vehicle_seo_title(vehicle) }}{% endblock %}
  5. {% block desc %}{{ vehicle_seo_description(vehicle) }}{% endblock %}
  7. {% block canonical %}<link rel="canonical" href="{{ vehicle_url(vehicle) }}">{% endblock %}
  9.         {% block stylesheets %}
  10.             {{ encore_entry_link_tags('app') }}
  11.                 <link rel="stylesheet" href="{{ asset('vehicle-gallery-v2/gallery.css') }}?v=21">
  12.         {% endblock %}
  14.         {% block javascripts %}
  15.             {{ encore_entry_script_tags('app') }}
  16.             <script src="https://www.google.com/recaptcha/api.js?render={{ google_recaptcha_site_key }}"></script>
  17.                 <script src="{{ asset('vehicle-gallery-v2/gallery.js') }}?v=21" defer></script>
  18.         {% endblock %}
  20.     {% block mobileBranding %} {% endblock %}
  21. {% block body %}
  23.     <br>
  24.     <section class="container">
  25.         <nav class="container__back">
  26.             {% if vehicle.kind %}
  27.                 <a class="container__back-link" href="{{ app.request.headers.get('referer') }}">Zpět na seznam
  28.                     inzerátů</a>
  29.             {% endif %}
  30.         </nav>
  31.         <section class="gallery js-vehicle-gallery-v2-trigger" data-vehicle-gallery-v2-trigger>
  32.             {% for img in vehicle.vehicleImages %}
  34.                 {% if loop.index < 2 %}
  35.                     <a class="gallery__item gallery__item--large" href="{{ asset(vehicle_image_url(img)) }}"
  36.                        title="{{ vehicle_image_alt(img) }}" data-gallery-index="{{ loop.index0 }}">
  37.                         <img src="{{ asset(vehicle_image_url(img)) }}"
  38.                              alt="{{ vehicle_image_alt(img) }}"
  39.                                 {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  40.                                     src: asset(vehicle_image_url(img))
  41.                                 }) }} width="400">
  42.                         {#
  43.                         <div class="gallery__favorite">
  44.                             <i class="icon icon-heart"></i>
  45.                         </div>
  46.                         #}
  47.                     </a>
  48.                 {% else %}
  49.                     <a {% if loop.index > 5 %}  style="display: none" {% endif %}
  50.                             class="gallery__item   {% if loop.index == 5 %}  gallery__item--hidden-sm  {% endif %} "
  51.                             href="{{ asset(vehicle_image_url(img)) }}" title="{{ vehicle_image_alt(img) }}" data-gallery-index="{{ loop.index0 }}">
  52.                         <img src="{{ asset(vehicle_image_url(img)) }}"
  53.                              alt="{{ vehicle_image_alt(img) }}"
  54.                                 {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  55.                                     src: asset(vehicle_image_url(img))
  56.                                 }) }} width="200"> </a>
  57.                 {% endif %}
  59.             {% endfor %}
  60.             {% if vehicle.vehicleImages|length > 5 %}
  61.                 <div class="gallery__show" data-gallery-open-all role="button" tabindex="0" aria-label="Zobrazit všechny fotografie">
  62.                     <i class="icon icon-camera"></i>
  63.                     +{{ vehicle.vehicleImages|length - 5 }}
  64.                 </div>
  65.             {% endif %}
  66.         </section>
  68.             <div class="vehicle-gallery-v2" data-vehicle-gallery-v2 aria-hidden="true">
  69.                 <div class="vehicle-gallery-v2__backdrop"></div>
  71.                 <div class="vehicle-gallery-v2__stage" role="dialog" aria-modal="true" aria-label="Fotogalerie vozidla">
  72.                     <div class="vehicle-gallery-v2__topbar">
  73.                         <div class="vehicle-gallery-v2__counter" data-gallery-counter aria-live="polite">1 / {{ vehicle.vehicleImages|length }}</div>
  75.                         <div class="vehicle-gallery-v2__actions">
  76.                             <button type="button" class="vehicle-gallery-v2__icon" data-gallery-fullscreen aria-label="Celá obrazovka" title="Celá obrazovka">
  77.                                 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 3H3v5M16 3h5v5M3 16v5h5M21 16v5h-5"/></svg>
  78.                             </button>
  79.                             <button type="button" class="vehicle-gallery-v2__icon" data-gallery-thumbnails aria-label="Zobrazit miniatury" title="Miniatury">
  80.                                 <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
  81.                             </button>
  82.                             <button type="button" class="vehicle-gallery-v2__icon vehicle-gallery-v2__zoom" data-gallery-zoom aria-label="Přiblížit fotografii" title="Zoom">
  83.                                 <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M15.5 15.5 21 21M10.5 7v7M7 10.5h7"/></svg>
  84.                             </button>
  85.                             <button type="button" class="vehicle-gallery-v2__icon" data-gallery-close aria-label="Zavřít fotogalerii" title="Zavřít">
  86.                                 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5l14 14M19 5 5 19"/></svg>
  87.                             </button>
  88.                         </div>
  89.                     </div>
  91.                     <button type="button" class="vehicle-gallery-v2__arrow vehicle-gallery-v2__arrow--prev" data-gallery-prev aria-label="Předchozí fotografie">
  92.                         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 4-8 8 8 8"/></svg>
  93.                     </button>
  95.                     <div class="vehicle-gallery-v2__image-wrap" data-gallery-image-wrap>
  96.                         <img class="vehicle-gallery-v2__image" data-gallery-image src="" alt="">
  97.                     </div>
  99.                     <button type="button" class="vehicle-gallery-v2__arrow vehicle-gallery-v2__arrow--next" data-gallery-next aria-label="Další fotografie">
  100.                         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 4 8 8-8 8"/></svg>
  101.                     </button>
  103.                     <div class="vehicle-gallery-v2__hint">← → procházet · ESC zavřít</div>
  105.                     <aside class="vehicle-gallery-v2__thumbs" data-gallery-thumbs-panel aria-hidden="true">
  106.                         <div class="vehicle-gallery-v2__thumbs-head">
  107.                             <strong>Všechny fotografie</strong>
  108.                             <button type="button" class="vehicle-gallery-v2__thumbs-close" data-gallery-thumbs-close aria-label="Zavřít miniatury">×</button>
  109.                         </div>
  110.                         <div class="vehicle-gallery-v2__thumbs-grid" data-gallery-thumbs-grid>
  111.                             {% for img in vehicle.vehicleImages %}
  112.                                 <button type="button" class="vehicle-gallery-v2__thumb" data-gallery-thumb="{{ loop.index0 }}" aria-label="Zobrazit fotografii {{ loop.index }}">
  113.                                     <img src="{{ asset(vehicle_image_url(img)) }}" alt="{{ vehicle_image_alt(img) }}" loading="lazy">
  114.                                     <span>{{ loop.index }}</span>
  115.                                 </button>
  116.                             {% endfor %}
  117.                         </div>
  118.                     </aside>
  120.                     <div class="vehicle-gallery-v2__sources" hidden>
  121.                         {% for img in vehicle.vehicleImages %}
  122.                             <span data-gallery-source="{{ loop.index0 }}" data-src="{{ asset(vehicle_image_url(img)) }}" data-alt="{{ vehicle_image_alt(img)|e('html_attr') }}"></span>
  123.                         {% endfor %}
  124.                     </div>
  125.                 </div>
  126.             </div>
  127.     </section>
  129.     <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" aria-label="image gallery"
  130.          aria-modal="true" role="dialog">
  131.         <div class="slides" aria-live="polite"></div>
  132.         <a class="prev" aria-controls="blueimp-gallery" aria-label="previous slide" aria-keyshortcuts="ArrowLeft"></a>
  133.         <a class="next" aria-controls="blueimp-gallery" aria-label="next slide" aria-keyshortcuts="ArrowRight"></a>
  134.         <a class="close" aria-controls="blueimp-gallery" aria-label="close" aria-keyshortcuts="Escape"></a>
  136.     </div>
  141.     <section class="grid grid--gap40 grid--row-gap20 grid--padding-top0">
  142.         <div>
  143.             <section class="detail">
  144.                 <h1 class="margin-bottom-0">{{ vehicle_seo_h1(vehicle) }}</h1>
  145.                 <div class="detail__price">
  146.                     {{ vehicle.price ? vehicle.price|number_format(0, null, ' ')~' Kč' : 'dohodou' }}
  147.                     {% if vehicle.vat %}
  148.                         <div class="detail__price-label">Odpočet DPH možný</div>
  149.                     {% endif %}
  150.                 </div>
  151.                 <div class="detail__info">
  152.                     <div class="detail__info-item">
  153.                         Rok výroby
  154.                         <strong class="detail__info-strong">
  155.                             <i class="icon icon-calendar"></i>
  156.                             {{ vehicle.madeDate ? vehicle.madeDate|slice(0,4) : 'neuvedeno' }}
  157.                         </strong>
  158.                     </div>
  159.                     <div class="detail__info-item">
  160.                         Tachometr
  161.                         <strong class="detail__info-strong">
  162.                             <i class="icon icon-tachometer"></i>
  163.                             {{ vehicle.mileage ? vehicle.mileage|number_format(null, ' ', ' ') ~' '~vehicle.mileageUnit  : 'neuvedeno' }}
  164.                         </strong>
  165.                     </div>
  166.                     <div class="detail__info-item">
  167.                         Palivo
  168.                         <strong class="detail__info-strong">
  169.                             <i class="icon icon-gas"></i>
  170.                             {{ vehicle.fuel ? vehicle.fuel.name : 'neuvedeno' }}
  171.                         </strong>
  172.                     </div>
  173.                     <div class="detail__info-item">
  174.                         Převodovka
  175.                         <strong class="detail__info-strong">
  176.                             <i class="icon icon-settings"></i>
  177.                             {{ vehicle.gearbox  ?  vehicle.gearbox|trans  : 'neuvedeno' }}
  178.                         </strong>
  179.                     </div>
  180.                     <div class="detail__info-item">
  181.                         Výkon
  182.                         <strong class="detail__info-strong">
  183.                             <i class="icon icon-power"></i>
  184.                             {{ vehicle.enginePower ? vehicle.enginePower ~' kW' : 'neuvedeno' }}
  185.                         </strong>
  186.                     </div>
  187.                     <div class="detail__info-item">
  188.                         Karoserie
  189.                         <strong class="detail__info-strong">
  190.                             <i class="icon icon-car"></i>
  191.                             {{ vehicle.body ? vehicle.body.name : 'neuvedeno' }}
  192.                         </strong>
  193.                     </div>
  194.                 </div>
  195.                 <h2>Popis</h2>
  197.                 <div class="detail__more js-detail__more">
  198.                     <div class="detail__more-content js-detail__more-content">
  199.                         <p> {{ vehicle.note }} </p>
  200.                     </div>
  201.                     <div class="detail__more-control">
  202.                         <button class="button detail__more-toggler js-detail__more-toggler" type="button">
  203.                             <span class="detail__more-toggler-show">Zobrazit více</span>
  204.                             <span class="detail__more-toggler-hide">Zobrazit méně</span>
  205.                         </button>
  206.                     </div>
  207.                 </div>
  209.                 <h2>Informace o vozu</h2>
  211.                 <div class="detail__columns detail__hidden--mobile">
  212.                     <table>
  213.                         <tbody>
  214.                         <tr>
  215.                             <th>Prodejní cena</th>
  216.                             <td> {{ vehicle.price ? vehicle.price|number_format(0, null, ' ')~' Kč' : 'dohodou' }}</td>
  217.                         </tr>
  218.                         {% if  vehicle.vat %}
  219.                             <tr>
  220.                                 <th> Cena bez DPH</th>
  221.                                 <td>
  222.                                     {% if  vehicle.price %}
  223.                                         {{ (vehicle.price / 1.21)|number_format(0, null, ' ') }}  Kč
  224.                                     {% else %}
  225.                                         neuvedeno
  226.                                     {% endif %} </td>
  227.                             </tr>
  228.                         {% endif %}
  229.                         <tr>
  230.                             <th>Odpočet DPH</th>
  231.                             <td>{{ vehicle.vat ? 'ano' : 'ne' }} </td>
  232.                         </tr>
  233.                         <tr>
  234.                             <th> VIN</th>
  235.                             <td> {{ vehicle.vin ? vehicle.vin : 'neuvedeno' }}</td>
  236.                         </tr>
  237.                         {% if vehicle.dealer.checkVin %}
  238.                             <tr>
  239.                                 <th>Historie</th>
  240.                                 <td>
  241.                                     {% if vehicle.vin %}
  242.                                         <a target="_blank"
  243.                                            href="https://cz.cebia.com/?utm_source=affilbox&utm_medium=affiliate&utm_campaign=Autanet_2013&a_box=j49grgww&vin={{ vehicle.vin|url_encode }}">
  244.                                             Zobrazit historii vozu
  245.                                         </a>
  246.                                     {% else %}
  247.                                         nelze ověřit bez VIN
  248.                                     {% endif %}
  249.                                 </td>
  250.                             </tr>
  251.                         {% endif %}
  252.                         <tr>
  253.                             <th>Tachometr</th>
  254.                             <td>  {{ vehicle.mileage ? vehicle.mileage~' '~vehicle.mileageUnit : 'neuvedeno' }}  </td>
  255.                         </tr>
  256.                         <tr>
  257.                             <th>Druh paliva</th>
  258.                             <td>          {{ vehicle.fuel ? vehicle.fuel.name : 'neuvedeno' }}</td>
  259.                         </tr>
  260.                         <tr>
  261.                             <th>Objem</th>
  262.                             <td>
  263.                                 {{ vehicle.engineVolume ? vehicle.engineVolume~' ccm'  : 'neuvedeno' }} </td>
  264.                         </tr>
  265.                         </tbody>
  266.                     </table>
  267.                     <table>
  268.                         <tbody>
  269.                         <tr>
  270.                             <th>Karoserie</th>
  271.                             <td>  {{ vehicle.body  ? vehicle.body.name   : 'neuvedeno' }}</td>
  272.                         </tr>
  273.                         <tr>
  274.                             <th>Počet dveří</th>
  275.                             <td> {{ vehicle.doors  ? vehicle.doors  : 'neuvedeno' }}</td>
  276.                         </tr>
  277.                         <tr>
  278.                             <th>Počet míst</th>
  279.                             <td>   {{ vehicle.places  ? vehicle.places  : 'neuvedeno' }} </td>
  280.                         </tr>
  281.                         <tr>
  282.                             <th>Barva</th>
  283.                             <td>{{ vehicle.color.name }}   </td>
  284.                         </tr>
  285.                         <tr>
  286.                             <th>STK {% if vehicle.stkTo != 1 %}{{ vehicle.stkTo }}{% endif %}</th>
  287.                             <td>{% if vehicle.stkTo == 1 %}neuvedeno{% else %}{{ vehicle.stkTo ? vehicle.stkTo|slice(4,6)~'/'~vehicle.stkTo|slice(0,4)  : 'neuvedeno' }}{% endif %}  </td>
  288.                         </tr>
  289.                         <tr>
  290.                             <th>Země původu</th>
  291.                             <td>{{ vehicle.state ? vehicle.state : 'neuvedeno' }}  </td>
  292.                         </tr>
  293.                         <tr>
  294.                             <th>První majitel</th>
  295.                             <td>{{ vehicle.firstOwner ? 'ano' : 'ne' }}</td>
  296.                         </tr>
  297.                         </tbody>
  298.                     </table>
  299.                 </div>
  300.                 <div class="detail__hidden--desktop">
  301.                     <table>
  302.                         <tbody>
  303.                         <tr>
  304.                             <th>Prodejní cena</th>
  305.                             <td> {{ vehicle.price ? vehicle.price|number_format(0, null, ' ')~' Kč' : 'neuvedeno' }}</td>
  306.                         </tr>
  307.                         {% if  vehicle.vat %}
  308.                             <tr>
  309.                                 <th> Cena bez DPH</th>
  310.                                 <td>
  311.                                     {% if  vehicle.price %}
  312.                                         {{ (vehicle.price / 1.21)|number_format(0, null, ' ') }}  Kč
  313.                                     {% else %}
  314.                                         neuvedeno
  315.                                     {% endif %} </td>
  316.                             </tr>
  317.                         {% endif %}
  318.                         <tr>
  319.                             <th>Odpočet DPH</th>
  320.                             <td>{{ vehicle.vat ? 'ano' : 'ne' }} </td>
  321.                         </tr>
  322.                         <tr>
  323.                             <th> VIN</th>
  324.                             <td> {{ vehicle.vin ? vehicle.vin : 'neuvedeno' }}</td>
  325.                         </tr>
  326.                         {% if vehicle.dealer.checkVin %}
  327.                             <tr>
  328.                                 <th>Historie</th>
  329.                                 <td>
  330.                                     {% if vehicle.vin %}
  331.                                         <a target="_blank"
  332.                                            href="https://cz.cebia.com/?utm_source=affilbox&utm_medium=affiliate&utm_campaign=Autanet_2013&a_box=j49grgww&vin={{ vehicle.vin|url_encode }}">
  333.                                             Zobrazit historii vozu
  334.                                         </a>
  335.                                     {% else %}
  336.                                         nelze ověřit bez VIN
  337.                                     {% endif %}
  338.                                 </td>
  339.                             </tr>
  340.                         {% endif %}
  341.                         <tr>
  342.                             <th>Tachometr</th>
  343.                             <td>  {{ vehicle.mileage ? vehicle.mileage~' '~vehicle.mileageUnit : 'neuvedeno' }}  </td>
  344.                         </tr>
  345.                         <tr>
  346.                             <th>Druh paliva</th>
  347.                             <td>          {{ vehicle.fuel ? vehicle.fuel.name : 'neuvedeno' }}</td>
  348.                         </tr>
  349.                         <tr>
  350.                             <th>Objem</th>
  351.                             <td>
  352.                                 {{ vehicle.engineVolume ? vehicle.engineVolume~' ccm'  : 'neuvedeno' }} </td>
  353.                         </tr>
  355.                         <tr>
  356.                             <th>Karoserie</th>
  357.                             <td>  {{ vehicle.body  ? vehicle.body.name   : 'neuvedeno' }}</td>
  358.                         </tr>
  359.                         <tr>
  360.                             <th>Počet dveří</th>
  361.                             <td> {{ vehicle.doors  ? vehicle.doors  : 'neuvedeno' }}</td>
  362.                         </tr>
  363.                         <tr>
  364.                             <th>Počet míst</th>
  365.                             <td>   {{ vehicle.places  ? vehicle.places  : 'neuvedeno' }} </td>
  366.                         </tr>
  367.                         <tr>
  368.                             <th>Barva</th>
  369.                             <td>{{ vehicle.color.name }}   </td>
  370.                         </tr>
  371.                         <tr>
  372.                             <th>STK {% if vehicle.stkTo != 1 %}{{ vehicle.stkTo }}{% endif %}</th>
  373.                             <td>{% if vehicle.stkTo == 1 %}neuvedeno{% else %}{{ vehicle.stkTo ? vehicle.stkTo|slice(4,6)~'/'~vehicle.stkTo|slice(0,4)  : 'neuvedeno' }}{% endif %}  </td>
  374.                         </tr>
  375.                         <tr>
  376.                             <th>Země původu</th>
  377.                             <td>{{ vehicle.state ? vehicle.state : 'neuvedeno' }}  </td>
  378.                         </tr>
  379.                         <tr>
  380.                             <th>První majitel</th>
  381.                             <td>{{ vehicle.firstOwner ? 'ano' : 'ne' }}</td>
  382.                         </tr>
  383.                         </tbody>
  384.                     </table>
  385.                 </div>
  388.                 <h2>Výbava vozu</h2>
  390.                 <div class="detail__more js-detail__more">
  391.                     <div class="detail__more-content js-detail__more-content">
  392.                         <div class="detail__columns">
  393.                             <ul>
  394.                                 {% for e in vehicle.equipments %}
  395.                                 <li>{{ e.name }}</li>
  396.                                 {% if (vehicle.equipments|length / 2)|round == loop.index %}
  397.                             </ul>
  398.                             <ul>
  399.                                 {% endif %}
  400.                                 {% endfor %}
  401.                             </ul>
  402.                         </div>
  403.                     </div>
  404.                     <div class="detail__more-control">
  405.                         <button class="button detail__more-toggler js-detail__more-toggler" type="button">
  406.                             <span class="detail__more-toggler-show">Zobrazit více</span>
  407.                             <span class="detail__more-toggler-hide">Zobrazit méně</span>
  408.                         </button>
  409.                     </div>
  410.                 </div>
  412.             </section>
  414.             <!-- Mobile contact section -->
  415.             <div class="dealer dealer--mobile" style="display: none;">
  416.                 <h2>Kontakt na prodejce</h2>
  417.                 {% if not vehicle.dealer.basicAdvertising %}
  418.                     <figure class="dealer__logo">
  419.                         {% if vehicle.dealer.logo and autanetPartner %}
  420.                             <img
  421.                                     src="{{ asset('img-dealer/')~vehicle.dealer.logo }}"
  422.                                     {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  423.                                         src: asset('img-dealer/')~vehicle.dealer.logo
  424.                                     }) }}
  425.                                     width="170"
  426.                                     data-autanet-partner-logo-l04
  427.                                     data-autanet-partner-id="{{ autanetPartner.id }}"
  428.                                     data-dealer-id="{{ vehicle.dealer.id }}"
  429.                             >
  430.                         {% endif %}
  431.                     </figure>
  432.                 {% endif %}
  433.                 <h3>{{ vehicle.dealer.name }}</h3>
  434.                 <p>{{ vehicle.dealer.street }}, {{ vehicle.dealer.city }}<br>
  435.                     {{ vehicle.dealer.district.name }}</p>
  436.                 <a class="dealer__link"
  437.                    href="https://www.google.com/maps/search/?api=1&query={{ vehicle.dealer.lat }},{{ vehicle.dealer.lng }}"
  438.                    target="_blank">
  439.                     <i class="icon icon-map"></i>
  440.                     Zobrazit na mapě</a>
  441.                 <div class="dealer__opening-hours">
  442.                     <h4 class="detail__opening-hours-heading">
  443.                         <i class="icon icon-hours"></i>
  444.                         Provozní doba
  445.                     </h4>
  446.                     <div class="dealer__opening">
  447.                         {% for t in  openTime %}
  448.                             <div>{{ t.day.value }}</div>
  449.                             <div>{{ t.description }}</div>
  450.                         {% endfor %}
  451.                     </div>
  452.                 </div>
  453.                 <a class="dealer__button dealer__button--green js-modal-show" href="#modal--call">
  454.                     <i class="icon icon-phone"></i>
  455.                     Zavolat prodejci</a>
  456.                 <a class="dealer__button js-modal-show" href="#modal--write">
  457.                     <i class="icon icon-email"></i>
  458.                     Napsat prodejci
  459.                 </a>
  460.             </div>
  462.             {% if vehicleOthers|length >  0 %}
  463.                 <h4 class="detail__dealer-vehicles-heading">Další inzeráty prodejce</h4>
  465.                 {% for v in vehicleOthers %}
  466.                     {% include 'vehicle/_vehicle.html.twig' with { vehicle: v } %}
  468.                     {% if loop.index == 1 %}
  469.                         <div id="banner-mobile-container" class="banner-mobile" data-autanet-partner-banner-placement="B06"></div>
  470.                     {% endif %}
  472.                     {% if loop.index == 2 %}
  473.                         <div id="adform_squarem"></div>
  474.                     {% endif %}
  476.                     {% if loop.index == 8 %}
  477.                         <div id="adform_squarem2"></div>
  478.                     {% endif %}
  480.                 {% endfor %}
  482.             {% endif %}
  484.             {% if not vehicle.dealer.basicAdvertising %}
  485.                 <footer class="grid__buttons">
  486.                     <a class="button" href="{{ path('page_dealer_vehicle', { url: vehicle.dealer.url }) }}">
  487.                         Zobrazit všechny inzeráty prodejce
  488.                         <i class="icon icon-chevron-right"></i>
  489.                     </a>
  490.                 </footer>
  491.             {% endif %}
  493.             <hr>
  494.         </div>
  495.         <div>
  496.             <div class="grid__buttons">
  497.                 {#
  498.                 <a class="button" href="">
  499.                     Přidat k oblíbeným
  500.                     <i class="icon icon-heart"></i>
  501.                 </a>
  502.                 #}
  504.                 <a class="button js-modal-show" href="#modal--share">
  505.                     Sdílet inzerát
  506.                     <i class="icon icon-forward"></i>
  507.                 </a>
  509.             </div>
  511.             <div class="dealer">
  512.                 <h2>Kontakt na prodejce</h2>
  513.                 {% if not vehicle.dealer.basicAdvertising %}
  514.                     <figure class="dealer__logo">
  515.                         {% if vehicle.dealer.logo and autanetPartner %}
  516.                             <img
  517.                                     src="{{ asset('img-dealer/')~vehicle.dealer.logo }}"
  518.                                     {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  519.                                         src: asset('img-dealer/')~vehicle.dealer.logo
  520.                                     }) }}
  521.                                     width="170"
  522.                                     data-autanet-partner-logo-l04
  523.                                     data-autanet-partner-id="{{ autanetPartner.id }}"
  524.                                     data-dealer-id="{{ vehicle.dealer.id }}"
  525.                             >
  526.                         {% endif %}
  527.                     </figure>
  528.                 {% endif %}
  529.                 <h3>{{ vehicle.dealer.name }}</h3>
  530.                 <p>{{ vehicle.dealer.street }}, {{ vehicle.dealer.city }}<br>
  531.                     {{ vehicle.dealer.district.name }}</p>
  532.                 <a class="dealer__link"
  533.                    href="https://www.google.com/maps/search/?api=1&query={{ vehicle.dealer.lat }},{{ vehicle.dealer.lng }}"
  534.                    target="_blank">
  535.                     <i class="icon icon-map"></i>
  536.                     Zobrazit na mapě</a>
  537.                 <div class="dealer__opening-hours">
  538.                     <h4 class="detail__opening-hours-heading">
  539.                         <i class="icon icon-hours"></i>
  540.                         Provozní doba
  541.                     </h4>
  542.                     <div class="dealer__opening">
  543.                         {% for t in  openTime %}
  544.                             <div>{{ t.day.value }}</div>
  545.                             <div>{{ t.description }}</div>
  546.                         {% endfor %}
  547.                     </div>
  548.                 </div>
  549.                 <a class="dealer__button dealer__button--green js-modal-show" href="#modal--call">
  550.                     <i class="icon icon-phone"></i>
  551.                     Zavolat prodejci</a>
  552.                 <a class="dealer__button js-modal-show" href="#modal--write">
  553.                     <i class="icon icon-email"></i>
  554.                     Napsat prodejci
  555.                 </a>
  556.             </div>
  558.             <div id="banner-container" class="banner" data-autanet-partner-banner-placement="B06"></div>
  559.             <div id="adform_halfpage"></div>
  561.         </div>
  563.     </section>
  566.     <div class="mobile-buttons">
  567.         <a class="mobile-buttons__item mobile-buttons__item--green js-modal-show" href="#modal--call">
  568.             <i class="icon icon-phone"></i>
  569.             Zavolat</a>
  570.         </a>
  571.         <a class="mobile-buttons__item js-modal-show" href="#modal--write">
  572.             <i class="icon icon-email"></i>
  573.             Napsat
  574.         </a>
  575.     </div>
  579.     <div class="modal" id="modal--share">
  580.         <div class="modal__overlay js-modal-close"></div>
  581.         <article class="modal__body">
  582.             <button class="modal__close js-modal-close" type="button"></button>
  583.             <div class="modal__header">
  584.                 <h2>Sdílet inzerci</h2>
  585.             </div>
  588.             <div class="share">
  589.                 <a target="_blank" class="share__item"
  590.                    href="https://www.facebook.com/sharer/sharer.php?u={{ app.request.uri }}">
  591.                     <img src="{{ asset('img/share__icon--facebook.svg') }}" alt="">
  592.                     Facebook
  593.                 </a>
  595.                 <a target="_blank" class="share__item" href="">
  596.                     <img src="{{ asset('img/share__icon--messenger.svg') }}"
  597.                          alt="fb-messenger://share/?link={{ app.request.uri }}">
  598.                     Messenger
  599.                 </a>
  602.                 <a target="_blank" class="share__item" href="whatsapp://send?text={{ app.request.uri }}">
  603.                     <img src="{{ asset('img/share__icon--whatsapp.svg') }}" alt="">
  604.                     Whatsapp
  605.                 </a>
  606.                 <a target="_blank" class="share__item"
  607.                    href="https://twitter.com/intent/tweet?url={{ app.request.uri }}&text={{ vehicle_clean_name(vehicle) }} - {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}">
  608.                     <img src="{{ asset('img/share__icon--twitter.svg') }}" alt="">
  609.                     Twitter
  610.                 </a>
  611.                 <a target="_blank" class="share__item"
  612.                    href="mailto:?subject={{ vehicle_clean_name(vehicle) }} - {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}&amp;body=Podívej se na {{ app.request.uri }}">
  613.                     <img src="{{ asset('img/share__icon--envelope.svg') }}" alt="">
  614.                     E-mail
  615.                 </a>
  618.             </div>
  619.             <footer class="modal__footer">
  620.                 <button class="modal__link js-modal-close" type="button">zavřít okno</button>
  621.             </footer>
  622.         </article>
  623.     </div>
  625.     <div class="modal" id="modal--call">
  626.         <div class="modal__overlay js-modal-close"></div>
  627.         <article class="modal__body">
  628.             <button class="modal__close js-modal-close" type="button"></button>
  629.             <div class="modal__header">
  630.                 <h2>Zavolat prodejci</h2>
  631.             </div>
  632.             <div class="share">
  633.                 {% for p in  vehicle.dealer.dealerPhones %}
  634.                     <a class="share__item" href="tel:{{ p.name }}">
  635.                         <img src="{{ asset('img/share__icon--phone.svg') }}" alt="telefon">
  636.                         {{ p.name }}
  637.                     </a>
  638.                 {% endfor %}
  639.             </div>
  640.             <footer class="modal__footer">
  641.                 <button class="modal__link js-modal-close" type="button">zavřít okno</button>
  642.             </footer>
  643.         </article>
  644.     </div>
  646.     <div class="modal" id="modal--write">
  647.         <div class="modal__overlay js-modal-close"></div>
  648.         <article class="modal__body modal__body--large">
  649.             <button class="modal__close js-modal-close" type="button"></button>
  650.             <div class="modal__header">
  651.                 <h2>Napsat prodejci</h2>
  652.             </div>
  653.             <section>
  654.                 <article>
  655.                     <form class="form">
  658.                         <input type="hidden" value="{{ vehicle.id }}" name="vehicleId">
  660.                         <div class="form__group form__group--strong">
  661.                             <input placeholder="Vaše jméno" name="name" required>
  662.                         </div>
  663.                         <div class="form__group form__group--strong">
  664.                             <input type="email" placeholder="Váš e-mail" name="email" required>
  665.                         </div>
  666.                         <div class="form__group form__group--strong">
  667.                             <input type="tel" placeholder="Vaše telefonní číslo" name="phone" required>
  668.                         </div>
  669.                         <div class="form__group form__group--strong">
  670.                 <textarea class="textarea_changer_target" placeholder="Vaše zpráva" rows="5" name="message"
  671.                           data-variants='{
  672.                           "1":"Dobrý den, mám zájem o vaši nabídku „{{ vehicle_clean_name(vehicle) }} - Rok {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}". Můžete mi prosím zavolat? Děkuji",
  673.                           "2":"Dobrý den, je vozidlo „{{ vehicle_clean_name(vehicle) }} - Rok {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}" stále k dispozici? Kontaktujte mě prosím. Děkuji.",
  674.                           "3":"Dobrý den, mám vážný zájem o vozidlo „{{ vehicle_clean_name(vehicle) }} - Rok {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}". Je možné jej zarezervovat? Děkuji.",
  675.                           "4":"Dobrý den, mám vážný zájem o vozidlo „{{ vehicle_clean_name(vehicle) }} - Rok {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}". Můžeme se dohodnout na nižší ceně? Je to reálné? Děkuji za odpověď."}'>
  676. Dobrý den, mám zájem o vaši nabídku „{{ vehicle_clean_name(vehicle) }} - Rok {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}". Můžete mi prosím zavolat? Děkuji
  677.                 </textarea>
  678.                         </div>
  679.                         <p class="form__info">Kliknutím na tlačítko Odeslat zprávu vyjadřujete svůj souhlas se zásadami
  680.                             <a target="_blank" href="/ochrana-osobnich-udaju">Ochrany osobních údajů</a>.</p>
  681.                         <button class="form__submit form__submit--block" type="submit">
  682.                             <i class="icon icon-email"></i>
  683.                             Odeslat zprávu
  684.                         </button>
  685.                     </form>
  687.                 </article>
  688.             </section>
  690.         </article>
  691.     </div>
  693.     <script>
  694.         const forms = document.querySelectorAll('form')
  695.         forms.forEach((form) => {
  696.             form.addEventListener('submit', (e) => {
  697.                 e.preventDefault()
  700.                 let formData = new FormData(form);
  702.                 grecaptcha.ready(function () {
  703.                     grecaptcha.execute('{{ google_recaptcha_site_key }}', {action: 'submit'}).then(function (token) {
  705.                         formData.append('token', token)
  707.                         // Připojit anonymní analytickou identitu, pokud je již dostupná.
  708.                         // Odeslání skutečné poptávky na Analytics nikdy nečeká.
  709.                         if (window.AutanetAnalytics && typeof window.AutanetAnalytics.getIdentity === 'function') {
  710.                             const analyticsIdentity = window.AutanetAnalytics.getIdentity();
  712.                             if (analyticsIdentity && analyticsIdentity.visitorKey && analyticsIdentity.sessionKey && analyticsIdentity.pageviewKey) {
  713.                                 formData.append('visitor_key', analyticsIdentity.visitorKey);
  714.                                 formData.append('session_key', analyticsIdentity.sessionKey);
  715.                                 formData.append('pageview_key', analyticsIdentity.pageviewKey);
  716.                             }
  717.                         }
  719.                         const data = new URLSearchParams(formData);
  721.                         (async () => {
  722.                             const rawResponse = await fetch('{{ path('app_vehicle_form_new') }}', {
  723.                                 method: 'POST',
  724.                                 body: data
  725.                             });
  726.                             const content = await rawResponse.json();
  727.                             const button = form.querySelector('button')
  729.                             if (content.error === false) {
  730.                                 form.reset()
  731.                                 button.innerText = 'Odesláno, děkujeme za poptávku.'
  732.                                 button.classList.add("back-green")
  733.                             } else {
  734.                                 button.innerText = content.error
  735.                                 button.classList.add("back-red")
  736.                             }
  738.                         })();
  740.                     });
  741.                 });
  744.             })
  745.         })
  747.     </script>
  750.     {#
  751.     <div class="modal" id="modal--map">
  752.         <div class="modal__overlay js-modal-close"></div>
  753.         <article class="modal__body" style="padding: 5px; max-width: none; height: 75%;">
  754.             <iframe
  755.                     src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1318529.0090685813!2d14.353945871812089!3d49.80013041918973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b948fd7dd8243%3A0xf8661c75d3db586f!2sCzechia!5e0!3m2!1sen!2ses!4v1677857037662!5m2!1sen!2ses"
  756.                     style="border:0; width: 100%; height: 100%;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  757.         </article>
  758.     </div>
  759.     #}
  762.     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  764.     <script>
  767.         $(".js-select2").select2({
  768.             language: "cs",
  769.             minimumResultsForSearch: -1,
  770.             width: "100%",
  771.         });
  773.         function handleMobileContact() {
  774.             const isMobile = window.innerWidth <= 768;
  775.             const mobileContact = document.querySelector('.dealer--mobile');
  776.             const desktopContact = document.querySelector('.dealer:not(.dealer--mobile)');
  778.             if (isMobile) {
  779.                 mobileContact.style.display = 'block';
  780.                 desktopContact.style.display = 'none';
  781.             } else {
  782.                 mobileContact.style.display = 'none';
  783.                 desktopContact.style.display = 'block';
  784.             }
  785.         }
  787.         handleMobileContact();
  788.         window.addEventListener('resize', handleMobileContact);
  790.         // === AUTANET PARTNER L04 LOGO IMPRESSION ===
  792.         const autanetPartnerL04Logos = document.querySelectorAll('[data-autanet-partner-logo-l04]');
  794.         if (
  795.             autanetPartnerL04Logos.length > 0
  796.             && window.AutanetAnalytics
  797.             && typeof window.AutanetAnalytics.withIdentity === 'function'
  798.             && 'IntersectionObserver' in window
  799.         ) {
  800.             const autanetPartnerL04Tracked = new Set();
  801.             const autanetPartnerL04Timers = new Map();
  803.             const clearAutanetPartnerL04Timer = logo => {
  804.                 const timer = autanetPartnerL04Timers.get(logo);
  806.                 if (timer) {
  807.                     clearTimeout(timer);
  808.                     autanetPartnerL04Timers.delete(logo);
  809.                 }
  810.             };
  812.             const autanetPartnerL04Observer = new IntersectionObserver(entries => {
  813.                 entries.forEach(entry => {
  814.                     const logo = entry.target;
  815.                     const partnerId = logo.dataset.autanetPartnerId;
  816.                     const dealerId = logo.dataset.dealerId;
  818.                     if (!partnerId || autanetPartnerL04Tracked.has(partnerId)) {
  819.                         clearAutanetPartnerL04Timer(logo);
  820.                         return;
  821.                     }
  823.                     if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
  824.                         if (autanetPartnerL04Timers.has(logo)) {
  825.                             return;
  826.                         }
  828.                         const timer = setTimeout(() => {
  829.                             autanetPartnerL04Timers.delete(logo);
  831.                             if (autanetPartnerL04Tracked.has(partnerId)) {
  832.                                 return;
  833.                             }
  835.                             autanetPartnerL04Tracked.add(partnerId);
  837.                             window.AutanetAnalytics.withIdentity(identity => {
  838.                                 if (!identity) {
  839.                                     autanetPartnerL04Tracked.delete(partnerId);
  840.                                     return;
  841.                                 }
  843.                                 const data = new URLSearchParams();
  844.                                 data.append('event_type', 'logo_impression');
  845.                                 data.append('placement', 'L04');
  846.                                 data.append('partner_id', partnerId);
  847.                                 data.append('dealer_id', dealerId);
  848.                                 data.append('vehicle_id', '{{ vehicle.id }}');
  849.                                 data.append('device', window.matchMedia('(max-width: 767px)').matches ? 'mobile' : 'desktop');
  850.                                 data.append('visitor_key', identity.visitorKey);
  851.                                 data.append('session_key', identity.sessionKey);
  852.                                 data.append('pageview_key', identity.pageviewKey);
  854.                                 fetch('{{ path('app_analytics_event') }}', {
  855.                                     method: 'POST',
  856.                                     headers: {
  857.                                         'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  858.                                     },
  859.                                     body: data,
  860.                                     keepalive: true
  861.                                 }).catch(() => {
  862.                                     autanetPartnerL04Tracked.delete(partnerId);
  863.                                 });
  864.                             }, 5000);
  865.                         }, 1000);
  867.                         autanetPartnerL04Timers.set(logo, timer);
  868.                     } else {
  869.                         clearAutanetPartnerL04Timer(logo);
  870.                     }
  871.                 });
  872.             }, {
  873.                 threshold: [0.5]
  874.             });
  876.             autanetPartnerL04Logos.forEach(logo => autanetPartnerL04Observer.observe(logo));
  877.         }
  879.         // === VEHICLE STATISTICS TRACKING ===
  881.         let autanetInitialViewTracked = false;
  883.         // Trackování zobrazení stránky čeká na globální consent/identitu.
  884.         // Pokud identita není do 5 sekund dostupná, původní tracking proběhne bez identity.
  885.         if (window.AutanetAnalytics && typeof window.AutanetAnalytics.withIdentity === 'function') {
  886.             window.AutanetAnalytics.withIdentity(() => {
  887.                 trackInitialVehicleView();
  888.             }, 5000);
  889.         } else {
  890.             trackInitialVehicleView();
  891.         }
  893.         // Trackování "Zavolat prodejci" tlačítek
  894.         document.querySelectorAll('.js-modal-show[href="#modal--call"]').forEach(button => {
  895.             button.addEventListener('click', () => {
  896.                 trackVehicleAction('call_dealer');
  897.             });
  898.         });
  900.         // Trackování "Napsat prodejci" tlačítek
  901.         document.querySelectorAll('.js-modal-show[href="#modal--write"]').forEach(button => {
  902.             button.addEventListener('click', () => {
  903.                 trackVehicleAction('message_dealer');
  904.             });
  905.         });
  907.         // Trackování kliků na tel. čísla
  908.         setTimeout(() => {
  909.             document.querySelectorAll('a[href^="tel:"]').forEach(link => {
  910.                 link.addEventListener('click', () => {
  911.                     trackVehicleAction('phone_click');
  912.                 });
  913.             });
  914.         }, 100);
  916.         function trackInitialVehicleView() {
  917.             if (autanetInitialViewTracked) {
  918.                 return;
  919.             }
  921.             autanetInitialViewTracked = true;
  922.             trackVehicleAction('view');
  923.         }
  925.         function trackVehicleAction(action) {
  926.             const sendTracking = analyticsIdentity => {
  927.                 const formData = new FormData();
  928.                 formData.append('vehicle_id', '{{ vehicle.id }}');
  929.                 formData.append('action', action);
  931.                 if (analyticsIdentity) {
  932.                     formData.append('visitor_key', analyticsIdentity.visitorKey);
  934.                     if (analyticsIdentity.sessionKey) {
  935.                         formData.append('session_key', analyticsIdentity.sessionKey);
  936.                     }
  938.                     formData.append('pageview_key', analyticsIdentity.pageviewKey);
  939.                 }
  941.                 fetch('{{ path('app_vehicle_statistics_track') }}', {
  942.                     method: 'POST',
  943.                     body: formData
  944.                 }).catch(error => {
  945.                     console.log('Tracking error:', error);
  946.                 });
  947.             };
  949.             if (window.AutanetAnalytics && typeof window.AutanetAnalytics.withIdentity === 'function') {
  950.                 window.AutanetAnalytics.withIdentity(sendTracking, 5000);
  951.                 return;
  952.             }
  954.             sendTracking(null);
  955.         }
  956.     </script>
  958. {% endblock %}