bundles/VehicleMarketBundle/Resources/views/Areas/vehicle-detail/view.html.twig line 1

Open in your IDE?
  1. {% set stammdaten = vehicle.getStammdaten.getVehicleBaseData %}
  2. {% set kosten = vehicle.getKosten.getCosts %}
  3. {% set aussen = vehicle.getAussen.getExterieur %}
  4. {% set innen = vehicle.getInnen.getInterieur %}
  5. {% set finanzierung = vehicle.getFinanzierung.getFinancing %}
  6. {% set leasing = vehicle.getLeasing.getleasing %}
  7. {# API-managed vehicles (VehicleIngestBundle) can have NO Leasing/Financing objectbrick at all,
  8.    unlike the legacy CSV import which always scaffolded (empty) bricks. Guard every rate access. #}
  9. {% set hasLeasingRate = leasing is not null and leasing.getMonatlicheRate() %}
  10. {% set hasFinanzierungRate = finanzierung is not null and finanzierung.getMonatlicheRate() %}
  11. {% set technischeDaten = vehicle.getTechnischeDaten.getTechnicalData %}
  12. {% set technischeDatenMore = vehicle.getTechnischeDatenMore.getTechnicalDataMore %}
  13. {% set financingLegalNotice = pimcore_textarea('car-detail-financing-legal-notice').isEmpty() ? '' : pimcore_textarea('car-detail-financing-legal-notice').getData() %}
  14. {% set leasingLegalNotice = pimcore_textarea('car-detail-leasing-legal-notice').isEmpty() ? '' : pimcore_textarea('car-detail-leasing-legal-notice').getData() %}
  15. {% set addressBank = pimcore_textarea('car-detail-address-financing-leasing').isEmpty() ? '' : pimcore_textarea('car-detail-address-financing-leasing').getData() %}
  16. {% set show_car_available_from = pimcore_select('car-detail-available-from').getData() %}
  17. {% set fuelType = technischeDaten.kraftstoffart|trim|lower %}
  18. {% set fuelTypeLabel = fuelType == 'elektro' ? 'Energieverbrauch' : 'Kraftstoffverbrauch' %}
  20. <div class="vehicle-area pt-0 pt-lg-5">
  21.     <div class="row">
  22.         <div class="col-lg-8">
  23.             <div class="slider-container shadow mb-3">
  24.                 {% set car_photos = vehicle.images %}
  25.                 <div class="slider">
  26.                     <div class="slides">
  27.                         {% if stammdaten.getLieferdatum and show_car_available_from %}
  28.                             {% set currentDate = "now"|date('d-m-y') %}
  29.                             {% if stammdaten.getLieferdatum | date('d-m-y')  > currentDate %}
  30.                                 <span
  31.                                     class="notify-badge detail">Verfügbar ab {{ stammdaten.getLieferdatum | date('d.m.y') }}</span>
  32.                             {% endif %}
  33.                         {% endif %}
  34.                         <div class="swiper car-detail-image-swiper">
  35.                             <div class="swiper-wrapper">
  36.                                 {% if car_photos|length != 0 %}
  37.                                     {% for i in 1 .. car_photos|length %}
  38.                                         <img
  39.                                             class="swiper-slide"
  40.                                             src="{{ car_photos[i - 1].thumbnail({'width': 920, 'format': 'jpeg', 'quality': 60,}) }}"
  41.                                             alt="{{ stammdaten.getMarke }} {{ stammdaten.getModellbasis }} (Bild {{ i }}/{{ car_photos|length }})">
  42.                                     {% endfor %}
  43.                                 {% else %}
  44.                                     {% set src = '/Gebrauchte/Bilder/3301020_FBUN2220298_1.jpeg' %}
  45.                                     <img src="{{ src }}" class="w-100 h-auto"
  46.                                          alt="{{ stammdaten.getMarke }} {{ stammdaten.getModellbasis }}">
  47.                                 {% endif %}
  48.                             </div>
  49.                             <div class="swiper-button-next"></div>
  50.                             <div class="swiper-button-prev"></div>
  51.                             <div class="swiper-pagination"></div>
  52.                         </div>
  53.                     </div>
  54.                     <div class="slider-count">
  55.                         <div class="badge bg-dark d-flex align-items-center" style="--bs-bg-opacity: 0.5;">
  56.                             <svg class="me-1" fill="#FFF" viewBox="0 0 16 16" width="14" height="14">
  57.                                 <path
  58.                                     d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z" />
  59.                                 <path
  60.                                     d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" />
  61.                             </svg>
  62.                             <div class="swiper-pagination"></div>
  63.                             <span id="car-detail-selected-image">1</span>/<span>{{ car_photos|length }}</span>
  64.                         </div>
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.             <div class="bg-light shadow px-3 pt-3 pb-4 px-md-5 py-md-4 mb-lg-3 d-lg-none">
  69.                 <div class="row">
  70.                     <div class="col-6">
  71.                         <h2 class="mb-0">{{ stammdaten.getMarke }}</h2>
  72.                         {{ stammdaten.getModellbasis }}
  73.                     </div>
  74.                     <div class="col-6 text-end">
  75.                         <span class="h2 fw-bold">{{ kosten.getPreis|number_format(2, ',', '.') }}&euro;</span>
  76.                         <div class="f-12 d-block small text-muted">
  77.                             {% if stammdaten.getMwst == 0 %}
  78.                                 MwSt. ist ausweisbar
  79.                             {% else %}
  80.                                 MwSt. nicht ausweisbar
  81.                             {% endif %}
  82.                         </div>
  83.                         {% if kosten.rotstiftpreis > kosten.getPreis() %}
  84.                             <div class="mx-auto text-center mt-2">
  85.                                 <span
  86.                                     class="text-decoration-line-through d-block">{{ kosten.rotstiftpreis|number_format(2, ',', '.') }}&euro;</span>
  87.                                 <span class="badge rounded-pill bg-danger">Kürzlich reduziert</span>
  88.                             </div>
  89.                         {% endif %}
  90.                     </div>
  91.                     <div class="col-12 px-4 pt-4 text-center">
  92.                         <button class="btn btn-primary" data-action="initiate-contact">Fahrzeug anfragen</button>
  93.                     </div>
  94.                 </div>
  95.             </div>
  96.             <div class="bg-white shadow p-3 px-md-5 py-md-4 mb-lg-3">
  97.                 <h3 class="fw-bold">Übersicht</h3>
  98.                 <div class="row mx-2 mx-md-4">
  99.                     <div class="col-6 col-md-4 border-bottom mb-3">
  100.                         <small class="text-muted">Modelljahr</small>
  101.                         <p>{{ stammdaten.modelljahr }}</p>
  102.                     </div>
  103.                     <div class="col-6 col-md-4 border-bottom mb-3">
  104.                         <small class="text-muted">Erstzulassung</small>
  105.                         <p>{{ stammdaten.ez }}</p>
  106.                     </div>
  107.                     <div class="col-6 col-md-4 border-bottom mb-3">
  108.                         <small class="text-muted">Kraftstoff</small>
  109.                         <p>{{ technischeDaten.kraftstoffart }}</p>
  110.                     </div>
  111.                     <div class="col-6 col-md-4 border-bottom mb-3">
  112.                         <small class="text-muted">Kilometerstand</small>
  113.                         <p>{{ stammdaten.kilometer|number_format(0, ',', '.') }} km</p>
  114.                     </div>
  115.                     <div class="col-6 col-md-4 border-bottom mb-3">
  116.                         <small class="text-muted">Leistung</small>
  117.                         <p>{{ technischeDaten.leistung }} KW</p>
  118.                     </div>
  119.                     <div class="col-6 col-md-4 border-bottom mb-3">
  120.                         <small class="text-muted">Vorbesitzer</small>
  121.                         <p>{{ stammdaten.vorbesitzer > 0 ? stammdaten.vorbesitzer : '-/-' }}</p>
  122.                     </div>
  123.                     {% if stammdaten.getLieferdatum and show_car_available_from %}
  124.                         {% set currentDate = "now"|date('d-m-y') %}
  125.                         {% if stammdaten.getLieferdatum | date('d-m-y')  > currentDate %}
  126.                             <span
  127.                                 class="notify-badge detail">Verfügbar ab {{ stammdaten.getLieferdatum | date('d.m.y') }}</span>
  128.                         {% endif %}
  129.                     {% endif %}
  130.                     {% if stammdaten.getLieferdatum %}
  131.                         {% set currentDate = "now"|date('d-m-y') %}
  132.                         {% if stammdaten.getLieferdatum | date('d-m-y')  > currentDate %}
  133.                             <div class="col-6 col-md-4 border-bottom mb-3">
  134.                                 <small class="text-muted">Verfügbarkeit</small>
  135.                                 <p>{{ stammdaten.getLieferdatum }}</p>
  136.                             </div>
  137.                         {% else %}
  138.                             <div class="col-6 col-md-4 border-bottom mb-3">
  139.                                 <small class="text-muted">Neufahrzeug</small>
  140.                                 <p>{% if stammdaten.getNeufahrzeug == '0' %} Nein {% else %} Ja {% endif %}</p>
  141.                             </div>
  142.                         {% endif %}
  143.                     {% endif %}
  144.                     <div class="col-6 col-md-4 border-bottom mb-3">
  145.                         <small class="text-muted">Getriebe</small>
  146.                         <p>{{ technischeDaten.getriebeart }}</p>
  147.                     </div>
  148.                     <div class="col-12 col-md-4 border-bottom mb-3">
  149.                         <small class="text-muted">Interne-Nr.</small>
  150.                         <p>{{ stammdaten.internenummer }}</p>
  151.                     </div>
  152.                 </div>
  153.             </div>
  154.             <div class="bg-white shadow p-3 px-md-5 py-md-4 mb-lg-3">
  155.                 <h3 class="mb-5">Fahrzeugspezifikationen</h3>
  156.                 <div class="row mx-2 mx-md-3">
  157.                     {% if technischeDaten.umweltplakette %}
  158.                         <div class="col-6 col-md-3 mb-3">
  159.                             {% set umweltplaketten = {
  160.                                 1 : '-/-' ,
  161.                                 2 : 'Rot',
  162.                                 3 : 'Gelb',
  163.                                 4 : 'Grün'
  164.                             } %}
  165.                             <small class="text-muted">Umweltplakette</small>
  166.                             <p>{{ umweltplaketten[technischeDaten.umweltplakette] }}</p>
  167.                         </div>
  168.                     {% endif %}
  169.                     <div class="col-6 col-md-3 mb-3">
  170.                         <small class="text-muted">Schadstoff</small>
  171.                         <p>Euro {{ technischeDaten.schadstoff }}</p>
  172.                     </div>
  173.                     <div class="col-6 col-md-3 mb-3">
  174.                         {% if fuelType == 'elektro' %}
  175.                             <span class="text-muted">{{ fuelTypeLabel }}
  176.                                 kombiniert*</span>
  177.                             <p>{{ stammdaten.getKombinierterStromverbrauchWltp > 0 ? stammdaten.getKombinierterStromverbrauchWltp|number_format(1, ',') ~ ' kWh/100km' : '-/-' }}</p>
  178.                         {% elseif fuelType == 'hybrid' %}
  179.                             <span class="text-muted">{{ fuelTypeLabel }}
  180.                                 kombiniert*</span>
  181.                             <p>
  182.                                 {{ technischeDaten.gewichteterKombinierterKraftstoffverbrauchWLTP > 0 ? technischeDaten.gewichteterKombinierterKraftstoffverbrauchWLTP ~ ' l/100km' : '-/-' }}
  183.                                 <br>
  184.                             </p>
  185.                         {% else %}
  186.                             <span class="text-muted">{{ fuelTypeLabel }}
  187.                                 kombiniert*</span>
  188.                             <p>{{ technischeDaten.getWLTPKombiniert > 0 ? technischeDaten.getWLTPKombiniert ~ ' l/100km' : '-/-' }}</p>
  189.                         {% endif %}
  190.                     </div>
  191.                     {% if fuelType == 'hybrid' %}
  192.                         <div class="col-6 col-md-3 mb-3">
  193.                             <span class="text-muted">Stromverbrauch
  194.                                 kombiniert*</span>
  195.                             <p>{{ stammdaten.getKombinierterStromverbrauchWltp > 0 ? stammdaten.getKombinierterStromverbrauchWltp|number_format(1, ',') ~ ' kWh/100km' : '-/-' }}</p>
  196.                         </div>
  197.                     {% endif %}
  198.                     {% if fuelType == 'elektro' %}
  199.                         {% if technischeDatenMore and technischeDatenMore.stromverbrauchInnenstadtWLTP > 0 and fuelType == 'elektro' %}
  200.                             <div class="col-6 col-md-3 mb-3">
  201.                             <span class="text-muted">
  202.                                 {{ fuelTypeLabel }}
  203.                                 Innenstadt*</span>
  204.                                 <p>{{ technischeDatenMore.stromverbrauchInnenstadtWLTP > 0 ? technischeDatenMore.stromverbrauchInnenstadtWLTP ~ ' kWh/100km' : '-/-' }} (WLTP)</p>
  205.                             </div>
  206.                         {% endif %}
  207.                         {% if technischeDatenMore and technischeDatenMore.stromverbrauchStadtrandWLTP > 0 and fuelType == 'elektro' %}
  208.                             <div class="col-6 col-md-3 mb-3">
  209.                             <span class="text-muted">
  210.                                 {{ fuelTypeLabel }}
  211.                                 Stadtrand*</span>
  212.                                 <p>{{ technischeDatenMore.stromverbrauchStadtrandWLTP > 0 ? technischeDatenMore.stromverbrauchStadtrandWLTP ~ ' kWh/100km' : '-/-' }} (WLTP)</p>
  213.                             </div>
  214.                         {% endif %}
  215.                         {% if technischeDatenMore and technischeDatenMore.stromverbrauchLandstrasseWLTP > 0 and fuelType == 'elektro' %}
  216.                             <div class="col-6 col-md-3 mb-3">
  217.                             <span class="text-muted">
  218.                                 {{ fuelTypeLabel }}
  219.                                 Landstraße*</span>
  220.                                 <p>{{ technischeDatenMore.stromverbrauchLandstrasseWLTP > 0 ? technischeDatenMore.stromverbrauchLandstrasseWLTP ~ ' kWh/100km' : '-/-' }} (WLTP)</p>
  221.                             </div>
  222.                         {% endif %}
  223.                         {% if technischeDatenMore and technischeDatenMore.stromverbrauchAutobahnWLTP > 0 and fuelType == 'elektro' %}
  224.                             <div class="col-6 col-md-3 mb-3">
  225.                             <span class="text-muted">
  226.                                 {{ fuelTypeLabel }}
  227.                                 Autobahn*</span>
  228.                                 <p>{{ technischeDatenMore.stromverbrauchAutobahnWLTP > 0 ? technischeDatenMore.stromverbrauchAutobahnWLTP ~ ' kWh/100km' : '-/-' }} (WLTP)</p>
  229.                             </div>
  230.                         {% endif %}
  231.                     {% endif %}
  232.                     {% if technischeDaten.wltpKraftstoffInnenstadt > 0 and fuelType != 'elektro' %}
  233.                         <div class="col-6 col-md-3 mb-3">
  234.                             <span class="text-muted">
  235.                                 {{ fuelTypeLabel }}
  236.                                 Innerorts*</span>
  237.                             <p>{{ technischeDaten.wltpKraftstoffInnenstadt > 0 ? technischeDaten.wltpKraftstoffInnenstadt ~ ' l/100km' : '-/-' }}</p>
  238.                         </div>
  239.                     {% endif %}
  240.                     {% if technischeDaten.wltpKraftstoffStadtrand > 0 and fuelType != 'elektro' %}
  241.                         <div class="col-6 col-md-3 mb-3">
  242.                             <span class="text-muted">&Oslash;
  243.                                 {{ fuelTypeLabel }}
  244.                                 Ausserorts*</span>
  245.                             <p>{{ technischeDaten.wltpKraftstoffStadtrand > 0 ? technischeDaten.wltpKraftstoffStadtrand ~ ' l/100km' : '-/-' }}</p>
  246.                         </div>
  247.                     {% endif %}
  248.                     {% if technischeDaten.wltpKraftstoffAutobahn > 0 and fuelType != 'elektro' %}
  249.                         <div class="col-6 col-md-3 mb-3">
  250.                             <span class="text-muted">&Oslash;
  251.                                 {{ fuelTypeLabel }}
  252.                                 Autobahn*</span>
  253.                             <p>{{ technischeDaten.wltpKraftstoffAutobahn > 0 ? technischeDaten.wltpKraftstoffAutobahn ~ ' l/100km' : '-/-' }}</p>
  254.                         </div>
  255.                     {% endif %}
  256.                     {% if technischeDaten.wltpKraftstoffLandstrasse > 0 and fuelType != 'elektro' %}
  257.                         <div class="col-6 col-md-3 mb-3">
  258.                             <span class="text-muted">&Oslash;
  259.                                 {{ fuelTypeLabel }}
  260.                                 Landstraße*</span>
  261.                             <p>{{ technischeDaten.wltpKraftstoffLandstrasse > 0 ? technischeDaten.wltpKraftstoffLandstrasse ~ ' l/100km' : '-/-' }}</p>
  262.                         </div>
  263.                     {% endif %}
  264.                     {% if technischeDaten.kombinierterKraftstoffverbrauchEntlBatterie > 0 and fuelType == 'hybrid' %}
  265.                         <div class="col-6 col-md-3 mb-3">
  266.                             <span class="text-muted">{{ fuelTypeLabel }}
  267.                                 kombiniert bei entladener Batterie*</span>
  268.                             <p>{{ technischeDaten.kombinierterKraftstoffverbrauchEntlBatterie > 0 ? technischeDaten.kombinierterKraftstoffverbrauchEntlBatterie ~ ' l/100km' : '-/-' }}</p>
  269.                         </div>
  270.                     {% endif %}
  271. {#                    {% if technischeDaten.kombinierterKraftstoffverbrauchEntlBatterie > 0 and fuelType == 'hybrid' %}#}
  272. {#                        <div class="col-6 col-md-3 mb-3">#}
  273. {#                            <span class="text-muted">{{ fuelTypeLabel }}#}
  274. {#                                Landstraße bei entladener Batterie*</span>#}
  275. {#                            <p>{{ technischeDaten.kombinierterKraftstoffverbrauchEntlBatterie > 0 ? technischeDaten.kombinierterKraftstoffverbrauchEntlBatterie ~ ' l/100km' : '-/-' }}</p>#}
  276. {#                        </div>#}
  277. {#                    {% endif %}#}
  278.                     <div class="col-6 col-md-3 mb-3">
  279.                         <span class="text-muted">CO₂-Klasse*</span>
  280.                         {%  if fuelType == 'hybrid' %}
  281.                             <p> {{ technischeDaten.energieeffizienzklasseGewichtetKombiniert ? technischeDaten.energieeffizienzklasseGewichtetKombiniert : '' }}</p>
  282.                         {% else %}
  283.                             <p> {{ technischeDaten.energieEffizienzKlasse ? technischeDaten.energieEffizienzKlasse : '' }}</p>
  284.                         {% endif %}
  285.                     </div>
  286.                     {%  if fuelType == 'hybrid' %}
  287.                     <div class="col-6 col-md-3 mb-3">
  288.                         <span class="text-muted">CO₂-Klasse bei entladener Batterie:*</span>
  289.                             <p> {{ technischeDaten.energieeffizienzklasseEntladeneBatterie ? technischeDaten.energieeffizienzklasseEntladeneBatterie : '' }}</p>
  290.                     </div>
  291.                     {% endif %}
  292.                     <div class="col-6 col-md-3 mb-3">
  293.                         <span class="text-muted">&Oslash; CO₂ Emissionen kombiniert*</span>
  294.                         {% if technischeDaten.getEmissionWltp %}
  295.                             <p>{{ fuelType == 'elektro' ? 0 ~ 'g/km' : technischeDaten.getEmissionWltp > 0 ? technischeDaten.getEmissionWltp ~ ' g/km' : '-/-' }}
  296.                                 (WLTP)</p>
  297.                         {% else %}
  298.                             <p>{{ fuelType == 'elektro' ? 0 ~ 'g/km' : technischeDaten.emission > 0 ? technischeDaten.emission ~ ' g/km' : '-/-' }}
  299.                                 (WLTP)</p>
  300.                         {% endif %}
  301.                     </div>
  302.                     {% if fuelType == 'hybrid' %}
  303.                         <div class="col-6 col-md-3 mb-3">
  304.                             <span class="text-muted">&Oslash; CO₂ Emissionen bei entladener Batterie*</span>
  305.                             <p>{{ technischeDaten.emissionenEntladeneBatterie >= 0 ? technischeDaten.emissionenEntladeneBatterie ~ ' g/km' : '-/-' }}</p>
  306.                         </div>
  307.                     {% endif %}
  310.                     {% if (fuelType == 'elektro' or fuelType == 'hybrid') and technischeDaten.batteriekapazitT > 0 %}
  311.                         <div class="col-6 col-md-3 mb-3">
  312.                             <span class="text-muted">Batteriekapazität</span>
  313.                             <p>{{ technischeDaten.batteriekapazitT ~ ' kWh' }}</p>
  314.                         </div>
  315.                     {% endif %}
  316.                     {% if (fuelType == 'elektro' or fuelType == 'hybrid') and technischeDaten.elektromotorReichweiteBeiMinNachWLTP > 0 %}
  317.                         <div class="col-6 col-md-3 mb-3">
  318.                             <span class="text-muted">Elektrische Reichweite kombiniert*</span>
  319.                             <p>{{ technischeDaten.elektromotorReichweiteBeiMinNachWLTP ~ ' km' }}</p>
  320.                         </div>
  321.                     {% endif %}
  324.                     <div class="col-6 col-md-3 mb-3">
  325.                         <small class="text-muted">Türen</small>
  326.                         <p>{{ stammdaten.getTueren() > 0 ? stammdaten.getTueren(): '-/-' }}</p>
  327.                     </div>
  328.                     <div class="col-6 col-md-3 mb-3">
  329.                         <small class="text-muted">Leergewicht</small>
  330.                         <p>{{ technischeDaten.getLeergewicht() > 0 ? technischeDaten.getLeergewicht() ~ ' kg' : '-/-' }}</p>
  331.                     </div>
  332.                     <div class="col-6 col-md-3 mb-3">
  333.                         <small class="text-muted">Heckantrieb</small>
  334.                         <p>{{ technischeDaten.getHeckantrieb() ? 'Ja' : 'Nein' }}</p>
  335.                     </div>
  336.                     <div class="col-6 col-md-3 mb-3">
  337.                         <small class="text-muted">Frontantrieb</small>
  338.                         <p>{{ technischeDaten.getFrontantrieb() ? 'Ja' : 'Nein' }}</p>
  339.                     </div>
  340.                     <div class="col-6 col-md-3 mb-3">
  341.                         <small class="text-muted">Sitze</small>
  342.                         <p>{{ innen.getSitze() > 0 ? innen.getSitze() : '-/-' }}</p>
  343.                     </div>
  344.                 </div>
  345.             </div>
  346.             <div class="bg-white shadow p-3 px-md-5 py-md-4 mb-lg-3">
  347.                 <h3 class="fw-bold">Ausstattung</h3>
  348.                 <details class="mb-2" open>
  349.                     <summary class="border-bottom pb-2">Komfort</summary>
  350.                     <small>
  351.                         <ul>
  352.                             {% if innen.getStandheizung() %}
  353.                                 <li>Standheizung</li>{% endif %}
  354.                             {% if innen.getFensterheber() %}
  355.                                 <li>Fensterheber</li>{% endif %}
  356.                             {% if innen.getTempomat() %}
  357.                                 <li>Tempomat</li>{% endif %}
  358.                             {% if innen.getElektrischeSitzeinstellung() %}
  359.                                 <li>Elektrische Sitzeinstellung</li>{% endif %}
  360.                             {% if innen.getHeadUpDisplay() %}
  361.                                 <li>Head-Up Display</li>{% endif %}
  362.                             {% if innen.getMultifunktionslenkrad() %}
  363.                                 <li>Multifunktionslenkrad</li>{% endif %}
  364.                             {% if innen.getLichtsensor() %}
  365.                                 <li>Lichtsensor</li>{% endif %}
  366.                             {% if innen.getKurvenlicht() %}
  367.                                 <li>Kurvenlicht</li>{% endif %}
  368.                             {% if aussen.getKurvenlichtAdaptiv() %}
  369.                                 <li>Adaptives Kurvenlicht</li>{% endif %}
  370.                             {% if innen.getFernlichtassistent() %}
  371.                                 <li>Fernlichtassistent</li>{% endif %}
  372.                             {% if innen.getSitzheizung() %}
  373.                                 <li>Sitzheizung vorne</li>{% endif %}
  374.                             {% if innen.getSitzheizungHinten() %}
  375.                                 <li>Sitzheizung hinten</li>{% endif %}
  376.                             {% if innen.getBeheizbaresLenkrad() %}
  377.                                 <li>Beheizbares Lenkrad</li>{% endif %}
  378.                             {% if innen.getSchaltwippen() %}
  379.                                 <li>Schaltwippen</li>{% endif %}
  380.                         </ul>
  381.                     </small>
  382.                 </details>
  383.                 <details class="mb-2">
  384.                     <summary class="border-bottom pb-2">Sicherheit</summary>
  385.                     <small>
  386.                         <ul>
  387.                             {% if innen.getAirbag() %}
  388.                                 <li>Airbag</li>{% endif %}
  389.                             {% if innen.getIsofixBeifahrer() %}
  390.                                 <li>Isofix Beifahrer</li>{% endif %}
  391.                             {% if innen.getInnenspiegelAutomatischAbbl() %}
  392.                                 <li>Automatisch abblendender Innenspiegel</li>{% endif %}
  393.                             {% if aussen.getServolenkung() %}
  394.                                 <li>Servolenkung</li>{% endif %}
  395.                             {% if aussen.getEsp() %}
  396.                                 <li>ESP</li>{% endif %}
  397.                             {% if aussen.getAbs() %}
  398.                                 <li>ABS</li>{% endif %}
  399.                             {% if aussen.getWegfahrsperre() %}
  400.                                 <li>Wegfahrsperre</li>{% endif %}
  401.                             {% if aussen.getLedScheinwerfer() %}
  402.                                 <li>LED-Scheinwerfer</li>{% endif %}
  403.                             {% if aussen.getAlarmanlage() %}
  404.                                 <li>Alarmanlage</li>{% endif %}
  405.                             {% if aussen.getNebelscheinwerfer() %}
  406.                                 <li>Nebelscheinwerfer</li>{% endif %}
  407.                             {% if aussen.getZentralverriegelung() %}
  408.                                 <li>Zentralverriegelung</li>{% endif %}
  409.                             {% if aussen.getTagfahrlicht() %}
  410.                                 <li>Tagfahrlicht</li>{% endif %}
  411.                         </ul>
  412.                     </small>
  413.                 </details>
  414.                 <details class="mb-2">
  415.                     <summary class="border-bottom pb-2">Innenausstattung</summary>
  416.                     <small>
  417.                         <ul>
  418.                             {% if innen.getSportpaket() %}
  419.                                 <li>Sportpaket</li>{% endif %}
  420.                             {% if innen.getSportpaket() %}
  421.                                 <li>Sportpaket</li>{% endif %}
  422.                             {% if innen.getKindersitzbefestigung() %}
  423.                                 <li>Kindersitzbefestigung</li>{% endif %}
  424.                             {% if innen.getAmbientesLicht() %}
  425.                                 <li>Ambientebeleuchtung</li>{% endif %}
  426.                             {% if innen.getRaucherpaket() %}
  427.                                 <li>Raucherpaket</li>{% endif %}
  428.                             {% if innen.getWinterpaket() %}
  429.                                 <li>Winterpaket</li>{% endif %}
  430.                             {% if innen.getGepCkraumabtrennung() %}
  431.                                 <li>Gepäckraumabtrennung</li>{% endif %}
  432.                             {% if innen.getLederlenkrad() %}
  433.                                 <li>Lederlenkrad</li>{% endif %}
  434.                             {% if innen.getLordosenstTze() %}
  435.                                 <li>Lordosenstütze</li>{% endif %}
  436.                         </ul>
  437.                     </small>
  438.                 </details>
  439.                 <details class="mb-2">
  440.                     <summary class="border-bottom pb-2">Exterior</summary>
  441.                     <small>
  442.                         <ul>
  443.                             {% if aussen.getFarbe() %}
  444.                                 <li>{{ aussen.getFarbe() }}</li>{% endif %}
  445.                             {% if aussen.getLeichtmetallfelgen() %}
  446.                                 <li>Leichtmetallfelgen</li>{% endif %}
  447.                             {% if aussen.getAnhaengerkupplung() %}
  448.                                 <li>Anhängerkupplung</li>{% endif %}
  449.                             {% if aussen.getSchiebedach() %}
  450.                                 <li>Schiebedach</li>{% endif %}
  451.                             {% if aussen.getScheinwerferreinigungsanlage() %}
  452.                                 <li>Scheinwerferreinigungsanlage</li>{% endif %}
  453.                             {% if aussen.getElektrischeHeckklappe() %}
  454.                                 <li>Elektrische Heckklappe</li>{% endif %}
  455.                             {% if aussen.getDachtrGer() %}
  456.                                 <li>Dachträger</li>{% endif %}
  457.                         </ul>
  458.                     </small>
  459.                 </details>
  460.                 <details class="mb-2">
  461.                     <summary class="border-bottom pb-2">Multimedia</summary>
  462.                     <small>
  463.                         <ul>
  464.                             {% if innen.getBluetooth() %}
  465.                                 <li>Bluetooth</li>{% endif %}
  466.                             {% if innen.getCdSpieler() %}
  467.                                 <li>CD-Spieler</li>{% endif %}
  468.                             {% if innen.getBordcomputer() %}
  469.                                 <li>Bordcomputer</li>{% endif %}
  470.                             {% if innen.getHeadUpDisplay() %}
  471.                                 <li>Head-Up Display</li>{% endif %}
  472.                             {% if innen.getFreisprecheinrichtung() %}
  473.                                 <li>Freisprecheinrichtung</li>{% endif %}
  474.                             {% if innen.getAndroidAuto() %}
  475.                                 <li>Android Auto</li>{% endif %}
  476.                             {% if innen.getAppleCarplay() %}
  477.                                 <li>Apple Carplay</li>{% endif %}
  478.                             {% if innen.getInduktionsladenSmartphones() %}
  479.                                 <li>Android Auto</li>{% endif %}
  480.                             {% if innen.getWLan() %}
  481.                                 <li>W-LAN</li>{% endif %}
  482.                             {% if innen.getSoundsystem() %}
  483.                                 <li>Soundsystem</li>{% endif %}
  484.                             {% if innen.getSprachsteuerung() %}
  485.                                 <li>Sprachsteuerung</li>{% endif %}
  486.                             {% if innen.getTouchscreen() %}
  487.                                 <li>Touchscreen</li>{% endif %}
  488.                             {% if innen.getDabRadio() %}
  489.                                 <li>DAB-Radio</li>{% endif %}
  490.                             {% if innen.getUsb() %}
  491.                                 <li>USB</li>{% endif %}
  492.                         </ul>
  493.                     </small>
  494.                 </details>
  496.                 {% set foo = stammdaten.bemerkung|split('<b>') %}
  497.                 {% if 'Sonderausstattung' in stammdaten.bemerkung %}
  498.                     <details class="mb-2">
  499.                         <summary class="border-bottom pb-2">Sonderausstattung</summary>
  500.                         <small>
  501.                             {% for key, value in foo %}
  502.                                 {% if 'Sonderausstattung' in foo[key] %}
  503.                                     {{ foo[key] | replace({'Sonderausstattung': '', 'Sonderausstattung ab Werk': '', '<hr>': '', '<br>': ''}) | raw }}
  504.                                 {% endif %}
  505.                             {% endfor %}
  506.                         </small>
  507.                     </details>
  508.                 {% endif %}
  509.                 {% if 'Serienaustattung' in stammdaten.bemerkung %}
  510.                     <details class="mb-2">
  511.                         <summary class="border-bottom pb-2">Serienaustattung</summary>
  512.                         <small>
  513.                             {% for key, value in foo %}
  514.                                 {% if 'Serienaustattung' in foo[key] %}
  515.                                     {{ foo[key] | replace({'Serienaustattung': '', '<br><br>': '<br>'}) | raw }}
  516.                                 {% endif %}
  517.                             {% endfor %}
  518.                         </small>
  519.                     </details>
  520.                 {% endif %}
  521.             </div>
  522.             {% if fuelType == 'hybrid' %}
  523.                 <div class="bg-white shadow p-3 px-md-5 py-md-4 mb-lg-3">
  524.                     <h3 class="fw-bold">Energiebilanz</h3>
  526.                     <h4 class="mb-0">Energieeffizienzklasse:
  527.                         {{ technischeDaten.energieeffizienzklasseGewichtetKombiniert }}</h4>
  528.                     <h4>Energieeffizienzklasse bei entladener Batterie:
  529.                         {{ technischeDaten.energieeffizienzklasseEntladeneBatterie }}</h4>
  531.                     Auf Grundlage der gemessenen CO<sub>2</sub>-Emission unter Berücksichtigung der Masse des Fahrzeugs
  532.                     ermittelt.
  533.                     <table class="energy-balance-table my-3">
  534.                         <thead>
  535.                         <tr>
  536.                             <th style="width: 50%;"></th>
  537.                             <th style="width: 25%;">Gewichtet Kombiniert</th>
  538.                             <th style="width: 25%;" class="border-left">Bei entladener Batterie</th>
  539.                         </tr>
  540.                         </thead>
  541.                         <tbody>
  542.                         <tr>
  543.                             <td>
  544.                                 <ul class="list-unstyled co2-efficiency hybrid efficiency-{{ technischeDaten.energieeffizienzklasseGewichtetKombiniert | lower }}">
  545.                                     <li>
  546.                                         <span>A</span>
  547.                                     </li>
  548.                                     <li>
  549.                                         <span>B</span>
  550.                                     </li>
  551.                                     <li>
  552.                                         <span>C</span>
  553.                                     </li>
  554.                                     <li>
  555.                                         <span>D</span>
  556.                                     </li>
  557.                                     <li>
  558.                                         <span>E</span>
  559.                                     </li>
  560.                                     <li>
  561.                                         <span>F</span>
  562.                                     </li>
  563.                                     <li>
  564.                                         <span>G</span>
  565.                                     </li>
  566.                                 </ul>
  567.                             </td>
  568.                             <td>
  569.                                 <ul class="list-unstyled efficiency-hybrid">
  570.                                     {% set efficiencyClass = technischeDaten.energieeffizienzklasseGewichtetKombiniert %}
  571.                                     {% for grade in ['A', 'B', 'C', 'D', 'E', 'F', 'G'] %}
  572.                                         <li class="efficiency-hybrid-{{ efficiencyClass | lower }} {% if grade != efficiencyClass %}hidden{% endif %}">
  573.                                             <span>{{ grade }}</span>
  574.                                         </li>
  575.                                     {% endfor %}
  576.                                 </ul>
  577.                             </td>
  578.                             <td class="border-left">
  579.                                 <ul class="list-unstyled efficiency-hybrid">
  580.                                     {% set efficiencyClass = technischeDaten.energieeffizienzklasseEntladeneBatterie %}
  581.                                     {% for grade in ['A', 'B', 'C', 'D', 'E', 'F', 'G'] %}
  582.                                         <li class="efficiency-hybrid-{{ efficiencyClass | lower }} {% if grade != efficiencyClass %}hidden{% endif %}">
  583.                                             <span>{{ grade }}</span>
  584.                                         </li>
  585.                                     {% endfor %}
  586.                                 </ul>
  587.                             </td>
  588.                         </tr>
  589.                         </tbody>
  590.                     </table>
  591.                 </div>
  592.             {% else %}
  593.                 <div class="bg-white shadow p-3 px-md-5 py-md-4 mb-lg-3">
  594.                     <h3 class="fw-bold">Energiebilanz</h3>
  595.                     <h4>Energieeffizienzklasse:
  596.                         {{ technischeDaten.energieeffizienzklasse }}
  597.                     </h4>
  598.                     Auf Grundlage der gemessenen CO<sub>2</sub>-
  599.                     Emmision unter Berücksichtigung der Masse des Fahrzeugs ermittelt.
  600.                     <ul class="my-3 list-unstyled co2-efficiency efficiency-{{ technischeDaten.energieeffizienzklasse | lower }}">
  601.                         <li>
  602.                             <span>A</span>
  603.                         </li>
  604.                         <li>
  605.                             <span>B</span>
  606.                         </li>
  607.                         <li>
  608.                             <span>C</span>
  609.                         </li>
  610.                         <li>
  611.                             <span>D</span>
  612.                         </li>
  613.                         <li>
  614.                             <span>E</span>
  615.                         </li>
  616.                         <li>
  617.                             <span>F</span>
  618.                         </li>
  619.                         <li>
  620.                             <span>G</span>
  621.                         </li>
  622.                     </ul>
  623.                 </div>
  624.             {% endif %}
  625.             {% if hasLeasingRate or hasFinanzierungRate %}
  626.                 <div class="tab-select bg-white shadow p-3 px-md-5 py-md-4 mb-3">
  627.                     <input type="radio" name="tab-select" id="tab-select-leasing"
  628.                            class="d-none" {% if hasLeasingRate %} checked {% endif %}>
  629.                     <input type="radio" name="tab-select"
  630.                            id="tab-select-finance" {% if hasLeasingRate %} class="d-none" {% else %} class="d-none single" checked {% endif %}>
  631.                     <div class="tab-select-header row text-center fw-bold mb-4">
  632.                         {% if hasLeasingRate %}
  633.                             <div class="col-6">
  634.                                 <label for="tab-select-leasing" role="button" class="p-3">Leasing</label>
  635.                             </div>
  636.                         {% endif %}
  637.                         {% if hasFinanzierungRate %}
  638.                             <div class="col-6">
  639.                                 <label for="tab-select-finance" role="button" class="p-3">Finanzierung</label>
  640.                             </div>
  641.                         {% endif %}
  642.                     </div>
  643.                     {% if hasLeasingRate %}
  644.                     <div class="tab-select-content" data-id="tab-select-leasing">
  645.                         <div class="row">
  646.                             <div class="col-md-6 px-md-4">
  647.                                 <div class="px-lg-4">
  648.                                     <div class="mx-auto bg-light w-50 mb-4 ratio ratio-1x1" style="border-radius: 1rem">
  649.                                         <div class="d-flex flex-column justify-content-center align-items-center">
  650.                                             <small>Rate</small>
  651.                                             {% if leasing.leasingmatrix|length > 1 %}
  652.                                                 <b class="d-block fs-5" id="leasingRate">
  653.                                                     --&euro;
  654.                                                 </b>
  655.                                             {% else %}
  656.                                                 <b class="d-block fs-5" id="leasingRate">
  657.                                                     {{ leasing.getMonatlicheRate()|number_format(0, ',', '.') }}&euro;
  658.                                                 </b>
  659.                                             {% endif %}
  660.                                         </div>
  661.                                     </div>
  662.                                     <p class="text-muted small text-center lh-1">
  663.                                         <small><small><small>
  664.                                                     {{ leasingLegalNotice }}
  665.                                                 </small></small></small>
  666.                                     </p>
  667.                                 </div>
  668.                             </div>
  669.                             <div class="col-md-6 px-md-4">
  670.                                 <div class="px-lg-4">
  672.                                     <label for="term_leasing" class="form-label small m-0 fw-bold">Laufzeit in
  673.                                         Monaten</label>
  674.                                     {% if leasing.leasingmatrix|length > 1 %}
  675.                                         <div class="range-select pt-4 pb-3 mb-3"
  676.                                              id="term_leasing_label"
  677.                                              style='--min:0; --max:0; --val:0; --step:1;  --min-step:0; --max-step:0;'>
  678.                                             <input id="term_leasing" type="range" class="form-range" min="0" step="1"
  679.                                                    value="0" max="termLeasingValues"
  680.                                                    oninput="this.parentNode.style.setProperty('--val',this.value);calcLeasingRate(this.value,this.value, false, false);">
  681.                                             <output id="output_term_leasing" for="term_leasing"
  682.                                                     class="rounded-pill px-2 py-1"></output>
  683.                                         </div>
  684.                                     {% else %}
  685.                                         <div class="pt-4 pb-3 mb-3">
  686.                                             {% if leasing.laufzeit %}
  687.                                                 <span>{{ leasing.laufzeit }}</span>
  688.                                             {% else %}
  689.                                                 <span> -- </span>
  690.                                             {% endif %}
  691.                                         </div>
  692.                                     {% endif %}
  693.                                     {% if leasing.leasingmatrix|length > 1 %}
  694.                                         <label for="mileage_leasing" class="form-label small m-0 fw-bold">Laufleistung
  695.                                             in
  696.                                             km/Jahr</label>
  697.                                         <div class="range-select pt-4 pb-3 mb-3"
  698.                                              id="mileage_leasing_label"
  699.                                              style='--min:0; --max:0; --val:0; --step:1; --min-step:0; --max-step:0;'>
  700.                                             <input id="mileage_leasing" type="range" class="form-range" min="0" step="1"
  701.                                                    value="0"
  702.                                                    oninput="this.parentNode.style.setProperty('--val',this.value);calcLeasingRate(this.value,false, false, this.value);">
  703.                                             <output id="output_mileage_leasing" for="mileage_leasing"
  704.                                                     class="rounded-pill px-2 py-1"></output>
  705.                                         </div>
  706.                                     {% else %}
  707.                                         <label for="mileage_leasing" class="form-label small m-0 fw-bold">Gesamtlaufleistung</label>
  708.                                         <div class="pt-1 mb-3">
  709.                                             {% if leasing.laufleistung %}
  710.                                                 <span>{{ leasing.laufleistung|number_format(0, ',', '.') }} km</span>
  711.                                             {% else %}
  712.                                                 <span> -- </span>
  713.                                             {% endif %}
  714.                                         </div>
  715.                                     {% endif %}
  716.                                     {% if leasing.leasingmatrix|length > 1 %}
  717.                                         <label for="deposit_leasing" class="form-label small m-0 fw-bold">Anzahlung in
  718.                                             Euro</label>
  719.                                         {#                                    <div class="range-select pt-4 pb-3 mb-3" #}
  720.                                         {#                                         style='--min:1000; --max:{{ kosten.getPreis|number_format(0, '', '') }}; --val:{{ leasing.anzahlung }}; --step:1;'> #}
  721.                                         {#                                        <input id="deposit_leasing" type="range" class="form-range" min="1000" #}
  722.                                         {#                                               max="{{ kosten.getPreis|number_format(0, '', '') }}" step="1" #}
  723.                                         {#                                               value="{{ leasing.anzahlung }}" #}
  724.                                         {#                                               oninput="this.parentNode.style.setProperty('--val',this.value);calcLeasingRate(false, this.value);"> #}
  725.                                         {#                                        <output for="deposit_leasing" class="rounded-pill px-2 py-1"></output> #}
  726.                                         {#                                    </div> #}
  727.                                         <div class="pt-1 mb-3">
  728.                                             {% if leasing.anzahlung %}
  729.                                                 <span>{{ leasing.anzahlung|number_format(2, ',', '.') }}</span>
  730.                                             {% else %}
  731.                                                 <span> -- </span>
  732.                                             {% endif %}
  733.                                         </div>
  734.                                     {% else %}
  735.                                         <label for="deposit_leasing"
  736.                                                class="form-label small m-0 fw-bold">Anzahlung</label>
  737.                                         <div class="pt-1 mb-3">
  738.                                             {% if leasing.anzahlung %}
  739.                                                 <span>{{ leasing.anzahlung |number_format(2, ',', '.') }}&euro;</span>
  740.                                             {% else %}
  741.                                                 <span> -- </span>
  742.                                             {% endif %}
  743.                                         </div>
  744.                                     {% endif %}
  745.                                 </div>
  746.                             </div>
  747.                             <div class="col-12 mt-4">
  748.                                 <div class="bg-light rounded-3 p-4">
  749.                                     <div class="col-md-8 ms-auto">
  750.                                         <h6 class="mb-2">Interessiert an einem Leasingangebot?</h6>
  751.                                         <p class="small text-muted">
  752.                                             <small>
  753.                                                 {{ addressBank }}
  754.                                             </small>
  755.                                         </p>
  756.                                         <p class="text-center text-md-end">
  757.                                             <button class="btn btn-light bg-white w-auto border fw-normal"
  758.                                                     data-action="initiate-contact">
  759.                                                 Ja, ich bin interessiert
  760.                                             </button>
  761.                                         </p>
  762.                                     </div>
  763.                                 </div>
  764.                             </div>
  765.                         </div>
  766.                     </div>
  767.                     {% endif %}
  768.                     {% if hasFinanzierungRate %}
  769.                     <div class="tab-select-content" data-id="tab-select-finance">
  770.                         <div class="row">
  771.                             <div class="col-md-6 px-md-4">
  772.                                 <div class="px-lg-4">
  773.                                     <div class="mx-auto bg-light w-50 mb-4 ratio ratio-1x1" style="border-radius: 1rem">
  774.                                         <div class="d-flex flex-column justify-content-center align-items-center">
  775.                                             <small>Rate</small>
  776.                                             <b class="d-block fs-5" id="financeRate">
  777.                                                 {{ finanzierung.getMonatlicheRate|number_format(0, ',', '.') }}&euro;
  778.                                             </b>
  779.                                         </div>
  780.                                     </div>
  781.                                     <p class="text-muted small text-center lh-1">
  782.                                         <small><small><small>
  783.                                                     {{ financingLegalNotice }}
  784.                                                 </small></small></small>
  785.                                     </p>
  786.                                 </div>
  787.                             </div>
  788.                             <div class="col-md-6 px-md-4">
  789.                                 <div class="px-lg-4">
  790.                                     <label for="laufzeit_finance" class="form-label small m-0 fw-bold">Laufzeit in
  791.                                         Monaten:</label>
  792.                                     <div class="pt-1 mb-3">
  793.                                         {% if  finanzierung.laufzeit %}
  794.                                             <span>{{ finanzierung.laufzeit }}</span>
  795.                                         {% else %}
  796.                                             <span> -- </span>
  797.                                         {% endif %}
  798.                                     </div>
  799.                                     <label for="laufzeit_finance" class="form-label small m-0 fw-bold">Eff.
  800.                                         Jahreszins:</label>
  801.                                     <div class="pt-1 mb-3">
  802.                                         {% if  finanzierung.effektiverJahreszins %}
  803.                                             <span>{{ finanzierung.effektiverJahreszins }}%</span>
  804.                                         {% else %}
  805.                                             <span> -- </span>
  806.                                         {% endif %}
  807.                                     </div>
  808.                                     <label for="laufzeit_finance" class="form-label small m-0 fw-bold">Sollzins
  809.                                         p.a.:</label>
  810.                                     <div class="pt-1 mb-3">
  811.                                         {% if  finanzierung.sollZinssatz %}
  812.                                             <span>{{ finanzierung.sollZinssatz }}%</span>
  813.                                         {% else %}
  814.                                             <span> -- </span>
  815.                                         {% endif %}
  816.                                     </div>
  817.                                     <label for="laufzeit_finance"
  818.                                            class="form-label small m-0 fw-bold">Anzahlung:</label>
  819.                                     <div class="pt-1 mb-3">
  820.                                         {% if  finanzierung.anzahlung %}
  821.                                             <span>{{ finanzierung.anzahlung }}€</span>
  822.                                         {% else %}
  823.                                             <span> -- </span>
  824.                                         {% endif %}
  825.                                     </div>
  826.                                     <label for="laufzeit_finance"
  827.                                            class="form-label small m-0 fw-bold">Schlussrate:</label>
  828.                                     <div class="pt-1 mb-3">
  829.                                         {% if  finanzierung.schlussrate %}
  830.                                             <span>{{ finanzierung.schlussrate }}€</span>
  831.                                         {% else %}
  832.                                             <span> -- </span>
  833.                                         {% endif %}
  834.                                     </div>
  835.                                     <label for="laufzeit_finance"
  836.                                            class="form-label small m-0 fw-bold">Nettodarlehensbetrag:</label>
  837.                                     <div class="pt-1 mb-3">
  838.                                         {% if  finanzierung.nettokreditbetrag %}
  839.                                             <span>{{ finanzierung.nettokreditbetrag }}€</span>
  840.                                         {% else %}
  841.                                             <span> -- </span>
  842.                                         {% endif %}
  843.                                     </div>
  844.                                     <label for="laufzeit_finance" class="form-label small m-0 fw-bold">Darlehensgesamtbetrag:</label>
  845.                                     <div class="pt-1 mb-3">
  846.                                         {% if  finanzierung.bruttokreditbetrag %}
  847.                                             <span>{{ finanzierung.bruttokreditbetrag }}€</span>
  848.                                         {% else %}
  849.                                             <span> -- </span>
  850.                                         {% endif %}
  851.                                     </div>
  852.                                     {#                                <div class="range-select pt-4 pb-3 mb-3" #}
  853.                                     {#                                     style='--min:12; --max:60; --val:{{ finanzierung.laufzeit }}; --step:6;'> #}
  854.                                     {#                                    <input id="laufzeit_finance" type="range" class="form-range" min="12" max="60" #}
  855.                                     {#                                           step="6" value="{{ finanzierung.laufzeit }}" #}
  856.                                     {#                                           oninput="this.parentNode.style.setProperty('--val',this.value);calcFinanceRate(this.value, false);"> #}
  857.                                     {#                                    <output for="laufzeit_finance" class="rounded-pill px-2 py-1"></output> #}
  858.                                     {#                                    <div class="range-select-ticks">{% for i in range(12, 60, 6) %} #}
  859.                                     {#                                            <span>{{ i }}</span>{% endfor %}</div> #}
  860.                                     {#                                </div> #}
  861.                                     {#                                <div class="range-select pt-4 pb-3 mb-3" #}
  862.                                     {#                                     style='--min:1000; --max:{{ kosten.getPreis|number_format(0, '', '') }}; --val:{{ finanzierung.anzahlung }}; --step:1; background:none;'> #}
  863.                                     {#                                    <input id="anzahlung_finance" type="range" class="form-range" min="1000" #}
  864.                                     {#                                           max="{{ kosten.getPreis|number_format(0, '', '') }}" step="1" #}
  865.                                     {#                                           value="{{ finanzierung.anzahlung }}" #}
  866.                                     {#                                           oninput="this.parentNode.style.setProperty('--val',this.value);calcFinanceRate(false, this.value);"> #}
  867.                                     {#                                    <output for="anzahlung_finance" class="rounded-pill px-2 py-1"></output> #}
  868.                                     {#                                </div> #}
  869.                                 </div>
  870.                             </div>
  871.                             <div class="col-12 mt-4">
  872.                                 <div class="bg-light rounded-3 p-4">
  873.                                     <div class="col-md-8 ms-auto">
  874.                                         <h6 class="mb-2">Interessiert an einer Finanzierung?</h6>
  875.                                         <p class="small text-muted">
  876.                                             <small>
  877.                                                 {{ addressBank }}
  878.                                             </small>
  879.                                         </p>
  880.                                         <p class="text-center text-md-end">
  881.                                             <button class="btn btn-light bg-white w-auto border fw-normal"
  882.                                                     data-action="initiate-contact">
  883.                                                 Ja, ich bin interessiert
  884.                                             </button>
  885.                                         </p>
  886.                                     </div>
  887.                                 </div>
  888.                             </div>
  889.                         </div>
  890.                     </div>
  891.                     {% endif %}
  892.                 </div>
  893.             {% endif %}
  894.         </div>
  895.         <div class="col-lg-4 d-none d-lg-block">
  896.             <div class="sticky-lg-top shadow p-4" style="top:124px;">
  897.                 <div class="row">
  898.                     <div class="col-xl-6 mb-2 mb-xl-0">
  899.                         <h1 class="h2 mb-0">{{ stammdaten.getMarke }}</h1>
  900.                         {{ stammdaten.getModellbasis }}
  901.                     </div>
  902.                     <div class="col-xl-6">
  903.                         <span class="h2 fw-bold">{{ kosten.getPreis|number_format(2, ',', '.') }}&euro;</span>
  904.                         <div class="f-12 d-block text-muted">
  905.                             {% if stammdaten.getMwst == 0 %}
  906.                                 MwSt. ist ausweisbar
  907.                             {% else %}
  908.                                 MwSt. nicht ausweisbar
  909.                             {% endif %}
  910.                         </div>
  911.                         {% if pimcore_select('car-detail-price-highlight').getData() == true %}
  912.                             <span class="d-inline-block small border rounded px-2 py-1 mt-2" role="button">
  913.                                 <small>Monatliche Rate berechnen</small>
  914.                             </span>
  915.                         {% endif %}
  916.                         {% if kosten.rotstiftpreis > kosten.getPreis() %}
  917.                             <div class="mx-auto text-center mt-2">
  918.                                 <span
  919.                                     class="text-decoration-line-through d-block">{{ kosten.rotstiftpreis|number_format(2, ',', '.') }}&euro;</span>
  920.                                 <span class="badge rounded-pill bg-danger">Kürzlich reduziert</span>
  921.                             </div>
  922.                         {% endif %}
  923.                     </div>
  924.                     <div class="col-12 px-4 pt-4 text-center">
  925.                         <button class="btn btn-primary" data-action="initiate-contact">Fahrzeug anfragen</button>
  926.                     </div>
  927.                     <div class="col-12 mt-4">
  928.                         <div class="d-flex gap-2 mt-4">
  929.                             <svg width="32" height="32" viewBox="0 0 16 16">
  930.                                 <path
  931.                                     d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z" />
  932.                                 <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
  933.                             </svg>
  934.                             <div>
  935.                                 <h6 class="mb-2">Standort</h6>
  936.                                 Autohaus Timmermanns GmbH
  937.                                 {% if stammdaten.dealerLocation %}
  938.                                 <address class="small text-muted mt-1">
  939.                                     <span class="d-block">{{ stammdaten.dealerLocation.street }}</span>
  940.                                     <span
  941.                                         class="d-block">{{ stammdaten.dealerLocation.zip }} {{ stammdaten.dealerLocation.city }}</span>
  942.                                     <span class="d-block">Telefon: {{ stammdaten.dealerLocation.phone }}</span>
  943.                                 </address>
  944.                                 {% endif %}
  945.                             </div>
  946.                         </div>
  947.                     </div>
  948.                 </div>
  949.             </div>
  950.         </div>
  951.     </div>
  952. </div>
  954. <div id="internalVehicleId" data-internalvehicleid="{{ stammdaten.internenummer }}"><!-- --></div>
  955. <div id="dealerLocationPhone" data-dealerlocationlhone="{{ stammdaten.dealerLocation ? stammdaten.dealerLocation.phone : '' }}"><!-- --></div>
  956. <script>
  957.     const internalVehicleId = document.querySelector('#internalVehicleId').dataset.internalvehicleid;
  958.     const dealerLocationPhone = document.querySelector('#dealerLocationPhone').dataset.dealerlocationlhone;
  960.     {# const leasingMatrix = {{ leasing }}; #}
  962.     var inputTermLeasing = document.getElementById('term_leasing'),
  963.         inputTermLeasingLabel = document.getElementById('term_leasing_label'),
  964.         outputTermLeasing = document.getElementById('output_term_leasing'),
  965.         inputMileageLeasing = document.getElementById('mileage_leasing'),
  966.         inputMileageLeasingLabel = document.getElementById('mileage_leasing_label'),
  967.         outputMileageLeasing = document.getElementById('output_mileage_leasing');
  970.     /**
  971.      * The rate matrix, once. Rows are objects {price, period, mileage}, every value a STRING -
  972.      * Pimcore's table field stores text - which is why every comparison below converts explicitly.
  973.      */
  974.     const leasingMatrix = JSON.parse('{{ (leasing is not null ? leasing.leasingmatrix : []) | json_encode | raw }}');
  976.     /**
  977.      * Selection is by the PAIR (period, mileage), not by a position in a filtered list.
  978.      *
  979.      * The previous version filtered rows with a substring search across all three fields, so
  980.      * picking 24 months also pulled in rows whose price was "1240.00" or whose mileage was
  981.      * "24000" - foreign terms, duplicated mileages - sorted them with localeCompare (which puts
  982.      * "5000" after "40000", hence the slider running 10000 to 5000), and then indexed that list
  983.      * with the TERM slider's position. On automedia's real 21-row matrix that showed 1381,81 EUR
  984.      * for 24 months when the cheapest 24-month rate is 1334,02, and the detail page opened at a
  985.      * different figure than the one the listing advertises via filterRate.
  986.      *
  987.      * TODO, deliberately not in this change: price formatting ("843.6" should read "843,60 EUR"),
  988.      * the never-substituted max="termLeasingValues" placeholder on the term slider, guards for
  989.      * empty table cells, and the question why getMonatlicheRate() stops being displayed as soon as
  990.      * the matrix has more than one row even though the listing advertises exactly that value.
  991.      */
  992.     const leasingTerms = () =>
  993.         [...new Set(leasingMatrix.map(r => r.period))].sort((a, b) => Number(a) - Number(b));
  995.     const leasingMileagesFor = (period) =>
  996.         [...new Set(leasingMatrix.filter(r => r.period === period).map(r => r.mileage))]
  997.             .sort((a, b) => Number(a) - Number(b));
  999.     const leasingRowFor = (period, mileage) =>
  1000.         leasingMatrix.find(r => r.period === period && r.mileage === mileage);
  1002.     /**
  1003.      * Renders both sliders and the price from two slider POSITIONS. Passing positions rather than
  1004.      * values keeps the sliders authoritative: a term change re-derives the mileage list, and an
  1005.      * out-of-range mileage position falls back to the cheapest entry of the new term.
  1006.      */
  1007.     function renderLeasing(termIndex, mileageIndex) {
  1008.         const terms = leasingTerms();
  1009.         if (terms.length === 0) {
  1010.             return;
  1011.         }
  1013.         const term = terms[Math.min(termIndex, terms.length - 1)];
  1014.         const mileages = leasingMileagesFor(term);
  1015.         const mileage = mileages[Math.min(mileageIndex, mileages.length - 1)];
  1017.         inputTermLeasing.max = terms.length - 1;
  1018.         outputTermLeasing.innerHTML = term;
  1019.         inputTermLeasingLabel.setAttribute('style',
  1020.             '--min:0; --max:' + (terms.length - 1) + '; --val:' + termIndex + '; --step:1;' +
  1021.             ' --min-step:' + terms[0] + '; --max-step:' + terms[terms.length - 1] + ';');
  1023.         inputMileageLeasing.max = mileages.length - 1;
  1024.         inputMileageLeasing.value = String(mileages.indexOf(mileage));
  1025.         outputMileageLeasing.innerHTML = mileage;
  1026.         inputMileageLeasingLabel.setAttribute('style',
  1027.             '--min:0; --max:' + (mileages.length - 1) + '; --val:' + mileages.indexOf(mileage) + '; --step:1;' +
  1028.             ' --min-step:' + mileages[0] + '; --max-step:' + mileages[mileages.length - 1] + ';');
  1030.         const row = leasingRowFor(term, mileage);
  1031.         document.getElementById('leasingRate').innerHTML = row ? row.price + '€' : '--€';
  1032.     }
  1034.     function calcLeasingRate(index, month, money, mileage) {
  1035.         renderLeasing(
  1036.             month !== false ? Number(month) : Number(inputTermLeasing.value),
  1037.             mileage !== false ? Number(mileage) : Number(inputMileageLeasing.value)
  1038.         );
  1039.     }
  1041.     function calcFinanceRate(month, money) {
  1042.         {# const selectedMonth = month ? month : document.getElementById('laufzeit_finance').value; #}
  1043.         {# const selectedMoney = money ? money : document.getElementById('anzahlung_finance').value; #}
  1044.         {# const finanzierungsbetrag =  {{ kosten.preis }} - {{ finanzierung.anzahlung }}; #}
  1045.         {# const zinsen = {{ finanzierung.effektiverJahreszins }}; #}
  1046.         {# const sum = ((57480 - 11496) + ( 57480 * 4 / 100)) / 60; #}
  1047.         // let monthPrice =  [Finanzierungsbetrag + (Finanzierungsbeitrag x Zinssatz ÷ 100)] ÷ Kreditlaufzeit;
  1048.         //     document.getElementById('financeRate').innerHTML = Math.round(sum) + '€';
  1049.     }
  1051.     function ready() {
  1052.         let contactForm = document.querySelector('form#contact_form');
  1053.         let contactFormName = contactForm.getAttribute('name');
  1054.         let contactFormVehicleIdField = contactFormName + '_vehicle_id';
  1056.         document.getElementById(contactFormVehicleIdField).value = internalVehicleId;
  1059.         // Initial state through the same function the sliders use, so the two cannot drift apart -
  1060.         // they were two separate implementations of the same logic before.
  1061.         if (outputTermLeasing && leasingMatrix.length > 0) {
  1062.             renderLeasing(0, 0);
  1063.         }
  1065.         // update quick-access-bar phone details
  1066.         document.querySelector('#qa-link-call').setAttribute('data-title', dealerLocationPhone);
  1067.         document.querySelector('#qa-link-call').setAttribute('href', 'tel://' + dealerLocationPhone.replace(/\D+/g, ''));
  1068.     }
  1070.     document.addEventListener('DOMContentLoaded', ready);
  1071. </script>