src/DcSiteBundle/Resources/views/Modules/configurator/index.html.twig line 1

Open in your IDE?
  1. <div id="carConfig" v-cloak>
  2.     <section class="config-select" v-if="!isCarSelect">
  3.         <div class="container">
  4.             <div class="row row-custom">
  5.                 <div class="col-12 col-sm-12 config-select__title">
  6.                     <h1>
  7.                         <span>{{ 'configurator.title'|trans({}, 'dc_base') }} <b v-if="car" v-html="car.title+(car.hasHybrid && withHybrid ? ' Hybrid' : '')"></b></span>
  8.                     </h1>
  9.                 </div>
  10.                 <div class="col-12 col-sm-12 config-select__main-title">{{ 'configurator.config_car'|trans({}, 'dc_base') }}</div>
  11.                 <div class="col-12 col-sm-12 config-select__sub-title" v-if="!carId">{{ 'configurator.select_model'|trans({}, 'dc_base') }}</div>
  12.                 <div class="col-12 col-sm-12 mt-3" v-if="carId && cars.length">
  13.                     <a href="#" v-on:click.stop.prevent="selectCar(null)" class="config-go__back-btn">{{ 'configurator.back_to_select'|trans({}, 'dc_base') }}</a>
  14.                 </div>
  15.                 <div class="col-md-3 config-select__car lineup__model 1" v-if="car">
  16.                     <div class="card">
  17.                         <a href="#" v-on:click.stop.prevent="">
  18.                             <picture :alt="car.title">
  19.                                 <source :srcset="car.src_webp" type="image/webp">
  20.                                 <source :srcset="car.src">
  21.                                 <img :src="car.src" :alt="car.title" class="card-img-top lineup__preview">
  22.                             </picture>
  23.                             <div class="card-body">
  24.                                 <div class="lineup__name" v-html="car.title+(car.hasHybrid && withHybrid ? ' Hybrid' : '')"></div>
  25.                                 <div class="lineup__price">
  26.                                     {{ 'configurator.from'|trans({}, 'dc_base') }} <b>{% verbatim %}{{ car.price | formatPrice}}{% endverbatim %}</b> грн
  27.                                 </div>
  28.                             </div>
  29.                         </a>
  30.                     </div>
  31.                 </div>
  32.             </div>
  33.             <div class="row row-custom" v-if="!carId">
  34.                 <div class="col-md-3 config-select__car lineup__model" v-for="car in cars">
  35.                     <div class="card">
  36.                         <a href="#" @click="selectCar(car)">
  37.                             <picture :alt="car.title">
  38.                                 <source :srcset="car.src_webp" type="image/webp">
  39.                                 <source :srcset="car.src">
  40.                                 <img :src="car.src" :alt="car.title" class="card-img-top lineup__preview">
  41.                             </picture>
  42.                             <div class="card-body">
  43.                                 <div class="lineup__name" v-html="car.title+(car.hasHybrid && withHybrid ? ' {{ 'car_page.compare.type_e_4'|trans({},'dc_base') }}' : '')"></div>
  44.                                 <div class="lineup__price">
  45.                                     {{ 'configurator.from'|trans({}, 'dc_base') }} <b>{% verbatim %}{{ car.price | formatPrice}}{% endverbatim %}</b> грн
  46.                                 </div>
  47.                             </div>
  48.                         </a>
  49.                     </div>
  50.                 </div>
  51.             </div>
  53.             <div id="configEquipments" class="row row-custom mb-3" v-if="carId && equipments.length > 0">
  54.                 <div class="col-12 col-sm-12 mt-0 config-select__sub-title config-select__sub-title-hr">
  55.                     <span>{{ 'configurator.equipment'|trans({}, 'dc_base') }}</span>
  56.                     <hr>
  57.                 </div>
  58.             </div>
  59.             <div class="row row-custom car-config__step">
  60.                 <div class="col-md-6 col-lg-3 pb-4" v-for="equipment in equipments">
  61.                     <div class="box box_hovered complect">
  62.                         <div class="box__name complect__name" v-html="equipment.title"></div>
  63.                         <div class="box__price complect__price">{{ 'configurator.from'|trans({}, 'dc_base') }} <b v-html="equipment.price.toLocaleString()"></b> грн</div>
  64.                         <div class="box__select">
  65.                             <input type="radio" :id="'comp_'+equipment.id" name="comp" hidden="hidden" v-model="userCar.equipment" :value="equipment.id">
  66.                             <label :for="'comp_'+equipment.id" class="box__select"><span data-on="{{ 'configurator.selected'|trans({}, 'dc_base') }}" data-off="{{ 'configurator.select'|trans({}, 'dc_base') }}"></span>
  67.                             </label>
  68.                         </div>
  69.                     </div>
  70.                 </div>
  71.             </div>
  72.             <div id="configVariations" class="row row-custom mb-4" v-if="userCar.equipmentObject">
  73.                 <div class="col-12 col-sm-12 mt-0 config-select__sub-title config-select__sub-title-hr">
  74.                     <span>{{ 'configurator.modification'|trans({}, 'dc_base') }}</span>
  75.                     <hr>
  76.                 </div>
  77.             </div>
  78.             <div class="row row-custom mb-4 car-config__step complect__tab row__modification" v-if="userCar.equipmentObject">
  79.                 <div class="col-md-6 col-lg-4" v-for="variation in userCar.equipmentObject.variations">
  80.                     <div class="box box_hovered complect">
  81.                         <div class="box__modification-head align-items-center d-flex justify-content-between">
  82.                             <div class="box__name complect__name" v-html="variation.engine"></div>
  83.                             <div class="box__price complect__price"><b v-html="variation.price.toLocaleString()"></b> грн</div>
  84.                         </div>
  85.                         <div class="row box__modification-head-info">
  86.                             <div class="col-md-6">
  87.                                 <div class="box__modification-info-item">
  88.                                     <svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
  89.                                         <path d="M21.6334 4.39997H20.1667C20.0201 4.39997 19.8734 4.50997 19.8367 4.65662L18.8101 7.69997H17.8201L16.8301 6.04997C16.7567 5.93997 16.6467 5.86662 16.5001 5.86662H15.0334V4.76662C15.0334 4.54662 14.8868 4.39997 14.6668 4.39997H12.1V2.93331H13.2C13.42 2.93331 13.5667 2.78666 13.5667 2.56666V0.366653C13.5667 0.146653 13.42 0 13.2 0H6.60001C6.38001 0 6.23336 0.146653 6.23336 0.366653V2.56666C6.23336 2.78666 6.38001 2.93331 6.60001 2.93331H7.70002V4.39997H4.76666C4.65666 4.39997 4.58331 4.43662 4.51001 4.50997C4.4367 4.58331 4.40001 4.65662 4.40001 4.76662V5.86662H1.83335C1.61335 5.86662 1.4667 6.01327 1.4667 6.23327V8.43328H0.733349V7.33332C0.733349 7.11332 0.586697 6.96667 0.366696 6.96667C0.146696 6.96667 0 7.11332 0 7.33332V10.2667C0 10.4867 0.146653 10.6333 0.366653 10.6333C0.586654 10.6333 0.733306 10.4867 0.733306 10.2667V9.16667H1.46666V12.1C1.46666 12.32 1.61331 12.4667 1.83331 12.4667H4.58331L5.93997 14.52C6.01332 14.5934 6.12332 14.6667 6.23332 14.6667H16.5C16.6467 14.6667 16.7567 14.5933 16.83 14.4467L17.82 12.4667H18.8467L19.8367 14.4467C19.91 14.5933 20.02 14.6667 20.1667 14.6667H21.6333C21.8533 14.6667 22 14.52 22 14.3V4.76666C22 4.54666 21.8534 4.39997 21.6334 4.39997ZM6.96667 0.733306H12.8333V2.19996H11.7333H8.06667H6.96667V0.733306ZM8.43336 2.93331H11.3667V4.39997H8.43336V2.93331ZM2.2 11.7333V6.59997H4.40001V11.7333H2.2ZM16.2434 13.9333H6.41666L5.13332 11.991V6.23332V5.13332H8.06667H11.7333H14.3V6.23332C14.3 6.45332 14.4467 6.59997 14.6667 6.59997H16.28L17.2334 8.18887V11.9533L16.2434 13.9333ZM17.9667 11.7333V8.43332H18.7V11.7333H17.9667ZM21.2667 13.9333H20.3867L19.4333 12.0947V8.06796L20.4233 5.13332H21.2667V13.9333Z" fill="#C3092E"/>
  90.                                     </svg>
  91.                                     <span class="car-config__modif-icon" v-html="variation.engineTypeName"></span>
  92.                                 </div>
  93.                             </div>
  94.                             <div class="col-md-6">
  95.                                 <div class="box__modification-info-item">
  96.                                     <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  97.                                         <path d="M16.5 14.4257V9V3.57434C17.3484 3.43037 18 2.6878 18 1.8C18 0.81 17.19 0 16.2 0C15.21 0 14.4 0.81 14.4 1.8C14.4 2.6878 15.0516 3.43037 15.9 3.57434V8.70001H11.7V3.57434C12.5485 3.43037 13.2 2.6878 13.2 1.8C13.2 0.81 12.39 0 11.4 0C10.41 0 9.60001 0.81 9.60001 1.8C9.60001 2.6878 10.2516 3.43037 11.1 3.57434V8.70001H6.90001V3.57434C7.74847 3.43037 8.40002 2.6878 8.40002 1.8C8.40002 0.81 7.59002 0 6.60002 0C5.61002 0 4.80002 0.81 4.80002 1.8C4.80002 2.6878 5.45157 3.43037 6.30004 3.57434V8.70001H2.09999V3.57434C2.94845 3.43037 3.6 2.6878 3.6 1.8C3.6 0.81 2.79 0 1.8 0C0.81 0 0 0.81 0 1.8C0 2.6878 0.651551 3.43037 1.50001 3.57434V9C1.50001 9.18 1.62 9.29999 1.8 9.29999H6.3V14.4257C5.45154 14.5696 4.79999 15.3122 4.79999 16.2C4.79999 17.19 5.60999 18 6.59999 18C7.58999 18 8.39999 17.19 8.39999 16.2C8.39999 15.3122 7.74844 14.5696 6.89998 14.4257V9.29999H11.1V14.4257C10.2515 14.5696 9.59998 15.3122 9.59998 16.2C9.59998 17.19 10.41 18 11.4 18C12.39 18 13.2 17.19 13.2 16.2C13.2 15.3122 12.5484 14.5696 11.7 14.4257V9.29999H15.9V14.4257C15.0515 14.5696 14.4 15.3122 14.4 16.2C14.4 17.19 15.21 18 16.2 18C17.19 18 18 17.19 18 16.2C18 15.3122 17.3484 14.5696 16.5 14.4257ZM15 1.8C15 1.14001 15.54 0.600012 16.2 0.600012C16.86 0.600012 17.4 1.14001 17.4 1.8C17.4 2.45999 16.86 2.99999 16.2 2.99999C15.54 2.99999 15 2.45999 15 1.8ZM10.2 1.8C10.2 1.14001 10.74 0.600012 11.4 0.600012C12.06 0.600012 12.6 1.14001 12.6 1.8C12.6 2.45999 12.06 2.99999 11.4 2.99999C10.74 2.99999 10.2 2.45999 10.2 1.8ZM5.4 1.8C5.4 1.14001 5.94 0.600012 6.59999 0.600012C7.25998 0.600012 7.79998 1.14001 7.79998 1.8C7.79998 2.45999 7.25998 2.99999 6.59999 2.99999C5.94 2.99999 5.4 2.45999 5.4 1.8ZM0.600012 1.8C0.600012 1.14001 1.14001 0.600012 1.8 0.600012C2.45999 0.600012 2.99999 1.14001 2.99999 1.8C2.99999 2.45999 2.45999 2.99999 1.8 2.99999C1.14001 2.99999 0.600012 2.45999 0.600012 1.8ZM7.80001 16.2C7.80001 16.86 7.26001 17.4 6.60002 17.4C5.94003 17.4 5.40003 16.86 5.40003 16.2C5.40003 15.54 5.94003 15 6.60002 15C7.26001 15 7.80001 15.54 7.80001 16.2ZM12.6 16.2C12.6 16.86 12.06 17.4 11.4 17.4C10.74 17.4 10.2 16.86 10.2 16.2C10.2 15.54 10.74 15 11.4 15C12.06 15 12.6 15.54 12.6 16.2ZM16.2 17.4C15.54 17.4 15 16.86 15 16.2C15 15.54 15.54 15 16.2 15C16.86 15 17.4 15.54 17.4 16.2C17.4 16.86 16.86 17.4 16.2 17.4Z" fill="#C3092E"/>
  98.                                     </svg>
  99.                                     <span class="car-config__modif-icon" v-html="variation.transmissionName"></span>
  100.                                 </div>
  101.                             </div>
  102.                             <div class="col-md-6">
  103.                                 <div class="box__modification-info-item">
  104.                                     <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  105.                                         <path d="M1.00199 11.0826L1.96391 12.0313C2.30185 12.3949 2.7342 12.6418 3.20638 12.7375V15.1427L1.76349 14.8378C1.3226 14.7192 0.881747 14.9959 0.801571 15.4307L0.641266 16.2212C0.601201 16.4189 0.641266 16.6165 0.761506 16.8142C0.881747 17.0118 1.08216 17.1304 1.28253 17.1699L5.2104 18C5.25046 18 5.33064 18 5.3707 18C5.53101 18 5.69136 17.9605 5.8116 17.9209C6.01201 17.8023 6.13226 17.6047 6.17232 17.4071L6.33262 16.6165C6.37269 16.4189 6.33262 16.1817 6.21238 16.0236C6.09214 15.8259 5.89173 15.7074 5.69136 15.6678L4.00799 15.3121V12.7486C4.48332 12.6611 4.93817 12.4024 5.29057 11.9918L6.2525 11.0431C6.7398 10.6586 7.04265 10.1702 7.13997 9.62008H12.8535C12.9481 10.1724 13.2881 10.6835 13.8276 11.0826L14.7896 12.0313C15.1275 12.3948 15.5598 12.6417 16.032 12.7375V15.154H14.4288C13.9879 15.154 13.6272 15.5097 13.6272 15.9446V16.7351C13.6272 17.17 13.9879 17.5257 14.4288 17.5257H18.4368C18.8777 17.5257 19.2384 17.17 19.2384 16.7351V15.9446C19.2384 15.5097 18.8777 15.154 18.4368 15.154H16.8336V12.7486C17.309 12.6611 17.7638 12.4024 18.1162 11.9918L19.0781 11.0431C19.6793 10.5688 20 9.93632 20 9.22482C20 8.51332 19.6793 7.84133 19.0781 7.367L18.1162 6.41833C17.7687 6.04446 17.3215 5.7941 16.8336 5.70451V3.29564H18.4368C18.8777 3.29564 19.2384 2.93989 19.2384 2.50507V1.71454C19.2384 1.27972 18.8777 0.923972 18.4368 0.923972H14.4288C13.9879 0.923972 13.6272 1.27972 13.6272 1.71454V2.50512C13.6272 2.93994 13.9879 3.29569 14.4288 3.29569H16.032V5.70548C15.5567 5.79586 15.1359 6.04576 14.7896 6.41837L13.8276 7.36704C13.2984 7.76615 12.9878 8.28463 12.875 8.82956H7.14072C7.04411 8.26814 6.74088 7.75235 6.2525 7.36704L5.29057 6.41837C4.9431 6.04451 4.49581 5.79414 4.00799 5.70456V2.87782L5.61118 3.21662C5.65125 3.21662 5.73142 3.21662 5.77149 3.21662C5.93179 3.21662 6.09214 3.17711 6.25245 3.09803C6.45286 2.97945 6.57311 2.7818 6.61317 2.58419L6.77347 1.79362C6.81354 1.59596 6.77347 1.35879 6.65323 1.2007C6.53299 1.00304 6.33258 0.88446 6.13221 0.844947L2.20439 0.0148164C2.00397 -0.024696 1.76349 0.0148165 1.60319 0.1334C1.40277 0.251984 1.28253 0.449638 1.24247 0.647246L1.08216 1.43782C0.961922 1.87264 1.24247 2.30742 1.68336 2.38649L3.20642 2.70838V5.70544C2.7311 5.79581 2.3103 6.04572 1.96396 6.41833L1.00199 7.367C0.320609 7.88084 0 8.59234 0 9.30384C0 9.97583 0.360721 10.6478 1.00199 11.0826ZM5.3707 17.2094L1.44284 16.4189L1.60319 15.6283L3.47119 16.0043C3.4958 16.0117 3.52177 16.0169 3.54906 16.02L5.53105 16.4189L5.3707 17.2094ZM18.4368 16.7351H14.4288V15.9445H18.4368V16.7351ZM14.4288 1.71454H18.4368V2.50512H14.4288V1.71454ZM2.00397 0.844901L5.93184 1.67499L5.77153 2.46556L3.8468 2.05881C3.78217 2.0155 3.70091 1.99122 3.60721 1.99122C3.58612 1.99122 3.56588 1.99285 3.54606 1.99525L1.84367 1.63547L2.00397 0.844901ZM14.3487 7.95991L14.3887 7.9204L15.3907 6.93222C15.6713 6.61598 16.0721 6.45789 16.4729 6.45789C16.8737 6.45789 17.2745 6.61598 17.5951 6.93222L18.5971 7.9204C18.9979 8.27615 19.2384 8.75049 19.2384 9.22482C19.2384 9.65964 18.9979 10.134 18.5971 10.4502C18.557 10.4897 18.557 10.4897 18.557 10.4897L17.555 11.4779C17.2344 11.8336 16.8336 11.9917 16.4328 11.9917C16.032 11.9917 15.6713 11.7941 15.3506 11.4779L14.3487 10.4897L14.3086 10.4502C13.8677 10.1339 13.6272 9.69915 13.6272 9.26433C13.6272 8.79 13.8677 8.31566 14.3487 7.95991ZM1.52301 7.95991L1.56308 7.9204L2.56506 6.93222C2.84561 6.61598 3.24644 6.45789 3.64723 6.45789C4.04801 6.45789 4.44884 6.61598 4.76945 6.93222L5.77144 7.9204C6.17223 8.27615 6.41271 8.75049 6.41271 9.22482C6.41271 9.65964 6.17223 10.134 5.77144 10.4502C5.73138 10.4897 5.73138 10.4897 5.73138 10.4897L4.72944 11.4779C4.40878 11.8337 4.00799 11.9918 3.60721 11.9918C3.20642 11.9918 2.8457 11.7941 2.52505 11.4779L1.52306 10.4897L1.48299 10.4502C1.0421 10.134 0.801618 9.6992 0.801618 9.26438C0.801571 8.79 1.04205 8.35522 1.52301 7.95991Z" fill="#C3092E"/>
  106.                                     </svg>
  107.                                     <span class="car-config__modif-icon" v-html="variation.driveName"></span>
  108.                                 </div>
  109.                             </div>
  110.                             <div class="col-md-6">
  111.                                 <div class="box__modification-info-item">
  112.                                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  113.                                         <path d="M19.235 8.01251L18.7991 7.55097L17.2692 3.42704C17.0085 2.73046 16.3419 2.26892 15.5983 2.26465H4.67094C3.92735 2.26465 3.26068 2.73046 3 3.42704L1.49145 7.49969L0.863248 8.08089C0.316239 8.5467 0 9.23046 0 9.94841V15.957C0.0042735 16.9399 0.803419 17.7347 1.78632 17.7347H2.91453C3.89744 17.7347 4.69658 16.9399 4.70085 15.957V15.0852H15.2991V15.957C15.3034 16.9399 16.1026 17.7347 17.0855 17.7347H18.2137C19.1966 17.7347 19.9957 16.9399 20 15.957V9.79029C19.9957 9.11935 19.7222 8.47832 19.235 8.01251ZM3.80342 3.71764C3.94017 3.35439 4.28632 3.11935 4.67094 3.11935H15.6026C15.9872 3.11935 16.3333 3.35867 16.4701 3.71764L17.8034 7.30738H16.8077C16.5726 5.70482 15.0812 4.59798 13.4786 4.8373C12.2009 5.02533 11.1966 6.02961 11.0085 7.30738H2.47009L3.80342 3.71764ZM15.9359 7.30738H11.8718C12.1068 6.18345 13.2094 5.4655 14.3333 5.70055C15.1368 5.87149 15.765 6.49969 15.9359 7.30738ZM3.84615 15.957C3.84188 16.4698 3.42735 16.88 2.91453 16.88H1.78632C1.2735 16.88 0.858974 16.4698 0.854701 15.957V14.8373C1.11111 15.004 1.44872 15.0852 1.78632 15.0852H3.84615V15.957ZM19.1453 15.957C19.141 16.4698 18.7265 16.88 18.2137 16.88H17.0855C16.5726 16.88 16.1581 16.4655 16.1538 15.957V15.0852H18.2137C18.5513 15.0852 18.8889 15.004 19.1453 14.8373V15.957ZM18.2137 14.2305H1.78632C1.27778 14.2347 0.858974 13.8288 0.854701 13.3159V9.94841C0.854701 9.47832 1.0641 9.02961 1.42308 8.72619C1.42735 8.72191 1.4359 8.71337 1.44017 8.70909L2.02137 8.16208H18.2051L18.6154 8.60225C18.6197 8.6108 18.6325 8.61508 18.6368 8.62362C18.9573 8.92704 19.141 9.35012 19.141 9.79029V13.3159H19.1453C19.141 13.8245 18.7222 14.2347 18.2137 14.2305Z" fill="#C3092E"/>
  114.                                         <path d="M5.64103 9.87207H2.4359C2.20085 9.87207 2.00854 10.0644 2.00854 10.2994V12.5216C2.00854 12.7567 2.20085 12.949 2.4359 12.949H5.64103C5.87607 12.949 6.06838 12.7567 6.06838 12.5216V10.2994C6.06838 10.0644 5.87607 9.87207 5.64103 9.87207ZM5.21367 12.0943H2.86325V10.7268H5.21367V12.0943Z" fill="#C3092E"/>
  115.                                         <path d="M17.5641 9.87207H14.359C14.1239 9.87207 13.9316 10.0644 13.9316 10.2994V12.5216C13.9316 12.7567 14.1239 12.949 14.359 12.949H17.5641C17.7992 12.949 17.9915 12.7567 17.9915 12.5216V10.2994C17.9915 10.0644 17.7992 9.87207 17.5641 9.87207ZM17.1368 12.0943H14.7863V10.7268H17.1368V12.0943Z" fill="#C3092E"/>
  116.                                         <path d="M12.0641 11.667H7.9359C7.70085 11.667 7.50854 11.8593 7.50854 12.0943C7.50854 12.3294 7.70085 12.5217 7.9359 12.5217H12.0641C12.2991 12.5217 12.4915 12.3294 12.4915 12.0943C12.4915 11.8593 12.2991 11.667 12.0641 11.667Z" fill="#C3092E"/>
  117.                                         <path d="M12.0641 10.3418H7.9359C7.70085 10.3418 7.50854 10.5341 7.50854 10.7691C7.50854 11.0042 7.70085 11.1965 7.9359 11.1965H12.0641C12.2991 11.1965 12.4915 11.0042 12.4915 10.7691C12.4915 10.5341 12.2991 10.3418 12.0641 10.3418Z" fill="#C3092E"/>
  118.                                     </svg>
  119.                                     <span class="car-config__modif-icon"  v-html="variation.bodyName"></span>
  120.                                 </div>
  121.                             </div>
  122.                         </div>
  123.                         <div class="box__list box__modification-list row">
  124.                             <div class="col-md-12">
  125.                                 <hr class="w-100 mt-2">
  126.                             </div>
  127.                             <div class="col-md-12 item">
  128.                                 <div class="name">{{ 'car_page.compare.max_p'|trans({}, 'dc_base') }}</div>
  129.                                 <div class="val" v-html="variation.power"></div>
  130.                             </div>
  131.                             <div class="item col-md-6">
  132.                                 <div class="name">{{ 'car_page.compare.dynamic'|trans({}, 'dc_base') }}</div>
  133.                                 <div class="val" v-html="variation.dynamic"></div>
  134.                             </div>
  135.                             <div class="item col-md-6">
  136.                                 <div class="name">{{ 'car_page.compare.t_r_mix'|trans({}, 'dc_base') }}, л</div>
  137.                                 <div class="val" v-html="variation.fuelRate"></div>
  138.                             </div>
  139.                             <div class="item col-md-6" v-if="variation.bodyLength">
  140.                                 <div class="name">{{ 'car_page.compare.body_length'|trans({}, 'dc_base') }}</div>
  141.                                 <div class="val" v-html="variation.bodyLength"></div>
  142.                             </div>
  143.                         </div>
  144.                         <div class="box__select">
  145.                             <input :id="'user_car_variation'+variation.id" v-model="userCar.variation" type="radio" name="variation" hidden="hidden" :value="variation.id">
  146.                             <label :for="'user_car_variation'+variation.id" class="box__select"><span data-on="{{ 'configurator.selected'|trans({}, 'dc_base') }}" data-off="{{ 'configurator.select'|trans({}, 'dc_base') }}"></span>
  147.                             </label>
  148.                         </div>
  149.                     </div>
  150.                 </div>
  151.             </div>
  153.         </div>
  154.     </section>
  155.     <section class="config-slider position-relative" v-if="isCarSelect">
  156.         <div class="config-slider__wrapper" v-if="isCarSelect">
  157.             <div v-if="image.image" v-for="image in images">
  158.                 <img :src="image.image" data-sizes="100vw">
  159.             </div>
  160.         </div>
  161.     </section>
  162.     <section class="car-config" v-if="isCarSelect">
  163.         <div class="car-config__wrap sticky">
  164.             <div class="car-config__info">
  165.                 <div class="container">
  166.                     <div class="row">
  167.                         <div class="col-md-6">
  168.                             <div class="car-config__car-name">{% verbatim %}{{ userCar.title }}{% endverbatim %}</div>
  169.                             <div class="car-config__car-info">
  170.                                 <p v-if="userCar.variation == null">{{ 'configurator.price_from'|trans({}, 'dc_base') }} <b>{% verbatim %}{{ priceFrom | formatPrice }}{% endverbatim %}</b> грн</p>
  171.                                 <p v-if="userCar.variation"><b>{% verbatim %}{{ userCar.totalPrice | formatPrice }}{% endverbatim %}</b> грн</p>
  172.                             </div>
  173.                         </div>
  174.                         <div class="d-flex justify-content-center justify-content-lg-end align-items-center text-center pr-lg-0 col-md-6">
  175.                             <button @click="tabToggle('finish')" v-if="userCar.variation && curTab != 'finish'" class="pl-5 pr-5 btn btn-brand-mode" type="button">
  176.                                 {{ 'configurator.send_order'|trans({}, 'dc_base') }}
  177.                             </button>
  178.                         </div>
  179.                     </div>
  180.                 </div>
  181.             </div>
  182.             <div class="bg_dark-gray car-config__tab-panel">
  183.                 <div class="container">
  184.                     <div class="row">
  185.                         <ul class="car-config__tabs">
  186.                             <li class="car-config__devider" v-if="hasColors"></li>
  187.                             <li class="car-config__tab" v-if="hasColors" @click="tabToggle('colors')" :class="{'active': curTab === 'colors'}">
  188.                                 <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  189.                                     <path d="M19.5103 16.1282L14.6228 11.2065C14.9575 10.6328 14.8802 9.88 14.3913 9.38756L13.3438 8.33282C13.1988 8.18688 12.9637 8.18688 12.8189 8.33282L11.352 9.80998L10.9377 8.9758L13.6671 3.78427C14.0317 3.09074 13.8873 2.1144 13.3383 1.56146L11.8964 0.109471C11.8267 0.0393748 11.7323 0 11.6339 0C11.5355 0 11.441 0.0393748 11.3714 0.109471L10.3873 1.10053L10.3225 1.03539C9.97198 0.682352 9.50609 0.487602 9.01077 0.487012C9.00995 0.487012 9.00933 0.487012 9.00851 0.487012C8.51371 0.487012 8.04871 0.680857 7.69917 1.03291L0.541289 8.24081C0.192031 8.59243 -0.000195164 9.06108 1.48689e-07 9.56044C0.000195461 10.0602 0.193281 10.5298 0.54375 10.8826L1.32992 11.6744C1.69234 12.0393 2.16828 12.2218 2.64398 12.2218C3.1184 12.2218 3.59254 12.0401 3.9534 11.6768L11.1113 4.4689C11.4606 4.11724 11.6528 3.6486 11.6526 3.14923C11.6524 2.64948 11.4593 2.17989 11.1089 1.82701L10.9123 1.62904L11.6339 0.902355L12.8134 2.09005C13.1284 2.40737 13.2207 3.03556 13.011 3.43446L10.1923 8.79599C10.1362 8.90267 10.1348 9.03008 10.1883 9.13805L10.7986 10.3672L9.14433 12.0331C8.99933 12.179 8.99933 12.4157 9.14433 12.5617L10.1918 13.6166C10.7718 14.2005 11.7146 14.2016 12.2941 13.6189L17.1482 18.507C17.4746 18.8356 17.9032 19 18.3317 19C18.7594 19 19.1868 18.8362 19.5121 18.5087C20.1633 17.8529 20.1625 16.7849 19.5103 16.1282ZM10.5864 3.94031L3.42847 11.1482C2.99527 11.5845 2.28941 11.5831 1.8548 11.1457L1.06863 10.354V10.354C0.858398 10.1423 0.742578 9.86033 0.742382 9.56016C0.742304 9.26062 0.857304 8.97981 1.06617 8.76948L8.22421 1.5615C8.43355 1.35066 8.71203 1.23458 9.00867 1.23458C9.00902 1.23458 9.00949 1.23458 9.00995 1.23458C9.30738 1.23494 9.58714 1.35196 9.79777 1.56402L10.584 2.35568C10.7943 2.56742 10.9101 2.84938 10.9103 3.14963C10.9103 3.44917 10.7953 3.72994 10.5864 3.94031ZM18.9871 17.9801C18.6253 18.3445 18.0358 18.3435 17.673 17.9784L12.5565 12.826C12.4869 12.7559 12.3925 12.7166 12.294 12.7166C12.1956 12.7166 12.1012 12.7559 12.0316 12.826L11.7699 13.0895C11.48 13.3815 11.0076 13.3809 10.7166 13.088L9.93159 12.2974L11.4123 10.8063C11.4177 10.8039 11.4234 10.8031 11.4287 10.8004C11.5089 10.76 11.5668 10.6936 11.6004 10.6169L13.0813 9.12574L13.8663 9.91615C14.1568 10.2087 14.1578 10.6842 13.8685 10.9762C13.7239 11.1223 13.724 11.3587 13.8689 11.5045L18.9854 16.6568C19.3482 17.0221 19.3489 17.6157 18.9871 17.9801Z" fill="#fff"></path>
  190.                                 </svg>
  191.                                 <span>{{ 'configurator.tabs.color_tab'|trans({}, 'dc_base') }}</span>
  192.                             </li>
  193.                             <li class="car-config__devider" ></li>
  194.                             <li class="car-config__tab" @click="tabToggle('options')" :class="{'active': curTab === 'options', 'disable': Object.keys(currentOptions).length == 0}">
  195.                                 <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  196.                                     <path d="M16.9922 4.47932C16.9922 4.40713 16.9766 4.33495 16.9454 4.26678C16.8831 4.13043 16.7623 4.0382 16.6298 4.01013L8.69097 0.0481216C8.56236 -0.0160405 8.41036 -0.0160405 8.28175 0.0481216L0.265016 4.04622C0.109124 4.12241 0.00779459 4.28282 0 4.46328V4.46729C0 4.4713 0 4.47531 0 4.48333V14.5167C0 14.7011 0.10133 14.8696 0.265016 14.9498L8.28175 18.9479C8.28565 18.9479 8.28565 18.9479 8.28955 18.9519C8.30124 18.9559 8.31293 18.9599 8.32462 18.9679C8.32852 18.9679 8.33242 18.9719 8.34021 18.9719C8.3519 18.9759 8.36359 18.9799 8.37529 18.984C8.37918 18.984 8.38308 18.988 8.38698 18.988C8.39867 18.992 8.41426 18.992 8.42595 18.996C8.42985 18.996 8.43375 18.996 8.43764 18.996C8.45323 18.996 8.47272 19 8.48831 19C8.5039 19 8.52338 19 8.53897 18.996C8.54287 18.996 8.54677 18.996 8.55066 18.996C8.56236 18.996 8.57795 18.992 8.58964 18.988C8.59353 18.988 8.59743 18.984 8.60133 18.984C8.61302 18.9799 8.62471 18.9759 8.6364 18.9719C8.6403 18.9719 8.6442 18.9679 8.65199 18.9679C8.66369 18.9639 8.67538 18.9599 8.68707 18.9519C8.69097 18.9519 8.69097 18.9519 8.69486 18.9479L16.735 14.9377C16.8948 14.8575 17 14.6891 17 14.5046V4.49135C16.9922 4.48734 16.9922 4.48333 16.9922 4.47932ZM8.48441 1.01456L15.4372 4.48333L12.8767 5.76256L5.92389 2.29379L8.48441 1.01456ZM8.48441 7.95209L1.53164 4.48333L4.85213 2.82714L11.8049 6.29591L8.48441 7.95209ZM0.935351 5.25728L8.01674 8.79021V17.7448L0.935351 14.2119V5.25728ZM8.95209 17.7448V8.79021L12.2765 7.13001V9.47193C12.2765 9.7366 12.4869 9.95315 12.7442 9.95315C13.0014 9.95315 13.2118 9.7366 13.2118 9.47193V6.66083L16.0569 5.24124V14.1959L8.95209 17.7448Z" fill="#fff"></path>
  197.                                 </svg>
  198.                                 <span>{{ 'configurator.tabs.options'|trans({}, 'dc_base') }}</span>
  199.                             </li>
  200.                             <li class="car-config__devider"></li>
  201. {#                            <li class="car-config__tab" @click="tabToggle('accessory')" :class="{'active': curTab === 'accessory', 'disable': Object.keys(accessories).length == 0}">#}
  202.                             <li class="car-config__tab disable" >
  203.                                 <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  204.                                     <path d="M19 8.72595H18.515V5.10612H16.3004L11.3621 0L8.37198 3.09175L6.61522 1.27512L2.91012 5.10619H0V19H18.515V13.4163H19V8.72595ZM14.8479 5.10619H7.8762L11.3621 1.50181L14.8479 5.10619ZM6.61522 2.77692L7.64587 3.84262L6.42378 5.10619H4.36254L6.61522 2.77692ZM17.488 17.9381H1.02703V6.16814H17.488V8.72602H10.7838V13.4163H17.488V17.9381ZM17.973 12.3543H11.8108V9.78789H17.973V12.3543Z" fill="#fff"></path>
  205.                                     <path d="M14 10H13V11H14V10Z" fill="#fff"></path>
  206.                                 </svg>
  207.                                 <span>{{ 'configurator.tabs.acc'|trans({}, 'dc_base') }}</span>
  208.                             </li>
  209.                             <li class="car-config__devider"></li>
  210.                             <li class="car-config__tab" @click="tabToggle('loan')" :class="{'active': curTab === 'loan', 'disable': userCar.variation == null}">
  211.                                 <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  212.                                     <path d="M22.2875 0H9.51627C8.02441 0 6.8038 1.2 6.8038 2.66667V5H0.361664C0.158228 5 0 5.15556 0 5.35556V15.6444C0 15.8444 0.158228 16 0.361664 16H19.9819C20.1854 16 20.3436 15.8444 20.3436 15.6444V12.6667H22.2875C23.7794 12.6667 25 11.4667 25 10V2.64444C25 1.17778 23.7794 0 22.2875 0ZM19.6203 15.2889H0.745931V5.71111H19.6203V15.2889ZM24.2541 10C24.2541 11.0667 23.3725 11.9333 22.2875 11.9333H20.3436V5.71111H24.2541V10ZM24.2541 5H19.9819H7.54973V3.53333H24.2541V5ZM24.2541 2.8H7.54973V2.64444C7.54973 1.57778 8.43128 0.711111 9.51627 0.711111H22.2875C23.3725 0.711111 24.2541 1.57778 24.2541 2.64444V2.8Z" fill="#fff"></path>
  213.                                     <path d="M17.6479 7.77023H17.0757V7.36246C17.0757 7.15858 16.9216 7 16.7235 7H3.3205C3.12242 7 2.96836 7.15858 2.96836 7.36246V7.77023H2.35213C2.15406 7.77023 2 7.9288 2 8.13269V12.8673C2 13.0712 2.15406 13.2298 2.35213 13.2298H2.96836V13.6375C2.96836 13.8414 3.12242 14 3.3205 14H16.7235C16.9216 14 17.0757 13.8414 17.0757 13.6375V13.2298H17.6479C17.8459 13.2298 18 13.0712 18 12.8673V8.13269C18 7.9288 17.8459 7.77023 17.6479 7.77023ZM17.2957 12.4822H16.7235C16.5254 12.4822 16.3714 12.6408 16.3714 12.8447V13.2524H3.67263V12.8447C3.67263 12.6408 3.51857 12.4822 3.3205 12.4822H2.70426V8.49515H3.3205C3.51857 8.49515 3.67263 8.33657 3.67263 8.13269V7.72492H16.3714V8.13269C16.3714 8.33657 16.5254 8.49515 16.7235 8.49515H17.2957V12.4822Z" fill="#fff"></path>
  214.                                     <path d="M10.4998 8C9.12378 8 8 9.12385 8 10.5C8 11.8761 9.12378 13 10.4998 13C11.8759 13 12.9997 11.8761 12.9997 10.5C13.0226 9.12385 11.8988 8 10.4998 8ZM10.4998 12.2661C9.53659 12.2661 8.73389 11.4633 8.73389 10.5C8.73389 9.5367 9.53659 8.73395 10.4998 8.73395C11.4631 8.73395 12.2658 9.5367 12.2658 10.5C12.2658 11.4862 11.486 12.2661 10.4998 12.2661Z" fill="#fff"></path>
  215.                                     <path d="M6.63636 9.99976H4.36364C4.15909 9.99976 4 10.2185 4 10.4998C4 10.781 4.15909 10.9998 4.36364 10.9998H6.63636C6.84091 10.9998 7 10.781 7 10.4998C7 10.2185 6.84091 9.99976 6.63636 9.99976Z" fill="#fff"></path>
  216.                                     <path d="M15.6362 9.99976H13.3635C13.159 9.99976 12.9999 10.2185 12.9999 10.4998C12.9999 10.781 13.159 10.9998 13.3635 10.9998H15.6362C15.8408 10.9998 15.9999 10.781 15.9999 10.4998C15.9999 10.2185 15.8408 9.99976 15.6362 9.99976Z" fill="#fff"></path>
  217.                                 </svg>
  218.                                 <span>{{ 'configurator.tabs.loan'|trans({}, 'dc_base') }}</span>
  219.                             </li>
  220.                             <li class="car-config__devider"></li>
  221.                             <li class="car-config__tab" @click="tabToggle('insurance')" :class="{'active': curTab === 'insurance', 'disable': userCar.variation == null}">
  222.                                 <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  223.                                     <path d="M18.922 12.3982L17.3349 11.6697L16.8807 10.9272C18.6514 9.795 19.7248 7.82753 19.7248 5.70694V2.6583C19.7202 2.48661 19.6239 2.32884 19.4725 2.24995L15.3945 0.0551161C15.2569 -0.0191278 15.0917 -0.0191278 14.9587 0.0597564L11.0092 2.24995C10.8624 2.33348 10.7752 2.48661 10.7798 2.6583V5.76726C10.7752 6.64891 10.9541 7.52592 11.3119 8.33332H8.00459C7.29358 8.33332 6.61927 8.67206 6.18349 9.24281L4.38073 11.6325L1.35321 12.4678C0.555046 12.6859 0.00458716 13.419 0 14.2543V15.4236C0.00458716 16.4491 0.830275 17.2797 1.84404 17.289H2.06422C2.40367 18.5326 3.6789 19.2611 4.90826 18.9131C5.68807 18.695 6.29817 18.0778 6.51376 17.289H13.2569C13.5963 18.5326 14.8716 19.2611 16.1009 18.9131C16.8807 18.695 17.4908 18.0778 17.7064 17.289H18.156C19.1697 17.2844 19.9954 16.4538 20 15.4236V14.0826C19.9954 13.3541 19.5734 12.6998 18.922 12.3982ZM11.6972 2.93207L15.1972 0.987806L18.8073 2.93671V5.70694C18.8028 7.82753 17.5459 9.73467 15.6147 10.556C15.6147 10.556 15.6101 10.556 15.6055 10.556L15.1651 10.7462L14.8073 10.5838C12.9174 9.74395 11.6972 7.85537 11.6972 5.76262V2.93207ZM4.28899 18.0546C3.51835 18.0546 2.89908 17.4236 2.89908 16.6486C2.89908 15.8691 3.52294 15.2426 4.28899 15.2426C5.05963 15.2426 5.6789 15.8737 5.6789 16.6486C5.6789 17.4236 5.05505 18.05 4.28899 18.0546ZM15.4817 18.0546C14.711 18.0546 14.0917 17.4236 14.0917 16.6486C14.0917 15.8737 14.7156 15.2426 15.4817 15.2426C16.2523 15.2426 16.8716 15.8737 16.8716 16.6486C16.8761 17.4236 16.2523 18.05 15.4817 18.0546ZM19.0872 15.419H19.0826C19.078 15.934 18.6651 16.3517 18.156 16.3563H17.7706C17.6055 15.0756 16.4495 14.1754 15.1835 14.3424C14.1468 14.477 13.3257 15.3076 13.1927 16.3563H6.57798C6.41284 15.0756 5.25688 14.1754 3.99083 14.3424C2.95413 14.477 2.13303 15.3076 2 16.3563H1.84404C1.33486 16.3517 0.922018 15.934 0.917431 15.419V14.2496C0.922018 13.832 1.19725 13.4701 1.59633 13.3587L4.77064 12.4817C4.86697 12.4539 4.95413 12.3982 5.01835 12.3147L6.91743 9.79964C7.1789 9.45626 7.58257 9.25673 8.00917 9.25673H11.8349C12.4862 10.2126 13.3899 10.969 14.4404 11.4376L14.9908 11.6789C15.1055 11.73 15.2385 11.73 15.3578 11.6789L15.9771 11.4098C16.0092 11.3959 16.0413 11.382 16.0688 11.368L16.633 12.2822C16.6789 12.3611 16.7477 12.4214 16.8303 12.4585L18.5459 13.2427C18.8716 13.3912 19.0826 13.7206 19.0872 14.0826V15.419Z" fill="#fff"></path>
  224.                                     <path d="M16.9121 5.17517C16.7689 4.9744 16.5154 4.94172 16.3355 5.10047L16.3314 5.10514L14.4176 6.88408L13.7224 5.95492C13.5752 5.75881 13.3175 5.7308 13.1458 5.89889C12.974 6.06698 12.9495 6.36113 13.0967 6.55724L13.1008 6.56191L14.0536 7.83658C14.0577 7.84592 14.0618 7.85059 14.0659 7.85526C14.07 7.85993 14.0741 7.86926 14.0823 7.87393C14.0863 7.8786 14.0945 7.88794 14.0986 7.89261C14.1027 7.89728 14.1109 7.90195 14.115 7.90662C14.1191 7.91129 14.1272 7.91596 14.1354 7.92062C14.1436 7.92529 14.1477 7.92996 14.1518 7.93463C14.16 7.9393 14.164 7.94397 14.1722 7.94864C14.1763 7.95331 14.1845 7.95798 14.1886 7.95798C14.1968 7.96265 14.2049 7.96732 14.2131 7.96732C14.2172 7.97199 14.2254 7.97199 14.2295 7.97665C14.2376 7.98132 14.2458 7.98132 14.254 7.98599C14.2581 7.98599 14.2663 7.99066 14.2704 7.99066C14.2785 7.99066 14.2867 7.99533 14.2949 7.99533C14.299 7.99533 14.3072 8 14.3113 8C14.3235 8 14.3317 8 14.344 8C14.3481 8 14.3522 8 14.3562 8C14.3685 8 14.3808 8 14.393 8C14.3971 8 14.3971 8 14.4012 8C14.4094 8 14.4217 7.99533 14.4298 7.99533C14.4339 7.99533 14.438 7.99533 14.4421 7.99066C14.4503 7.99066 14.4585 7.98599 14.4667 7.98599C14.4707 7.98599 14.4748 7.98132 14.4789 7.98132C14.4871 7.98132 14.4912 7.97665 14.4994 7.97199C14.5035 7.97199 14.5075 7.96732 14.5157 7.96732C14.5198 7.96265 14.528 7.96265 14.5321 7.95798C14.5362 7.95331 14.5443 7.95331 14.5484 7.94864C14.5525 7.94397 14.5607 7.94397 14.5648 7.9393C14.5689 7.93463 14.5771 7.92996 14.5812 7.92996C14.5852 7.92996 14.5893 7.92062 14.5975 7.92062C14.6016 7.91596 14.6057 7.91129 14.6139 7.90662C14.618 7.90195 14.622 7.90195 14.6261 7.89728L16.8466 5.83352C17.0225 5.6701 17.0511 5.38061 16.9121 5.17517Z" fill="#fff"></path>
  225.                                 </svg>
  226.                                 <span>{{ 'configurator.tabs.ins'|trans({}, 'dc_base') }}</span>
  227.                             </li>
  228.                             <li class="car-config__devider"></li>
  229.                             <li class="car-config__tab" @click="tabToggle('finish')" :class="{'active': curTab === 'finish', 'disable': userCar.variation == null}">
  230.                                 <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  231.                                     <path d="M13.8682 6.1396C13.6925 5.95347 13.4076 5.95347 13.2318 6.1396L7.84052 11.8495L5.76821 9.65474C5.59248 9.46861 5.30757 9.46863 5.13181 9.65474C4.95606 9.84085 4.95606 10.1426 5.13181 10.3287L7.52233 12.8605C7.698 13.0466 7.98312 13.0464 8.15872 12.8605L13.8682 6.8136C14.0439 6.62749 14.0439 6.32573 13.8682 6.1396Z" fill="#fff"></path>
  232.                                     <circle cx="9.5" cy="9.5" r="9" stroke="#fff"></circle>
  233.                                 </svg>
  234.                                 <span>{{ 'configurator.tabs.result'|trans({}, 'dc_base') }}</span>
  235.                             </li>
  236.                             <li class="car-config__devider"></li>
  237.                         </ul>
  238.                     </div>
  239.                 </div>
  240.             </div>
  241.         </div>
  242.         <div class="indent car-config__steps">
  243.             <div class="container">
  244.                 <transition name="tab-slide" mode="out-in">
  245.                     <div id="colors" v-if="curTab === 'colors' && hasColors" key="colors">
  246.                         <div class="car-config__step row row-custom">
  247.                             <div class="col-12 col-sm-12">
  248.                                 <div class="box color">
  249.                                     <div class="color__name">
  250.                                         <span>{{ 'configurator.tabs.colors'|trans({}, 'dc_base') }}:</span>
  251.                                         <div name="color-slide" mode="out-in" v-if="curColor !== null">
  252.                                             <span id="colorName" v-html="' ' + curColor.title ? curColor.title : '' "></span>
  253.                                             <span id="colorPrice" v-if="curColor.price > 0" class="color__name-price" v-html="' + '+curColor.price.toLocaleString()+' грн'"></span>
  254.                                         </div>
  255.                                     </div>
  256.                                     <div class="color__wrapper" v-if="Object.keys(slider.colors).length > 0">
  257.                                         <div class="color__var" v-if="color.equipments.length == 0 || color.equipments.indexOf(userCar.equipment) != -1" v-for="color in slider.colors">
  258.                                             <input v-model="userCar.color" type="radio" hidden :id="'color_'+color.id" name="color" :value="color.id">
  259.                                             <label :for="'color_'+color.id">
  260.                                                 <img :src="color.colorPreview">
  261.                                             </label>
  262.                                             <span v-if="color.priceUah > 0" style="font: menu">{% verbatim %} {{ color.priceUah | formatPrice }} {% endverbatim %} грн</span>
  263.                                         </div>
  264.                                     </div>
  266.                                     <div class="configurator-info">
  267.                                         <svg width="20" height="20" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 29C22.732 29 29 22.732 29 15C29 7.26801 22.732 1 15 1C7.26801 1 1 7.26801 1 15C1 22.732 7.26801 29 15 29Z" stroke="#17a2b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M15 9.40002V15" stroke="#17a2b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M15 20.6H15.014" stroke="#17a2b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
  268.                                         <p>{{ 'configurator.color_info'|trans({}, 'dc_base') }}</p>
  269.                                     </div>
  270.                                 </div>
  271.                             </div>
  272.                             <div class="col-12 col-sm-12 mt-3">
  273.                                 <div class="box color" v-if="Object.keys(slider.inColors).length > 0">
  274.                                     <div class="color__name">
  275.                                         <span>{{ 'configurator.tabs.interier'|trans({}, 'dc_base') }}:</span>
  276.                                         <transition name="color-slide" mode="out-in" appear>
  277.                                             <span id="inColorName" v-if="curInColor !== null" style="color: #000; font-weight: bold;">&nbsp;{% verbatim %}{{ curInColor.title }}{% endverbatim %}</span>
  278.                                         </transition>
  279.                                     </div>
  280.                                     <div class="color__wrapper" v-if="Object.keys(slider.inColors).length > 0">
  281.                                         <div class="color__var" v-if="color.equipments.length == 0 || color.equipments.indexOf(userCar.equipment) != -1" v-for="color in slider.inColors">
  282.                                             <input v-model="userCar.inColor" type="radio" hidden :id="'color_'+color.id" name="incolor" :value="color.id">
  283.                                             <span v-if="color.priceUah > 0" style="font: menu">{% verbatim %} {{ color.priceUah | formatPrice }} {% endverbatim %} грн</span>
  284.                                             <label :for="'color_'+color.id">
  285.                                                 <img :src="color.colorPreview">
  286.                                             </label>
  287.                                         </div>
  288.                                     </div>
  289.                                 </div>
  290.                             </div>
  291.                         </div>
  292.                         <div class="row row-custom">
  293.                             <div class="col-12 col-sm-12 car-config__btn-next-step">
  294.                                 <button class="btn pl-5 pr-5 btn-brand-mode btn-brand-transparent" @click="cNext" type="button">
  295.                                     {{ 'configurator.next_step'|trans({}, 'dc_base') }}
  296.                                 </button>
  297.                             </div>
  298.                         </div>
  299.                     </div>
  300.                     <div id="options" v-if="curTab === 'options'" key="options">
  301.                         <div class="car-config__step row row-custom">
  302.                             <div class="col-md-6 col-lg-3 pb-4" v-for="option in currentOptions">
  303.                                 <div class="box box_hovered option">
  304.                                     <div class="box__name option__name">{% verbatim %}{{ option.title }}{% endverbatim %}</div>
  305.                                     <div class="box__price option__price"><b>{% verbatim %}{{ option.price | formatPrice }}{% endverbatim %}</b> грн</div>
  306.                                     <div class="box__select">
  307.                                         <input v-model="userCar.options" type="checkbox" :id="'option_'+option.id" name="option" hidden :value="option.id">
  308.                                         <label :for="'option_'+option.id">
  309.                                             <span data-on="{{ 'configurator.added'|trans({}, 'dc_base') }}" data-off="{{ 'configurator.add'|trans({}, 'dc_base') }}"></span>
  310.                                         </label>
  311.                                     </div>
  312.                                 </div>
  313.                             </div>
  314.                         </div>
  315.                         <div v-if="!currentOptions.length">
  316.                             {{ 'configurator.options_unavailable'|trans({}, 'dc_base') }}
  317.                         </div>
  318.                         <div class="row row-custom">
  319.                             <div class="col-12 col-sm-12 car-config__btn-next-step">
  320.                                 <button class="btn pl-5 pr-5 btn-brand-mode btn-brand-transparent" @click="tabToggle( /*Object.keys(accessories).length ? 'accessory' :*/ 'loan')" type="button">
  321.                                     {{ 'configurator.next_step'|trans({}, 'dc_base') }}
  322.                                 </button>
  323.                             </div>
  324.                         </div>
  325.                     </div>
  326.                     <div id="accessory" v-if="curTab === 'accessory'" key="accessory">
  327.                         <div class="car-config__step-tabs row row-custom">
  328.                             <div class="col-12">
  329.                                 <ul class="nav justify-content-center mb-4" role="tablist">
  330.                                     <li class="nav-item" v-for="(name, id, i) in accessoriesCategory" :key="'c_'+id">
  331.                                         <a :id="'tab_'+id" class="nav-link" :class="{'active': i === 0}" :href="'#cat_'+id" data-toggle="tab" :aria-controls="'#cat_'+id" :aria-selected="i === 0 ? 'true' : 'false'" role="tab">
  332.                                             {% verbatim %}{{ name }}{% endverbatim %}
  333.                                         </a>
  334.                                     </li>
  335.                                 </ul>
  336.                             </div>
  337.                         </div>
  338.                         <div class="car-config__step row row-custom">
  339.                             <div class="w-100 tab-content">
  340.                                 <div v-for="(name, id, i) in accessoriesCategory" class="col-12 tab-pane fade" :class="{'show active': i === 0}" :id="'cat_'+id" role="tabpanel" :aria-labelledby="'tab-'+id">
  341.                                     <div class="row">
  342.                                         <div class="col-md-4 col-lg-3 pb-4" v-for="(a, index) of accessories[id]">
  343.                                             <div class="box box_hovered accessory">
  344.                                                 <div class="accessory__img-wrap">
  345.                                                     <img class="accessory__img" :src="a.image" :alt="a.title">
  346.                                                 </div>
  347.                                                 <div class="accessory__wrapper">
  348.                                                     <div class="box__name accessory__name">
  349.                                                         {% verbatim %}{{ a.title }}{% endverbatim %}
  350.                                                     </div>
  351.                                                     <div class="box__price accessory__price">
  352.                                                         <b>{% verbatim %}{{ a.price | formatPrice }}{% endverbatim %} грн</b>
  353.                                                     </div>
  354.                                                     {#<div class="box__price form__options pt-0">
  355.                                                         <span v-if="a.montage">
  356.                                                             <input v-model="isNeedMontage[a.id]" @change="calcPrice" type="checkbox" :name="'montage_acc_'+a.id" :id="'acc-montage-' + a.id" true-value="true" hidden="hidden">
  357.                                                             <label :for="'acc-montage-' + a.id">
  358.                                                                 <b class="pr-1">+ {% verbatim %}{{ a.montage }}{% endverbatim %}</b> грн установка
  359.                                                             </label>
  360.                                                         </span>
  361.                                                     </div>#}
  362.                                                     <div class="box__select">
  363.                                                         <input v-model="userCar.accessories" type="checkbox" :id="'acc_'+a.id" name="acc" hidden :value="a.id">
  364.                                                         <label :for="'acc_'+a.id">
  365.                                                             <span data-on="{{ 'configurator.selected'|trans({}, 'dc_base') }}" data-off="{{ 'configurator.select'|trans({}, 'dc_base') }}"></span>
  366.                                                         </label>
  367.                                                     </div>
  368.                                                 </div>
  369.                                             </div>
  370.                                         </div>
  371.                                     </div>
  372.                                 </div>
  373.                             </div>
  374.                         </div>
  375.                         <div v-if="!accessories">
  376.                             {{ 'configurator.acc_unavailable'|trans({}, 'dc_base') }}
  377.                         </div>
  378.                         <div class="row row-custom">
  379.                             <div class="col-12 col-sm-12 car-config__btn-next-step">
  380.                                 <button class="btn pl-5 pr-5 btn-brand-mode btn-brand-transparent" @click="tabToggle('loan')" type="button">
  381.                                     {{ 'configurator.next_step'|trans({}, 'dc_base') }}
  382.                                 </button>
  383.                             </div>
  384.                         </div>
  385.                     </div>
  386.                     <div id="loan" v-if="curTab === 'loan'" key="loan">
  387.                         <div class="row car-config__step">
  388.                             <div class="col-12 col-sm-12">
  389.                                 <div class="form loan">
  390.                                     <div class="form__title">{{ 'credit.credit_calc'|trans({}, 'dc_base') }}</div>
  391.                                     <div class="box__price form__config-price">
  392.                                         <span>{{ 'configurator.for_config_price'|trans({}, 'dc_base') }}:</span>
  393.                                         <span><b id="configPriceLoan"> {% verbatim %}{{ userCar.totalPrice | formatPrice}}{% endverbatim %}</b> грн</span>
  394.                                     </div>
  395.                                     <hr class="form__separator">
  396.                                     <div class="row">
  397.                                         <div class="col-md-8">
  398.                                             <div class="form-row pb-4">
  399.                                                 <div class="col-md-6">
  400.                                                     <label class="form__label" for="firstPayment">{{ 'configurator.first_pay'|trans({}, 'dc_base') }}, <span><b id="configPriceLoan"> {% verbatim %}{{credit.prepaid | formatPrice}}{% endverbatim %}</b> грн</span></label>
  401.                                                     <input v-model="credit.avance" readonly="readonly" class="form-control" id="firstPayment" type="number">
  402.                                                 </div>
  403.                                                 <div class="col-md-6 loan__range-box loan__firstPay">
  404.                                                     <span class="d-none d-md-block">{% verbatim %}{{credit.minAvance}}{% endverbatim %}%</span>
  405.                                                     <span class="d-none d-md-block">{% verbatim %}{{credit.maxAvance}}{% endverbatim %}%</span>
  406.                                                     <input v-model="credit.avance" class="loan__ranger" id="firstPaymentRanger" type="range" step="1" :min="credit.minAvance" :max="credit.maxAvance">
  407.                                                 </div>
  408.                                             </div>
  409.                                             <div class="form-row pb-4">
  410.                                                 <div class="col-md-6">
  411.                                                     <label class="form__label" for="monthTerm">{{ 'configurator.loan_terms'|trans({}, 'dc_base') }}</label>
  412.                                                     <input class="form-control" v-model="credit.term" id="monthTerm" type="number">
  413.                                                 </div>
  414.                                                 <div class="col-md-6 loan__range-box">
  415.                                                     <span class="d-none d-md-block">{% verbatim %}{{credit.minTerm}}{% endverbatim %}</span>
  416.                                                     <span class="d-none d-md-block" style="right: 0">{% verbatim %}{{credit.maxTerm}}{% endverbatim %}</span>
  417.                                                     <input class="loan__ranger" id="monthTermRanger" v-model="credit.term" type="range" step="12" :min="credit.minTerm" :max="credit.maxTerm">
  418.                                                 </div>
  419.                                             </div>
  420.                                         </div>
  421.                                         <div class="col-md-4 loan__btn-calc">
  422.                                             <button @click="showCalcResult" class="w-100 btn btn-brand-mode btn-brand-transparent">{{ 'configurator.calc_loan'|trans({}, 'dc_base') }}</button>
  423.                                             <div class="form__note">* {{ 'credit.info'|trans({}, 'dc_base') }}
  424.                                             </div>
  425.                                         </div>
  426.                                     </div>
  427.                                     <div v-show="showCreditResult">
  428.                                         <hr class="d-none d-md-block form__separator">
  429.                                         <div class="loan__title">{{ 'configurator.calc_result'|trans({}, 'dc_base') }}</div>
  430.                                         <div class="resultCalcLoan row">
  431.                                             <div class="col-8 col-md-10">
  432.                                                 <div class="loan__result-name">{{ 'configurator.month_pay'|trans({}, 'dc_base') }}</div>
  433.                                             </div>
  434.                                             <div class="col-4 col-md-2">
  435.                                                 <div class="loan__result"><b>{% verbatim %}{{credit.payment | formatPrice}}{% endverbatim %} </b> грн*</div>
  436.                                             </div>
  437.                                             <div class="col-8 col-md-10">
  438.                                                 <div class="loan__result-name">{{ 'configurator.percent'|trans({}, 'dc_base') }}</div>
  439.                                             </div>
  440.                                             <div class="col-4 col-md-2">
  441.                                                 <div class="loan__result"><b>{% verbatim %}{{credit.percent }}{% endverbatim %} </b> %*</div>
  442.                                             </div>
  443.                                             <div class="col-8 col-md-10">
  444.                                                 <div class="loan__result-name">{{ 'configurator.loan_sum'|trans({}, 'dc_base') }}</div>
  445.                                             </div>
  446.                                             <div class="col-4 col-md-2">
  447.                                                 <div class="loan__result"><b>{% verbatim %}{{credit.amount | formatPrice}}{% endverbatim %}</b> грн*</div>
  448.                                             </div>
  449.                                             <div class="col-8 col-md-10">
  450.                                                 <div class="loan__result-name">{{ 'credit.credit_term'|trans({}, 'dc_base') }}</div>
  451.                                             </div>
  452.                                             <div class="col-4 col-md-2">
  453.                                                 <div class="loan__result"><b>{% verbatim %}{{credit.term }}{% endverbatim %}</b> {{ 'credit.months'|trans({}, 'dc_base') }}*</div>
  454.                                             </div>
  455.                                         </div>
  456.                                     </div>
  457.                                 </div>
  458.                             </div>
  459.                         </div>
  460.                         <div class="row">
  461.                             <div class="col-12 col-sm-12 car-config__btn-next-step">
  462.                                 <button class="btn pl-5 pr-5 btn-brand-mode btn-brand-transparent" @click="tabToggle('insurance')" type="button">
  463.                                     {{ 'configurator.next_step'|trans({}, 'dc_base') }}
  464.                                 </button>
  465.                             </div>
  466.                         </div>
  467.                     </div>
  468.                     <div id="insurance" v-if="curTab === 'insurance'" key="insurance">
  469.                         <div class="car-config__step row">
  470.                             <div class="col-12 col-sm-12">
  471.                                 <div class="form insurance">
  472.                                     <div class="form__title">{{ 'configurator.kasco_price'|trans({}, 'dc_base') }}</div>
  473.                                     <div class="box__price form__config-price">
  474.                                         <span>{{ 'configurator.for_selected_conf'|trans({}, 'dc_base') }}:</span>
  475.                                         <span><b class="configPricInsurance"> {% verbatim %}{{insurance.amount | formatPrice}}{% endverbatim %}</b> грн*</span>
  476.                                     </div>
  477.                                     <hr class="form__separator">
  478.                                     <b>{{ 'configurator.add_info'|trans({}, 'dc_base') }}</b>
  479.                                     <div class="form__label">{{ 'configurator.select_def_inshuranse_alt'|trans({}, 'dc_base') }}:</div>
  480.                                     <select v-on:change="changeInsuranceOptions" v-model="insurance.selectOptions.baseCoefficient" class="d-block d-md-none form__select" name="rate">
  481.                                         <option v-for="item in insurance.baseCoefficients" :value="item.params.coefficient">{% verbatim %}{{item.params.franchise}}{% endverbatim %}%</option>
  482.                                     </select>
  483.                                     <div class="d-none d-md-flex form__radio-box">
  484.                                         <span v-for="(item,index) in insurance.baseCoefficients">
  485.                                             <input :id="'base-i-'+index" v-on:change="changeInsuranceOptions" hidden="" v-model="insurance.selectOptions.baseCoefficient" type="radio" :value="item.params.coefficient">
  486.                                             <label :for="'base-i-'+index">{% verbatim %}{{item.params.franchise}}{% endverbatim %} %</label>
  487.                                         </span>
  488.                                     </div>
  489.                                     <div class="form__options">
  490.                                         <span v-for="(item,index) in insurance.optionCoefficients">
  491.                                             <input type="checkbox" :id="'option-i-'+index"  v-on:change="changeInsuranceOptions" v-model="insurance.selectOptions.options[item.id]" true-value="1" :false-value="item.params.coefficient" hidden="">
  492.                                             <label :for="'option-i-'+index"><span>{% verbatim %}{{item.title}}{% endverbatim %}</span></label>
  493.                                         </span>
  494.                                     </div>
  495.                                     <div v-for="item in insurance.listCoefficients">
  496.                                         <div class="form__label">{% verbatim %}{{item.title}}{% endverbatim %}:</div>
  497.                                         <div class="form__radio-inline">
  498.                                             <span v-for="(param,index) in item.params">
  499.                                                 <input :id="'list-i-' + item.id + '-' + index" :name="'list-r'+item.id" v-on:change="changeInsuranceOptions"  v-model="insurance.selectOptions.list[item.id]" type="radio" :value="param.coefficient" hidden="">
  500.                                                 <label :for="'list-i-' + item.id + '-' + index"><span>{% verbatim %}{{param.title}}{% endverbatim %}</span></label>
  501.                                             </span>
  502.                                         </div>
  503.                                     </div>
  504.                                     <hr class="form__separator">
  505.                                     <div class="form__title">{{ 'configurator.kasco_price'|trans({}, 'dc_base') }}</div>
  506.                                     <div class="box__price form__config-price">
  507.                                         <span>{{ 'configurator.for_selected_conf'|trans({}, 'dc_base') }}:</span>
  508.                                         <span><b class="configPricInsurance"> {% verbatim %}{{insurance.amount | formatPrice}}{% endverbatim %}</b> грн*</span>
  509.                                     </div>
  510.                                     <div class="form__note">* - {{ 'configurator.note_kasko'|trans({}, 'dc_base') }}
  511.                                     </div>
  512.                                 </div>
  513.                             </div>
  514.                         </div>
  515.                         <div class="row">
  516.                             <div class="col-12 col-sm-12 car-config__btn-next-step">
  517.                                 <button class="btn pl-5 pr-5 btn-brand-mode btn-brand-transparent" @click="tabToggle('finish')" type="button">
  518.                                     {{ 'configurator.next_step'|trans({}, 'dc_base') }}
  519.                                 </button>
  520.                             </div>
  521.                         </div>
  522.                     </div>
  523.                     <div id="finish" v-if="curTab === 'finish'" key="finish">
  524.                         <div class="row car-config__step">
  525.                             <div class="col-12 col-sm-12">
  526.                                 <div class="form finish__car">
  527.                                     <div class="form__title">{% verbatim %}{{ userCar.title }}{% endverbatim %} -
  528.                                         <span id="equipmentName">{% verbatim %}{{ userCar.equipmentObject.title }}{% endverbatim %}</span>
  529.                                     </div>
  530.                                     <div class="finish__equipment-desc">{% verbatim %}{{userCar.variationObject.bodyName}}, {{userCar.variationObject.transmissionName}}, {{userCar.variationObject.engine}}, {{userCar.variationObject.driveName}}{% endverbatim %}</div>
  531.                                     <div class="form__options finish__insurance-on">
  533.                                     </div>
  534.                                     <hr class="form__separator">
  535.                                     <div class="row mb-4">
  536.                                         <div class="col-8 col-md-10">
  537.                                             <div class="mt-0 finish__result-name">{{ 'configurator.start_price'|trans({}, 'dc_base') }}</div>
  538.                                         </div>
  539.                                         <div class="col-4 col-md-2">
  540.                                             <div class="finish__result-price"><b>{% verbatim %}{{ userCar.carPrice | formatPrice }}{% endverbatim %}</b> грн</div>
  541.                                         </div>
  542.                                         <div class="col-8 col-md-10 d-sm-flex align-items-center" v-if="userCar.color">
  543.                                             <div>
  544.                                                 <div class="finish__result-name" v-show="userCar.color">{{ 'configurator.tabs.colors'|trans({}, 'dc_base') }}</div>
  545.                                                 <div class="finish__result-option">{% verbatim %}{{ curColor.title }}{% endverbatim %}</div>
  546.                                             </div>
  548.                                             <div class="configurator-info mt-1 mt-sm-4 ml-sm-3">
  549.                                                 <svg width="20" height="20" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 29C22.732 29 29 22.732 29 15C29 7.26801 22.732 1 15 1C7.26801 1 1 7.26801 1 15C1 22.732 7.26801 29 15 29Z" stroke="#17a2b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M15 9.40002V15" stroke="#17a2b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M15 20.6H15.014" stroke="#17a2b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
  550.                                                 <p>{{ 'configurator.color_info'|trans({}, 'dc_base') }}</p>
  551.                                             </div>
  552.                                         </div>
  553.                                         <div class="col-4 col-md-2 d-flex align-items-center justify-content-end" v-if="userCar.color">
  554.                                             <div class="finish__result-price" v-if="curColor.priceUah"><b>{% verbatim %}{{curColor.priceUah | formatPrice}}{% endverbatim %}</b> грн</div>
  555.                                         </div>
  556.                                         <div class="col-12 col-sm-12" v-show="userCar.inColor">
  557.                                             <div class="finish__result-name">{{ 'configurator.tabs.interier'|trans({}, 'dc_base') }}</div>
  558.                                         </div>
  559.                                         <div class="col-8 col-md-10" v-if="userCar.inColor">
  560.                                             <div class="finish__result-option">{% verbatim %}{{ curInColor.title }}{% endverbatim %}</div>
  561.                                         </div>
  562.                                         <div class="col-4 col-md-2" v-if="userCar.inColor">
  563.                                             <div class="finish__result-price" v-if="curInColor.priceUah"><b>{% verbatim %}{{curInColor.priceUah | formatPrice}}{% endverbatim %}</b> грн</div>
  564.                                         </div>
  565.                                         <div class="col-12 col-sm-12" v-show="userCar.optionsObject.length">
  566.                                             <div class="finish__result-name">{{ 'configurator.paid_options'|trans({}, 'dc_base') }}</div>
  567.                                         </div>
  568.                                         <div class="col-8 col-md-10" v-show="userCar.optionsObject.length">
  569.                                             <div class="finish__result-option" v-for="option in userCar.optionsObject">{% verbatim %}{{option.title}}{% endverbatim %}</div>
  570.                                         </div>
  571.                                         <div class="col-4 col-md-2" v-show="userCar.optionsObject.length">
  572.                                             <div class="finish__result-price" v-for="option in userCar.optionsObject"><b>{% verbatim %}{{option.price | formatPrice}}{% endverbatim %}</b> грн</div>
  573.                                         </div>
  574.                                         <div class="col-12 col-sm-12">
  575.                                             <div class="finish__result-name">{{ 'configurator.tabs.ins'|trans({}, 'dc_base') }}</div>
  576.                                         </div>
  577.                                         <div class="col-8 col-md-10">
  578.                                             <div class="form__options finish__insurance-on">
  579.                                                 <input v-model="userCar.needInsurance" type="checkbox" name="getCasco" id="getCasco" hidden>
  580.                                                 <label for="getCasco">{{ 'configurator.kasko_ins'|trans({}, 'dc_base') }}</label>
  581.                                             </div>
  582.                                         </div>
  583.                                         <div class="col-4 col-md-2">
  584.                                             <div class="finish__result-price" v-show="userCar.needInsurance"><b>{% verbatim %}{{ insurance.amount | formatPrice }}{% endverbatim %}</b> грн</div>
  585.                                         </div>
  586.                                         <div class="col-12 col-sm-12" v-show="userCar.accessoriesObject.length">
  587.                                             <div class="finish__result-name">{{ 'configurator.tabs.acc'|trans({}, 'dc_base') }}</div>
  588.                                         </div>
  589.                                         <div class="col-8 col-md-10" v-show="userCar.accessoriesObject.length">
  590.                                             <div class="finish__result-option" v-for="accessory in userCar.accessoriesObject">{% verbatim %}{{accessory.title}}{% endverbatim %}</div>
  591.                                         </div>
  592.                                         <div class="col-4 col-md-2" v-show="userCar.accessoriesObject.length">
  593.                                             <div class="finish__result-price" v-for="accessory in userCar.accessoriesObject"><b>{% verbatim %}{{accessory.price | formatPrice}}{% endverbatim %}</b> грн</div>
  594.                                         </div>
  595.                                     </div>
  596.                                     <hr class="form__separator">
  597.                                     <div class="row">
  598.                                         <div class="col-8 col-md-10" style="height: 30px">
  599.                                             <div class="mt-0 finish__result-name">{{ 'configurator.total_cost'|trans({}, 'dc_base') }}</div>
  600.                                         </div>
  601.                                         <div class="col-4 col-md-2" style="height: 30px">
  602.                                             <div class="finish__result-price"><b>{% verbatim %}{{userCar.offerPrice | formatPrice}}{% endverbatim %}</b> грн</div>
  603.                                         </div>
  604.                                     </div>
  605.                                 </div>
  606.                                 <div class="form finish__loan">
  607.                                     <div class="form__title">{{ 'configurator.loan_offer'|trans({}, 'dc_base') }}</div>
  608.                                     <hr class="mt-3 mb-0 form__separator">
  609.                                     <div class="resultCalcLoan row">
  610.                                         <div class="col-8 col-md-10">
  611.                                             <div class="loan__result-name">{{ 'configurator.month_pay'|trans({}, 'dc_base') }}</div>
  612.                                         </div>
  613.                                         <div class="col-4 col-md-2">
  614.                                             <div class="loan__result"><b>{% verbatim %}{{credit.payment | formatPrice}}{% endverbatim %}</b> грн</div>
  615.                                         </div>
  616.                                         <div class="col-8 col-md-10">
  617.                                             <div class="loan__result-name">{{ 'configurator.percent'|trans({}, 'dc_base') }}</div>
  618.                                         </div>
  619.                                         <div class="col-4 col-md-2">
  620.                                             <div class="loan__result"><b>{% verbatim %}{{credit.percent}}{% endverbatim %}</b> %</div>
  621.                                         </div>
  622.                                         <div class="col-8 col-md-10">
  623.                                             <div class="loan__result-name">{{ 'configurator.loan_sum'|trans({}, 'dc_base') }}</div>
  624.                                         </div>
  625.                                         <div class="col-4 col-md-2">
  626.                                             <div class="loan__result"><b>{% verbatim %}{{credit.amount | formatPrice}}{% endverbatim %}</b> грн</div>
  627.                                         </div>
  628.                                         <div class="col-8 col-md-10">
  629.                                             <div class="loan__result-name">{{ 'credit.credit_term'|trans({}, 'dc_base') }}</div>
  630.                                         </div>
  631.                                         <div class="col-4 col-md-2">
  632.                                             <div class="loan__result"><b>{% verbatim %}{{credit.term}}{% endverbatim %}</b> {{ 'credit.months'|trans({}, 'dc_base') }}</div>
  633.                                         </div>
  634.                                     </div>
  635.                                     <hr class="mt-3 form__separator">
  636.                                     <div class="pt-0 form__options finish__get-full-calc">
  637.                                         <input v-model="userCar.needCredit" type="checkbox" hidden checked id="getFullCalc">
  638.                                         <label for="getFullCalc">{{ 'configurator.get_detail_calc'|trans({}, 'dc_base') }}</label>
  639.                                     </div>
  640.                                 </div>
  641.                             </div>
  642.                         </div>
  643.                         <div class="row">
  644.                             <div class="col-12 col-sm-12 car-config__btn-next-step">
  645.                                 <button class="pl-5 pr-5 btn btn-brand-mode" @click="showOfferModal" type="button">{{ 'configurator.send_app'|trans({}, 'dc_base') }}</button>
  646.                                 <button class="pl-5 pr-5 mt-3 btn btn-brand-mode" @click="showEmailModal" type="button">{{ 'configurator.recive_to_email'|trans({}, 'dc_base') }}</button>
  647.                             </div>
  648.                         </div>
  649.                     </div>
  650.                 </transition>
  651.             </div>
  652.         </div>
  653.     </section>
  654.     <section class="pop-up config-pop modal fade modal-fw-window" id="makeApp" v-if="userCar.variation" tabindex="-1" role="dialog" aria-labelledby="makeAppLabel" aria-hidden="true">
  655.         <div class="modal-dialog pop-up__dialog pop-up__dialog_container-width" role="document">
  656.             <div class="modal-content pop-up__content">
  657.                 <div class="modal-header pop-up__header container">
  658.                     <div class="modal-title pop-up__title" id="makeAppLabel">{{ 'configurator.make_app'|trans({}, 'dc_base') }}</div>
  659.                     <button class="close" type="button" data-dismiss="modal" aria-label="Close">
  660.                         <span aria-hidden="true">&times;</span>
  661.                     </button>
  662.                 </div>
  663.                 <div class="modal-body pop-up__body form">
  664.                     <div class="card config-pop__card container">
  665.                         <div class="config-pop__card-img" v-if="!emailIsSend">
  666.                             <img :src="userCar.src" :alt="userCar.title" >
  667.                         </div>
  668.                         <div class="card-body" v-if="!emailIsSend" style="flex: 0 0 28%">
  669.                             <div class="config-pop__card-left">
  670.                                 <div class="card-title">
  671.                                     {% verbatim %}{{ userCar.title }}{% endverbatim %} - <span>{% verbatim %}{{ userCar.equipmentObject.title }}{% endverbatim %}</span>
  672.                                 </div>
  673.                                 <div class="config-pop__card-attr">{% verbatim %}{{ userCar.variationObject.bodyName}}, {{userCar.variationObject.transmissionName}}, {{userCar.variationObject.engine}}, {{userCar.variationObject.driveName}}{% endverbatim %}</div>
  674.                             </div>
  675.                             <div class="config-pop__card-right">
  676.                                 <span>{{ 'configurator.total_cost'|trans({}, 'dc_base') }}:</span>
  677.                                 <div class="config-pop__card-price">{% verbatim %}{{ userCar.offerPrice | formatPrice }}{% endverbatim %} грн</div>
  678.                             </div>
  679.                         </div>
  680.                         <div class="card-footer" v-if="!emailIsSend" style="flex: 0 0 35.5%">
  681.                             <div class="row">
  682.                                 <div class="form-group" :class="{'col-md-12' : emailOnly == true, 'col-md-6' : emailOnly == false}">
  683.                                     <input name="name" v-model="userCar.name" id="configurator_user_name" class="form-control" placeholder="Имя" type="text">
  684.                                 </div>
  685.                                 <div class="col-md-6 form-group" v-if="!emailOnly">
  686.                                     <input v-model="userCar.phone" name="phone" id="configurator_user_phone" v-mask="'+38(###)###-##-##'" class="form-control" placeholder="Телефон" type="text">
  687.                                 </div>
  688.                                 <div class="col-12 col-md-6 form-group">
  689.                                     <input v-model="userCar.email" id="configurator_user_email" class="form-control" name="email" placeholder="E-mail" type="text">
  690.                                 </div>
  691.                                 <div class="form-group checkbox style-b" v-if="privacyUrl">
  692.                                     <label class="checkboxes__item-privacy">
  693.                                         <input type="checkbox" v-model="checkPrivacy"/>
  694.                                         <div id="check_privacy" class="checkbox__checkmark form-control"></div>
  695.                                         <div class="checkbox__body">{{ 'callback_widget.privacy'|trans({}, 'dc_base') }} <a :href="privacyUrl" target="_blank">{{ 'callback_widget.privacy_link'|trans({}, 'dc_base') }}</a></div>
  696.                                     </label>
  697.                                 </div>
  698.                                 <div class="col-12 col-md-6 text-center">
  699.                                     <button class="w-100 btn pr-4 pl-4 btn-brand-mode" @click="sendOffer" type="submit" >{{ 'configurator.send'|trans({}, 'dc_base') }}</button>
  700.                                 </div>
  701.                             </div>
  702.                         </div>
  703.                     </div>
  704.                     <div class="card" v-if="emailIsSend">
  705.                         <div class="thx-img">
  706.                             <img src="{{ asset('/bundles/dcsite/img/toyota/done.svg') }}" alt="done" >
  707.                         </div>
  709.                         <div class="card-body">
  710.                             <div class="thx-msg">{{ 'configurator.thx_text'|trans({}, 'dc_base')|raw }}</div>
  711.                         </div>
  712.                     </div>
  713.                 </div>
  714.             </div>
  715.         </div>
  716.     </section>
  717. </div>