src/DcSiteBundle/Resources/views/Modules/vehicle/vehicle-equipment.html.twig line 1

Open in your IDE?
  1. <section class="car-configuration-section" id="select-vehicle-equipment">
  2.     <div class="container" id="vehicleEquipment">
  4.         {% if headerType is not defined %}
  5.             {% set headerType = 'all' %}
  6.         {% endif %}
  8.         {% include '@DcSite/Modules/vehicle/vehicle-equipment-header_'~headerType~'.html.twig' %}
  10.         <div class="car-table">
  11.             <div class="car-table__header sticky js-scroll-sync js-touch-scroll" data-scroll-sync="configuration-table">
  12.                 <div class="car-table__row">
  13.                     <div class="car-table__col-left --th">{{ 'car_page.compare.equipment'|trans({}, 'dc_base') }}</div>
  14.                     <div v-for="equipment in compared" class="car-table__col --th" v-html="equipment.title"></div>
  15.                 </div>
  16.             </div>
  18.             <template v-for="group, key, idx in modelOptions">
  21.                 <div class="car-table__body-title" :class="{'--opened': idx == 0 && firstTabOpen }" v-html="group.title"></div>
  23.                 <div class="car-table__body js-scroll-sync js-touch-scroll" :class="{'--opened': idx == 0 && firstTabOpen }"
  24.                      data-scroll-sync="configuration-table">
  25.                     <div v-for="option in group.options" class="car-table__row">
  26.                         <div class="car-table__col-left">
  27.                             <p class="car-table__text-option" v-html="option.title"></p>
  28.                         </div>
  29.                         <div v-for="equipment in compared" class="car-table__col">
  30.                             <span v-if="!option.values[equipment.id]" class="car-table__no"> - </span>
  32.                             <span v-if="option.values[equipment.id] && !option.values[equipment.id].value"
  33.                                   :class="option.values[equipment.id].optional ? 'car-table__optional' : 'car-table__yes'"> + </span>
  35.                             <span v-if="option.values[equipment.id] && option.values[equipment.id].value"
  36.                                   class="car-table__text" v-html="option.values[equipment.id].value"></span>
  38.                             <span v-if="option.values[equipment.id] && option.values[equipment.id].price"
  39.                                   class="car-table__text">
  40.                                 <span v-html="option.values[equipment.id].price.toLocaleString()"></span> грн
  41.                             </span>
  42.                         </div>
  43.                     </div>
  44.                 </div>
  45.             </template>
  46.         </div>
  47.     </div>
  48. </section>
  51. <svg width="0" height="0" class="hidden">
  52.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 29 29" id="icon-variation-plus">
  53.         <path d="M21.512 12.84V14.728H15.24V21H13.352V14.728H7.112V12.84H13.352V6.6H15.24V12.84H21.512Z" fill="currentColor"/>
  54.         <circle cx="14.5" cy="14.5" r="14" stroke="currentColor"/>
  55.     </symbol>
  56.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 29 29" id="icon-variation-check">
  57.         <polygon points="22.186,10.52 14.054,18.652 9.814,14.411 8.4,15.825 14.054,21.48 23.6,11.934" fill="currentColor"/>
  58.     </symbol>
  59.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 8" id="icon-check">
  60.         <path d="M9 1L3.5 6.5L1 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  61.     </symbol>
  62. </svg>