src/DcSiteBundle/Resources/views/Modules/n-trade-in.html.twig line 1

Open in your IDE?
  1. {% block css %}
  2.     <link rel="stylesheet" href="{{ asset('bundles/dcsite/css/modules/trade-in/trade-in.css') }}">
  3. {% endblock %}
  4. <section class="trade_in-widget-wrap section_padd mt-3">
  5.     <div class="container" id="ti-new-widget">
  6.         <div class="row">
  7.             <div class="col-md-12">
  8.                 <div class="trade_in-widget">
  9.                     <div class="row trade_in-widget-number">
  10.                         <div class="col col-sm-4">
  11.                             <div class="trade_in-steep" :class="{'active': step == 1}">
  12.                                 <span class="trade_in-steep-number">01</span>
  13.                                 <p class="trade_in-steep-desc">{{ 'trade_in.fill_base'|trans({}, 'dc_base') }}</p>
  14.                             </div>
  15.                         </div>
  16.                         <div class="col col-sm-4">
  17.                             <div class="trade_in-steep" :class="{'active': step == 2}">
  18.                                 <span class="trade_in-steep-number">02</span>
  19.                                 <p class="trade_in-steep-desc">{{ 'trade_in.get_estimate_future'|trans({}, 'dc_base') }}</p>
  20.                             </div>
  21.                         </div>
  22.                         <div class="col col-sm-4">
  23.                             <div class="trade_in-steep" :class="{'active': step >= 3}">
  24.                                 <span class="trade_in-steep-number">03</span>
  25.                                 <p class="trade_in-steep-desc">{{ 'trade_in.select'|trans({}, 'dc_base') }}</p>
  26.                             </div>
  27.                         </div>
  28.                         <div class="col-md-12">
  29.                             <hr>
  30.                         </div>
  31.                     </div>
  33.                     <div class="col-md-12" v-if="step == 1 && !showForm">
  34.                         <div class="trade__in-choose-car" v-if="oldEstimate.length > 0">
  35.                             <ul class="tradein__viewed-list">
  36.                                 <li class="tradein__viewed-item" v-for="estimateItem in oldEstimate">
  37.                                     <div class="tradein__viewed-link">
  38.                                         <a href="#" class="tradein__viewed-name"
  39.                                            @click.prevent="estimate(estimateItem.hash)">
  40.                                             <span>{% verbatim %}{{ estimateItem.vehicle }}{% endverbatim %}</span>
  41.                                             <span class="tradein__viewed-info">
  42.                                                 {% verbatim %}{{ estimateItem.year }}{% endverbatim %} г.в., {{ 'trade_in.trade_in_mileage'|trans({}, 'dc_base') }} {% verbatim %}{{ estimateItem.mileage }}{% endverbatim %} км
  43.                                             </span>
  44.                                         </a>
  45.                                         <a href="#" class="tradein__viewed-delete"
  46.                                            @click.prevent="removeEstimate(estimateItem.hash)">
  47.                                             <span class="d-none d-md-inline-flex">{{ 'trade_in.remove'|trans({}, 'dc_base') }}</span>
  48.                                         </a>
  49.                                     </div>
  50.                                 </li>
  51.                             </ul>
  52.                             <div class="trade__in-choose-car_note">*
  53.                                 — {{ 'trade_in.old_info'|trans({}, 'dc_base') }}</div>
  54.                         </div>
  55.                         {% if dealer is defined and dealer.id == 6 %}
  56.                         <h1 class="trade_in-title">{{ 'trade_in.free_estimate'|trans({}, 'dc_base') }}</h1>
  57.                         {% else %}
  58.                         <p class="trade_in-title">{{ 'trade_in.free_estimate'|trans({}, 'dc_base') }}</p>
  59.                         {% endif %}
  60.                         <p class="trade_in-desc mb-0">{{ 'trade_in.free_estimate_desc'|trans({}, 'dc_base') }}</p>
  61.                         <p class="trade_in-desc">{{ 'trade_in.free_estimate_desc_price'|trans({}, 'dc_base') }}</p>
  62.                         <div class="trade_in-first-form">
  63.                             <div class="form-group">
  64.                                 <input v-model="number" type="text" class="form-control text-center"
  65.                                        placeholder="{{ 'trade_in.car_number'|trans({}, 'dc_base') }}">
  66.                             </div>
  67.                             <button @click="findVehicle"
  68.                                     class="btn btn-primary">{{ 'trade_in.free_estimate_btn'|trans({}, 'dc_base') }}</button>
  69.                             <button @click="showManualForm"
  70.                                     class="dont_know-nmbr">{{ 'trade_in.free_estimate_dont_btn'|trans({}, 'dc_base') }}</button>
  71.                         </div>
  72.                     </div>
  74.                     <div class="col-md-12" v-if="step == 1 && showForm">
  75.                         <div class="trade_in-second-steeps">
  76.                             <div class="row">
  77.                                 <div class="col-md-12">
  78.                                     {# <a href="#" @click.stop.prevent="goBack" class="trade_in-goback">
  79.                                         <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
  80.                                             <path d="M6 1L2 5.5L6 10" stroke="#869198" stroke-width="1.5"/>
  81.                                         </svg>
  82.                                         {{ 'trade_in.trade_in_go_back'|trans({}, 'dc_base') }}
  83.                                     </a> #}
  84.                                     <div class="col-md-12" v-if="isManual">
  85.                                         <span class="trade_in-form-title">{{ 'trade_in.give_info'|trans({}, 'dc_base') }}</span>
  86.                                     </div>
  87.                                     <div class="trade_in-second-info" v-if="byNumber && searchResult">
  88.                                         <span class="trade_in-second-info-title"
  89.                                               v-html="searchResult.Brand+' '+searchResult.Model+' '+searchResult.MakeYear"></span>
  90.                                         <div class="d-flex">
  91.                                             <span class="trade_in-second-info-options"
  92.                                                   v-html="searchResult.Capacity+' см3 / '+searchResult.Fuel"></span>
  93.                                             <span class="trade_in-second-info-options"
  94.                                                   v-html="searchResult.Color"></span>
  95.                                         </div>
  96.                                     </div>
  97.                                     <div class="row">
  98.                                         <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4">
  99.                                             <div class="form-group">
  100.                                                 <select id="brand" class="form-control" v-model="data.brand"
  101.                                                         data-live-search="true">
  102.                                                     <option :value="null" disabled>Марка*</option>
  103.                                                     {% verbatim %}
  104.                                                         <option :value="brand.id" v-for="brand in api.brands">{{ brand.title }}</option>
  105.                                                     {% endverbatim %}
  106.                                                 </select>
  107.                                             </div>
  108.                                         </div>
  109.                                         <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4">
  110.                                             <div class="form-group">
  111.                                                 <select id="model" class="form-control" v-model="data.model"
  112.                                                         data-live-search="true" :disabled="api.models.length == 0">
  113.                                                     <option :value="null"
  114.                                                             disabled>{{ 'form.model'|trans({}, 'dc_base') }}*
  115.                                                     </option>
  116.                                                     {% verbatim %}
  117.                                                         <option :value="model.id" v-for="model in api.models">{{ model.title }}</option>
  118.                                                     {% endverbatim %}
  119.                                                 </select>
  120.                                             </div>
  121.                                         </div>
  122.                                         <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4">
  123.                                             <div class="form-group">
  124.                                                 <select id="year" class="form-control" v-model="data.year"
  125.                                                         :disabled="!data.model">
  126.                                                     <option :value="null"
  127.                                                             disabled>{{ 'form.year'|trans({}, 'dc_base') }}*
  128.                                                     </option>
  129.                                                     {% verbatim %}
  130.                                                         <option :value="year" v-for="year in api.years">{{ year }}</option>
  131.                                                     {% endverbatim %}
  132.                                                 </select>
  133.                                             </div>
  134.                                         </div>
  135.                                         <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4">
  136.                                             <div class="form-group">
  137.                                                 <select id="mileage" class="form-control" v-model="data.mileage"
  138.                                                         :disabled="!data.model">
  139.                                                     <option :value="null"
  140.                                                             disabled>{{ 'trade_in.yardage'|trans({}, 'dc_base') }}*
  141.                                                     </option>
  142.                                                     {% verbatim %}
  143.                                                         <option :value="item.id" v-for="item in api.mileage">{{ item.title }}</option>
  144.                                                     {% endverbatim %}
  145.                                                 </select>
  146.                                             </div>
  147.                                         </div>
  148.                                         <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4" v-if="api.fuel">
  149.                                             <div class="form-group">
  150.                                                 <select class="form-control" v-model="data.fuel"
  151.                                                         :disabled="!data.model">
  152.                                                     <option :value="null"
  153.                                                             disabled>{{ 'trade_in.fuel'|trans({}, 'dc_base') }}</option>
  154.                                                     {% verbatim %}
  155.                                                         <option v-if="item.id < 7" :value="item.id" v-for="item in api.fuel">{{ item.title }}</option>
  156.                                                     {% endverbatim %}
  157.                                                 </select>
  158.                                             </div>
  159.                                         </div>
  160.                                         <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4" v-if="api.transmission">
  161.                                             <div class="form-group">
  162.                                                 <select class="form-control" v-model="data.transmission"
  163.                                                         :disabled="!data.model">
  164.                                                     <option :value="null"
  165.                                                             disabled>{{ 'trade_in.trans'|trans({}, 'dc_base') }}</option>
  166.                                                     {% verbatim %}
  167.                                                         <option v-if="transmission.id < 3" :value="transmission.id" v-for="transmission in api.transmission">{{ transmission.title }}</option>
  168.                                                     {% endverbatim %}
  169.                                                 </select>
  170.                                             </div>
  171.                                         </div>
  172.                                     </div>
  173.                                     <div class="row">
  174.                                         <div class="col-md-12">
  175.                                             <span class="trade_in-form-title">{{ 'trade_in.contact'|trans({}, 'dc_base') }}*</span>
  176.                                         </div>
  177.                                         <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
  178.                                             <div class="form-group">
  179.                                                 <input class="form-control" autocomplete="off" type="text"
  180.                                                        id="service_name" v-model="data.name"
  181.                                                        placeholder="{{ 'form.name'|trans({}, 'dc_base') }}*"
  182.                                                        class="name">
  183.                                             </div>
  184.                                         </div>
  185.                                         <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
  186.                                             <div class="form-group">
  187.                                                 <input class="form-control" autocomplete="off" type="text"
  188.                                                        id="service_email" v-model="data.email" placeholder="E-mail"
  189.                                                        class="name">
  190.                                             </div>
  191.                                         </div>
  192.                                         <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
  193.                                             <div class="form-group" v-if="isInit">
  194.                                                 <input class="form-control" autocomplete="off"
  195.                                                        v-mask="'+38(###)###-##-##'" id="service_phone"
  196.                                                        v-model="data.phone"
  197.                                                        placeholder="{{ 'form.phone'|trans({}, 'dc_base') }}*">
  198.                                             </div>
  199.                                         </div>
  201.                                         {# Спосіб зв'язку для Тойота Бориспіль #}
  202.                                         {% if dealer is defined and dealer.id == 43 %}
  203.                                         <div class="consultation-form__group mb-4">
  204.                                                     <label class="check-label">
  205.                                                         <input type="radio" name="connect_type" value="Phone" v-model="data.connectionType">
  206.                                                         <span class="check-label__checkmark">
  207.                                             <svg class="icon" role="presentation"><use xlink:href="#icon-check"></use></svg>
  208.                                         </span>
  210.                                                         <span class="check-label__value">
  211.                                             <svg class="icon --phone" width="18px" height="17px" role="presentation"></svg>
  212.                                             {{ 'multi_consultation.step_3.phone'|trans({}, 'dc_base') }}
  213.                                         </span>
  214.                                                     </label>
  215.                                                     <label class="check-label">
  216.                                                         <input type="radio" name="connect_type" value="Viber" v-model="data.connectionType">
  217.                                                         <span class="check-label__checkmark">
  218.                                             <svg class="icon" role="presentation"><use xlink:href="#icon-check"></use></svg>
  219.                                         </span>
  221.                                                         <span class="check-label__value">
  222.                                             <svg class="icon" width="24px" height="21px" role="presentation"></svg>
  223.                                             Viber
  224.                                         </span>
  225.                                                     </label>
  226.                                                     <label class="check-label">
  227.                                                         <input type="radio" name="connect_type" value="Whatsapp" v-model="data.connectionType">
  228.                                                         <span class="check-label__checkmark">
  229.                                             <svg class="icon" role="presentation"><use xlink:href="#icon-check"></use></svg>
  230.                                         </span>
  232.                                                         <span class="check-label__value">
  233.                                             <svg class="icon" width="24px" height="20px" role="presentation"></svg>
  234.                                             Whatsapp
  235.                                         </span>
  236.                                                     </label>
  237. {#                                                    <label class="check-label">#}
  238. {#                                                        <input type="radio" name="connect_type" value="Telegram" v-model="data.connectionType">#}
  239. {#                                                        <span class="check-label__checkmark">#}
  240. {#                                            <svg class="icon" role="presentation"><use xlink:href="#icon-check"></use></svg>#}
  241. {#                                        </span>#}
  243. {#                                                        <span class="check-label__value">#}
  244. {#                                            <svg class="icon" width="22px" height="17px" role="presentation"></svg>#}
  245. {#                                            Telegram#}
  246. {#                                        </span>#}
  247. {#                                                    </label>#}
  248.                                                 </div>
  249.                                         {% endif %}
  251.                                         <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
  252.                                             {#                                            <button @click.prevent="estimate()" :disabled="disableSendLead" class="btn btn-primary w-100 mb-4">{{ 'trade_in.estimate'|trans({}, 'dc_base') }}</button> #}
  253.                                             <button @click.prevent="estimate()"
  254.                                                     class="btn btn-primary w-100 mb-4">{{ 'trade_in.estimate'|trans({}, 'dc_base') }}</button>
  255.                                         </div>
  257.                                         <div class="col-sm-12">
  258.                                             <div class="consultation-form___policy-line">
  259.                                                 <div class="checkboxes__item-privacy" v-if="baseOptions.agreementUrl">
  260.                                                     <label class="checkbox style-b">
  261.                                                         <input type="checkbox" v-model="confirm"/>
  262.                                                         <div id="check_privacy" class="checkbox__checkmark form-control"></div>
  263.                                                         <div class="checkbox__body">{{ 'multi_consultation.step_3.confirm'|trans({}, 'dc_base') }}
  264.                                                             <a class="" :href="baseOptions.agreementUrl" target="_blank">{{ 'multi_consultation.step_3.confirm_more'|trans({}, 'dc_base') }}</a>
  265.                                                         </div>
  266.                                                     </label>
  267.                                                 </div>
  269. {#                                                <label class="check-label" id="confirm-lb">#}
  270. {#                                                    <input type="checkbox" v-model="confirm" name="policy"#}
  271. {#                                                           value="policy" required checked>#}
  272. {#                                                    <span class="check-label__checkmark">#}
  273. {#                                                    <svg class="icon" role="presentation"><use#}
  274. {#                                                                xlink:href="#icon-check"></use></svg>#}
  275. {#                                                </span>#}
  276. {#                                                    <span class="check-label__value">{{ 'multi_consultation.step_3.confirm'|trans({}, 'dc_base') }} <a#}
  277. {#                                                                :href="baseOptions.agreementUrl" target="_blank"#}
  278. {#                                                                rel="nofollow">{{ 'multi_consultation.step_3.confirm_more'|trans({}, 'dc_base') }}</a></span>#}
  279. {#                                                </label>#}
  280.                                             </div>
  281.                                         </div>
  282.                                     </div>
  283.                                 </div>
  284.                             </div>
  285.                         </div>
  286.                     </div>
  288.                     <div class="row" v-if="step > 1">
  289.                         <div class="col-md-12">
  290.                             <div class="trade_in-fourth-steeps">
  291.                                 <div class="row">
  292.                                     <div class="col-md-12">
  293.                                         <a href="#" @click.stop.prevent="goBack" class="trade_in-goback">
  294.                                             <svg width="7" height="11" viewBox="0 0 7 11" fill="none"
  295.                                                  xmlns="http://www.w3.org/2000/svg">
  296.                                                 <path d="M6 1L2 5.5L6 10" stroke="#869198" stroke-width="1.5"/>
  297.                                             </svg>
  298.                                             {{ 'trade_in.trade_in_go_back'|trans({}, 'dc_base') }}
  299.                                         </a>
  301.                                         <div class="trade_in-second-info trade_in-last-steep" id="userCarInfo"
  302.                                              v-if="api.result">
  303.                                             <div>
  304.                                                 <span class="trade_in-second-info-title"
  305.                                                       v-html="api.result.vehicle+' '+api.result.year"></span>
  306.                                             </div>
  307.                                             <div class="trade_in-second-info-price"
  308.                                                  v-if="api.result.success && step > 2">
  309.                                                 <span class="">
  310.                                                     {{ 'trade_in.free_estimate_price_buy'|trans({}, 'dc_base') }}:
  311.                                                     <b v-if="api.result.isSelect"
  312.                                                        v-html="(api.result.priceSelect*1).toLocaleString()+' грн*'"></b>
  313.                                                     <b v-if="!api.result.isSelect && step != 3"
  314.                                                        v-html="(api.result.priceTI*1).toLocaleString()+' грн*'"></b>
  315.                                                     <b v-if="!api.result.isSelect && step == 3"
  316.                                                        v-html="(api.result.priceBuy*1).toLocaleString()+' грн*'"></b>
  317.                                                 </span>
  318.                                             </div>
  320.                                         </div>
  321.                                         <div class="row" v-if="!api.result.success && step == 2">
  322.                                             <div class="col-md-12">
  323.                                                 <div class="trade_in-fourth-info">
  324.                                                     <p v-if="api.result.isSelect && !api.result.priceSelect">{{ 'trade_in.trade_in_info_select_no_price'|trans({}, 'dc_base')|raw }}</p>
  325.                                                     <p v-else-if="api.result.isSelect">{{ 'trade_in.trade_in_info_select'|trans({}, 'dc_base')|raw }}</p>
  326.                                                     <p v-else>{{ 'trade_in.trade_in_info_one'|trans({}, 'dc_base')|raw }}</p>
  327.                                                     <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
  328.                                                          xmlns="http://www.w3.org/2000/svg">
  329.                                                         <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"
  330.                                                               stroke="#E40C25" stroke-width="2" stroke-linecap="round"
  331.                                                               stroke-linejoin="round"/>
  332.                                                         <path d="M15 9.40002V15" stroke="#E40C25" stroke-width="2"
  333.                                                               stroke-linecap="round" stroke-linejoin="round"/>
  334.                                                         <path d="M15 20.6H15.014" stroke="#E40C25" stroke-width="2"
  335.                                                               stroke-linecap="round" stroke-linejoin="round"/>
  336.                                                     </svg>
  337.                                                 </div>
  338.                                             </div>
  339.                                         </div>
  342.                                         <div class="row" v-if="step == 2">
  343.                                             <div class="col-md-12">
  344.                                                 <span class="trade_in-fourth-steeps-title">{{ 'trade_in.free_estimate_we_proposition'|trans({}, 'dc_base') }}:</span>
  345.                                             </div>
  348.                                             <div class="col-md-6" v-if="!(baseOptions.dealer && baseOptions.dealer == '43')">
  349.                                                 <div :style="(api.result.isSelect ? 'border: #4BCA81 2px solid' : '')"
  350.                                                      class="tradein_widget-options tradein_widget-options-tradein">
  351.                                                     <div class="trade_in-fourth-steeps-borders-img">
  352.                                                         <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
  353.                                                              xmlns="http://www.w3.org/2000/svg">=
  354.                                                             <path d="M19.1667 3.33337V8.33337H14.1667" stroke="#515B62"
  355.                                                                   stroke-width="2" stroke-linecap="round"
  356.                                                                   stroke-linejoin="round"></path>
  357.                                                             <path d="M0.833332 16.6666V11.6666H5.83333" stroke="#515B62"
  358.                                                                   stroke-width="2" stroke-linecap="round"
  359.                                                                   stroke-linejoin="round"></path>
  360.                                                             <path d="M2.925 7.49998C3.34764 6.30564 4.06594 5.23782 5.01289 4.39616C5.95983 3.55451 7.10455 2.96645 8.34024 2.68686C9.57592 2.40727 10.8623 2.44527 12.0793 2.79729C13.2964 3.14932 14.4044 3.80391 15.3 4.69998L19.1667 8.33331M0.833332 11.6666L4.7 15.3C5.59562 16.1961 6.70364 16.8506 7.92067 17.2027C9.1377 17.5547 10.4241 17.5927 11.6598 17.3131C12.8954 17.0335 14.0402 16.4455 14.9871 15.6038C15.9341 14.7621 16.6524 13.6943 17.075 12.5"
  361.                                                                   stroke="#515B62" stroke-width="2"
  362.                                                                   stroke-linecap="round" stroke-linejoin="round"></path>
  363.                                                             <defs>
  364.                                                                 <clipPath id="clip0">
  365.                                                                     <rect width="20" height="20" fill="white"></rect>
  366.                                                                 </clipPath>
  367.                                                             </defs>
  368.                                                         </svg>
  369.                                                     </div>
  370.                                                     <div>
  371.                                                         <span class="trade_in-fourth-steeps-borders-title">Trade–In</span>
  372.                                                         <img data-toggle="tooltip"
  373.                                                              data-original-title="{{ 'trade_in.select_info'|trans({}, 'dc_base') }}"
  374.                                                              class="w-tooltip blink"
  375.                                                              title="{{ 'trade_in.select_info'|trans({}, 'dc_base') }}"
  376.                                                              v-if="api.result.isSelect"
  377.                                                              src="{{ asset('/bundles/dcsite/img/cars.png') }}"
  378.                                                              style="position: absolute; width: 80px; right: 30px;  top: 15px;">
  379.                                                         <div class="tradein_redemption-block" style="opacity: 0.5;"
  380.                                                              v-if="api.result.isSelect && api.result.priceSelect > api.result.priceTI && api.result.priceTI > 0 && api.result.priceTI > api.result.priceBuy">
  381.                                                             <span v-if="api.result.isSelect"
  382.                                                                   style="text-decoration: line-through"
  383.                                                                   class="tradein_redemption-title">{{ 'trade_in.price'|trans({}, 'dc_base') }} по Trade–In:</span>
  384.                                                             <span v-if="api.result.isSelect"
  385.                                                                   class="tradein_redemption-price"
  386.                                                                   style="color:#515B62; text-decoration: line-through"
  387.                                                                   v-html="(api.result.priceTI*1).toLocaleString()+' грн*'"></span>
  388.                                                         </div>
  389.                                                         <div v-if="api.result.isSelect && api.result.priceSelect > 0"
  390.                                                              class="tradein_redemption-block"
  391.                                                              :style="api.result.isSelect && (api.result.priceSelect <= api.result.priceTI || api.result.priceTI > api.result.priceBuy) ? 'height: 72px;' : ''">
  392.                                                             <span class="tradein_redemption-title">{{ 'trade_in.price'|trans({}, 'dc_base') }} VIDI SELECT:</span>
  393.                                                             <span class="tradein_redemption-price"
  394.                                                                   v-html="(api.result.priceSelect*1).toLocaleString()+' грн*'"></span>
  395.                                                         </div>
  396.                                                         <div v-if="!api.result.isSelect  && api.result.priceTI > 0"
  397.                                                              class="tradein_redemption-block">
  398.                                                             <span class="tradein_redemption-title">{{ 'trade_in.price'|trans({}, 'dc_base') }} по Trade-in:</span>
  399.                                                             <span class="tradein_redemption-price"
  400.                                                                   v-html="(api.result.priceTI*1).toLocaleString()+' грн*'"></span>
  401.                                                         </div>
  402.                                                         <p v-if="!api.result.isSelect"
  403.                                                            class="trade_in-fourth-steeps-borders-desc">{{ 'trade_in.free_estimate_change_car_desc'|trans({}, 'dc_base') }}</p>
  404.                                                         <p v-if="api.result.isSelect" style="height: 68px"
  405.                                                            class="trade_in-fourth-steeps-borders-desc">{{ 'trade_in.free_estimate_change_car_desc_select'|trans({}, 'dc_base') }}</p>
  406.                                                         {#                                                        <a href="#" @click.prevent="onTradeIn" class="view_propositions"> #}
  407.                                                         {#                                                            {{ 'trade_in.trade_in_view_proposition'|trans({}, 'dc_base') }} #}
  408.                                                         {#                                                            <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L1 11" stroke="#4BCA81" stroke-width="1.5"></path></svg> #}
  409.                                                         {#                                                        </a> #}
  410.                                                         <a href="#" @click.prevent="onTradeIn" class="propositions-btn">
  411.                                                             {{ 'trade_in.trade_in_view_proposition'|trans({}, 'dc_base') }}
  412.                                                         </a>
  413.                                                     </div>
  415.                                                 </div>
  416.                                             </div>
  417.                                             <div class="col-md-6">
  418.                                                 <div class="tradein_widget-options">
  419.                                                     <div class="trade_in-fourth-steeps-borders-img">
  420.                                                         <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
  421.                                                              xmlns="http://www.w3.org/2000/svg">
  422.                                                             <path d="M10 0.833374V19.1667" stroke="#515B62"
  423.                                                                   stroke-width="2" stroke-linecap="round"
  424.                                                                   stroke-linejoin="round"></path>
  425.                                                             <path d="M14.1667 4.16663H7.91667C7.14312 4.16663 6.40125 4.47392 5.85427 5.0209C5.30729 5.56788 5 6.30974 5 7.08329C5 7.85684 5.30729 8.59871 5.85427 9.14569C6.40125 9.69267 7.14312 9.99996 7.91667 9.99996H12.0833C12.8569 9.99996 13.5987 10.3073 14.1457 10.8542C14.6927 11.4012 15 12.1431 15 12.9166C15 13.6902 14.6927 14.432 14.1457 14.979C13.5987 15.526 12.8569 15.8333 12.0833 15.8333H5"
  426.                                                                   stroke="#515B62" stroke-width="2"
  427.                                                                   stroke-linecap="round" stroke-linejoin="round"></path>
  428.                                                             <defs>
  429.                                                                 <clipPath id="clip0">
  430.                                                                     <rect width="20" height="20" fill="white"></rect>
  431.                                                                 </clipPath>
  432.                                                             </defs>
  433.                                                         </svg>
  434.                                                     </div>
  435.                                                     <div>
  436.                                                         <span class="trade_in-fourth-steeps-borders-title">{{ 'trade_in.buy_car_option'|trans({}, 'dc_base') }}</span>
  437.                                                         <div v-if="api.result.priceBuy > 0"
  438.                                                              class="tradein_redemption-block"
  439.                                                              :style="api.result.isSelect && api.result.priceSelect > api.result.priceTI && api.result.priceTI > 0 && api.result.priceTI > api.result.priceBuy ? 'height: 72px;' : ''">
  440.                                                             <span class="tradein_redemption-title">{{ 'trade_in.price'|trans({}, 'dc_base') }} {{ 'trade_in.buy_car_option_short'|trans({}, 'dc_base') }}:</span>
  441.                                                             <span class="tradein_redemption-price"
  442.                                                                   v-html="(api.result.priceBuy*1).toLocaleString()+' грн*'"></span>
  443.                                                         </div>
  444.                                                         <p class="trade_in-fourth-steeps-borders-desc">{{ 'trade_in.for_better_estimate'|trans({}, 'dc_base') }}</p>
  445.                                                         {#                                                        <a href="#" @click.prevent="step = 3" class="view_propositions"> #}
  446.                                                         {#                                                            {{ 'trade_in.btn_order_view'|trans({}, 'dc_base') }} #}
  447.                                                         {#                                                            <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L1 11" stroke="#515B62" stroke-width="1.5"></path></svg> #}
  448.                                                         {#                                                        </a> #}
  449.                                                         <a href="#" @click.prevent="onStepThird"
  450.                                                            class="propositions-btn propositions-nobg-btn">
  451.                                                             {{ 'trade_in.btn_order_view'|trans({}, 'dc_base') }}
  452.                                                         </a>
  453.                                                     </div>
  455.                                                 </div>
  456.                                             </div>
  458.                                             <div class="col-md-12">
  459.                                                 <span class="tradein_widget-options-info">{{ 'trade_in.tradein_widget_options_info'|trans({}, 'dc_base') }}</span>
  460.                                             </div>
  461.                                             <div class="col-md-12">
  462.                                                 <span class="tradein_widget-options-info">{{ 'trade_in.count_result_1'|trans({}, 'dc_base') ~ ' ' }}{% verbatim %}{{ api.result.countItems }}{% endverbatim %}{{ ' ' ~ 'trade_in.count_result_2'|trans({}, 'dc_base') }}</span>
  463.                                             </div>
  465.                                         </div>
  467.                                         <div class="row" v-if="step==3">
  468.                                             <div class="col-md-12" v-if="!testDrive.vehicle">
  469.                                                 <span class="trade_in-fourth-steeps-title mb-1">{{ 'trade_in.free_estimate_td_title'|trans({}, 'dc_base') }}</span>
  470.                                                 <p class="trade_in-desc mb-0">{{ 'trade_in.free_estimate_td_desc'|trans({}, 'dc_base') }}</p>
  471.                                                 <p class="trade_in-desc">{{ 'trade_in.free_estimate_td_desc_info'|trans({}, 'dc_base') }}</p>
  472.                                             </div>
  473.                                             <div class="col-md-12" v-if="testDrive.vehicle">
  474.                                                 <span class="trade_in-fourth-steeps-title">{{ 'trade_in.free_estimate_you_order'|trans({}, 'dc_base') }} <b
  475.                                                             v-html="testDrive.vehicle.title"></b></span>
  476.                                             </div>
  477.                                             <div class="col-md-12"
  478.                                                  v-if="testDrive.brands.length > 1 && testDrive.need && !testDrive.vehicle">
  479.                                                 <div class="form-group trade_in-select">
  480.                                                     <select v-model="testDrive.brand" class="form-control">
  481.                                                         <option disabled="disabled" :value="null">Марка</option>
  482.                                                         <option v-for="brand in testDrive.brands" :value="brand.id"
  483.                                                                 v-html="brand.title"></option>
  484.                                                     </select>
  485.                                                 </div>
  486.                                             </div>
  487.                                             <div class="col-md-12">
  488.                                                 <div class="row trade_in-cars-row"
  489.                                                      v-if="testDrive.need && !testDrive.vehicle">
  490.                                                     <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3"
  491.                                                          v-for="car in testDrive.vehicles"
  492.                                                          v-if="testDrive.brand == car.brand && car.price>0"
  493.                                                          @click.prevent="testDrive.vehicle = car">
  494.                                                         <div class="trade_in-card-car active">
  495.                                                             <div class="trade_in-card-car-img">
  496.                                                                 <img :src="car.src" :alt="car.title">
  497.                                                             </div>
  498.                                                             <span class="trade_in-card-car-name"
  499.                                                                   v-html="car.title"></span>
  500.                                                             <span class="trade_in-card-car-price">{{ 'trade_in.text_from'|trans({}, 'dc_base') }} <span
  501.                                                                         v-html="car.price.toLocaleString()"></span> грн</span>
  502.                                                         </div>
  503.                                                     </div>
  504.                                                 </div>
  505.                                             </div>
  506.                                             <div class="col-md-12 text-center" v-if="!testDrive.need">
  507.                                                 <button @click.prevent="testDrive.need = true"
  508.                                                         class="btn btn-primary trade_in-btn-agree mb-3">{{ 'trade_in.free_estimate_whant_td'|trans({}, 'dc_base') }}</button>
  509.                                                 <button @click.prevent="sendLead"
  510.                                                         class="dont_know-nmbr">{{ 'trade_in.trade_in_not_interesting'|trans({}, 'dc_base') }}</button>
  511.                                             </div>
  512.                                             <div class="col-md-12 text-center"
  513.                                                  v-if="testDrive.need && testDrive.vehicle">
  514.                                                 <button @click.prevent="sendLead"
  515.                                                         class="btn btn-primary trade_in-btn-agree mb-3">{{ 'trade_in.free_estimate_order'|trans({}, 'dc_base') }}</button>
  516.                                                 <button @click.prevent="testDrive.vehicle = null"
  517.                                                         class="dont_know-nmbr">{{ 'trade_in.free_estimate_change_car'|trans({}, 'dc_base') }}</button>
  518.                                             </div>
  519.                                         </div>
  522.                                         <div class="row" v-if="step==4">
  523.                                             <div class="col-md-12">
  524.                                                 <span class="trade_in-fourth-steeps-title">{{ 'trade_in.free_estimate_what_car'|trans({}, 'dc_base') }}</span>
  525.                                             </div>
  526.                                             <div class="col-md-12" v-if="tiBrands && tiBrands.length > 1">
  527.                                                 <div class="form-group trade_in-select">
  528.                                                     <select class="form-control" v-model="tiBrand">
  529.                                                         <option disabled="disabled" :value="null">Марка</option>
  530.                                                         <option v-for="brand in tiBrands" :value="brand.id"
  531.                                                                 v-html="brand.title"></option>
  532.                                                     </select>
  533.                                                 </div>
  534.                                             </div>
  535.                                             <div class="col-md-12">
  536.                                                 <div class="row trade_in-cars-row">
  537.                                                     <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3"
  538.                                                          @click.prevent="selectVehicle(car)"
  539.                                                          v-if="car.brand == tiBrand && car.price > 0 && car.equipments.length > 0"
  540.                                                          v-for="car in tiVehicles">
  541.                                                         <div class="trade_in-card-car active">
  542.                                                             <div class="trade_in-card-car-img">
  543.                                                                 <img :src="car.image" :alt="car.title">
  544.                                                             </div>
  545.                                                             <span class="trade_in-card-car-name"
  546.                                                                   v-html="car.title"></span>
  547.                                                             <span class="trade_in-card-car-price">{{ 'trade_in.text_from'|trans({}, 'dc_base') }} <span
  548.                                                                         v-html="car.price.toLocaleString()"></span> грн</span>
  549.                                                         </div>
  550.                                                     </div>
  551.                                                 </div>
  552.                                             </div>
  553.                                         </div>
  556.                                         <div class="row" v-if="step==5 && vehicleData.id && !vehicleData.equipment">
  557.                                             <div class="col-md-12 text-center">
  558.                                                 <span class="trade_in-fourth-steeps-car"
  559.                                                       v-html="vehicleData.title"></span>
  560.                                                 <span class="trade_in-form-title">{{ 'trade_in.trade_in_select_komp'|trans({}, 'dc_base') }}</span>
  561.                                             </div>
  562.                                             <div class="col-md-12">
  563.                                                 <div class="row trade_in-info-row">
  564.                                                     <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3"
  565.                                                          @click.prevent="setEquipment(equipment)"
  566.                                                          v-if="equipment.minPrice > 0"
  567.                                                          v-for="equipment in vehicleData.equipments">
  568.                                                         <div class="trade_in-comlectation"
  569.                                                              :class="{'active' : vehicleData.equipment && equipment.id == vehicleData.equipment.id}">
  570.                                                             <span class="trade_in-comlectation-name"
  571.                                                                   v-html="equipment.title"></span>
  572.                                                             <span class="trade_in-comlectation-price">{{ 'trade_in.text_from'|trans({}, 'dc_base') }} <b
  573.                                                                         v-html="equipment.minPrice.toLocaleString()"></b> грн</span>
  574.                                                         </div>
  575.                                                     </div>
  576.                                                 </div>
  577.                                             </div>
  578.                                         </div>
  580.                                         <div class="row" v-if="step==5 && vehicleData.equipment">
  581.                                             <div class="col-md-12 text-center" v-if="!vehicleData.item">
  582.                                                 <span class="trade_in-fourth-steeps-car"
  583.                                                       v-html="vehicleData.title+' '+vehicleData.equipment.title"></span>
  584.                                                 <span class="trade_in-form-title">{{ 'trade_in.trade_in_select_mod'|trans({}, 'dc_base') }}</span>
  585.                                             </div>
  586.                                             <div class="col-md-12">
  587.                                                 <div class="row trade_in-info-row-modif" v-if="!vehicleData.item">
  588.                                                     <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3"
  589.                                                          v-for="item in vehicleData.equipment.items">
  590.                                                         <div class="trade_in-comlectation trade_in-modif"
  591.                                                              @click.prevent="setItem(item)"
  592.                                                              :class="{'active' : vehicleData.equipment.item && item.id == vehicleData.equipment.item}">
  593.                                                             <div class="trade_in-modif-item">
  594.                                                                 <svg width="19" height="16" viewBox="0 0 19 16"
  595.                                                                      fill="none" xmlns="http://www.w3.org/2000/svg">
  596.                                                                     <path d="M4.19357 10.7481H5.93847C6.21353 10.7499 6.4797 10.6461 6.68678 10.4564C6.89385 10.2667 7.02752 10.0041 7.06258 9.71821C7.09764 9.43232 7.03166 9.14286 6.87708 8.90444C6.72251 8.66601 6.49002 8.49509 6.22347 8.42392L4.47857 7.94648C4.31185 7.90046 4.13728 7.89515 3.9683 7.93097C3.79931 7.96679 3.64043 8.04278 3.50389 8.15309C3.36735 8.2634 3.25679 8.40507 3.18074 8.56721C3.10468 8.72934 3.06515 8.90761 3.0652 9.08828V9.56572C3.0652 9.87932 3.18409 10.1801 3.3957 10.4018C3.60731 10.6236 3.89431 10.7481 4.19357 10.7481ZM3.84265 9.08828C3.84267 9.03203 3.855 8.97654 3.87869 8.92607C3.90238 8.8756 3.93681 8.8315 3.97932 8.79716C4.02183 8.76282 4.07128 8.73915 4.12389 8.72798C4.17649 8.71681 4.23084 8.71844 4.28275 8.73273L6.02765 9.21018C6.1119 9.23127 6.18572 9.28427 6.23491 9.35898C6.2841 9.43368 6.3052 9.52481 6.29413 9.61483C6.28306 9.70485 6.24061 9.7874 6.17495 9.8466C6.10929 9.90579 6.02506 9.93745 5.93847 9.93548H4.19357C4.10066 9.93495 4.0117 9.89603 3.946 9.82719C3.8803 9.75834 3.84316 9.66511 3.84265 9.56775V9.08828ZM14.5214 7.94648L12.7765 8.42392C12.5098 8.49512 12.2772 8.6662 12.1226 8.90485C11.968 9.14349 11.9022 9.43319 11.9375 9.71923C11.9728 10.0053 12.1068 10.2679 12.3143 10.4574C12.5217 10.647 12.7882 10.7504 13.0635 10.7481H14.8084C15.107 10.7476 15.3932 10.6231 15.6043 10.4018C15.8154 10.1806 15.9343 9.88064 15.9348 9.56775V9.08828C15.9348 8.90761 15.8953 8.72934 15.8193 8.56721C15.7432 8.40507 15.6327 8.2634 15.4961 8.15309C15.3596 8.04278 15.2007 7.96679 15.0317 7.93097C14.8627 7.89515 14.6881 7.90046 14.5214 7.94648ZM15.0216 8.79775C15.0646 8.83202 15.0994 8.87629 15.1233 8.92705C15.1472 8.97782 15.1595 9.03371 15.1593 9.09031V9.56775C15.1588 9.66511 15.1216 9.75834 15.0559 9.82719C14.9902 9.89603 14.9013 9.93495 14.8084 9.93548H13.0635C12.9769 9.93745 12.8926 9.90579 12.827 9.8466C12.7613 9.7874 12.7189 9.70485 12.7078 9.61483C12.6967 9.52481 12.7178 9.43368 12.767 9.35898C12.8162 9.28427 12.89 9.23127 12.9743 9.21018L14.7192 8.73273C14.7483 8.7247 14.7783 8.7206 14.8084 8.72054C14.8857 8.72082 14.9607 8.74798 15.0216 8.79775ZM4.45918 6.42883H14.5408C14.6042 6.42889 14.6666 6.41269 14.7226 6.38164C14.7786 6.35059 14.8264 6.30564 14.862 6.25071C14.8976 6.19579 14.9198 6.13256 14.9267 6.06657C14.9335 6.00058 14.9249 5.93382 14.9014 5.87215C14.5738 5.00463 13.932 3.40368 13.6024 2.90998C13.3659 2.55444 13.0208 2.3655 12.4276 2.25579C11.4588 2.1035 10.4793 2.03893 9.5 2.06278C8.52331 2.03884 7.54647 2.10273 6.5802 2.25376C5.98112 2.36347 5.64184 2.55241 5.40531 2.90998C5.07765 3.40368 4.43592 5.00463 4.10633 5.87215C4.08312 5.93319 4.07438 5.99922 4.08086 6.06457C4.08734 6.12993 4.10885 6.19266 4.14354 6.24739C4.17823 6.30212 4.22508 6.34722 4.28005 6.37882C4.33502 6.41042 4.39649 6.42758 4.45918 6.42883ZM6.03541 3.38133C6.09357 3.29194 6.18275 3.15785 6.70816 3.06236C7.63202 2.91703 8.56601 2.8545 9.5 2.87545C10.4319 2.85267 11.3639 2.91316 12.286 3.05626C12.8095 3.15175 12.8987 3.28584 12.9568 3.3732C13.3406 4.09228 13.6749 4.83912 13.9572 5.60803H5.04082C5.32349 4.83992 5.6578 4.09378 6.04122 3.37524L6.03541 3.38133ZM1.12643 7.59703C0.785542 8.28673 0.616168 9.05538 0.63398 9.83187V14.5982C0.634492 14.9698 0.775599 15.326 1.02637 15.5888C1.27713 15.8516 1.6171 15.9995 1.97173 16H3.19898C3.55362 15.9995 3.89358 15.8516 4.14435 15.5888C4.39512 15.326 4.53622 14.9698 4.53673 14.5982V14.2568H14.4633V14.5982C14.4638 14.9698 14.6049 15.326 14.8557 15.5888C15.1064 15.8516 15.4464 15.9995 15.801 16H17.0302C17.3848 15.9995 17.7248 15.8516 17.9756 15.5888C18.2263 15.326 18.3674 14.9698 18.368 14.5982V9.84406C18.3853 9.06762 18.2159 8.2991 17.8755 7.60922C18.1876 7.55235 18.4708 7.3829 18.6762 7.13022C18.8815 6.87754 18.9961 6.55754 19 6.22566C19 5.94123 19 5.70962 19 5.49426C18.9917 5.13561 18.8523 4.79399 18.6105 4.53994C18.3688 4.28588 18.0432 4.13877 17.701 4.12898C17.5808 4.12898 17.4587 4.12898 17.3327 4.12898C17.0197 4.13569 16.7137 4.22739 16.4447 4.39513C16.1151 3.56418 15.5897 2.31064 15.2136 1.74178C14.4962 0.662963 13.4687 0.364308 12.7649 0.234282C11.6851 0.0580521 10.5926 -0.0187673 9.5 0.00470376C8.41015 -0.0203089 7.32029 0.0544694 6.24286 0.228187C5.5352 0.358213 4.50959 0.654836 3.79224 1.73568C3.41612 2.30455 2.89071 3.56418 2.56112 4.38904C2.29078 4.22105 1.98352 4.12936 1.66929 4.12289C1.54714 4.12289 1.42694 4.12289 1.30673 4.12289C0.962166 4.13068 0.633805 4.27772 0.390282 4.53329C0.146759 4.78886 0.00692284 5.13317 0 5.49426C0 5.69743 0 5.9392 0 6.22566C0.00667798 6.55572 0.122728 6.87307 0.328249 7.12328C0.533771 7.37349 0.81596 7.54099 1.12643 7.59703ZM0.77551 5.52474C0.775507 5.37133 0.833393 5.22415 0.936543 5.1153C1.03969 5.00644 1.17974 4.94475 1.32612 4.94368H1.65959C1.96451 4.9613 2.25155 5.10007 2.46224 5.33173C2.50821 5.37678 2.56394 5.40943 2.62463 5.42686C2.68533 5.44429 2.74916 5.44598 2.81062 5.43178C2.87207 5.41758 2.92931 5.38791 2.97738 5.34535C3.02545 5.30279 3.06291 5.24861 3.08653 5.18748C3.62745 3.77954 4.14122 2.63774 4.42622 2.20906C4.97102 1.39639 5.75235 1.15259 6.365 1.03882C7.39855 0.876494 8.4436 0.808516 9.48837 0.835655C10.5331 0.808506 11.5782 0.876483 12.6117 1.03882C13.2321 1.15259 14.0135 1.38827 14.5505 2.20906C14.8355 2.63977 15.3493 3.77954 15.8902 5.18748C15.9138 5.24861 15.9513 5.30279 15.9994 5.34535C16.0474 5.38791 16.1047 5.41758 16.1661 5.43178C16.2276 5.44598 16.2914 5.44429 16.3521 5.42686C16.4128 5.40943 16.4685 5.37678 16.5145 5.33173C16.7236 5.1013 17.0084 4.96262 17.3113 4.94368H17.6506C17.725 4.94095 17.7992 4.95396 17.8688 4.98194C17.9383 5.00992 18.0017 5.05228 18.0553 5.10651C18.1088 5.16075 18.1514 5.22573 18.1805 5.29758C18.2096 5.36944 18.2245 5.44669 18.2245 5.52474C18.2245 5.7279 18.2245 5.93107 18.2245 6.20738C18.2245 6.36903 18.1632 6.52405 18.0541 6.63836C17.9451 6.75266 17.7971 6.81687 17.6429 6.81687H17.2396H17.1853C17.1133 6.81687 17.0427 6.83789 16.9815 6.87756C16.9202 6.91723 16.8707 6.974 16.8385 7.04149C16.8063 7.10898 16.7927 7.18454 16.7991 7.2597C16.8056 7.33486 16.8319 7.40664 16.8751 7.46701C16.919 7.52796 16.9611 7.58958 17.0011 7.65189C17.405 8.30054 17.6081 9.06392 17.5828 9.83796V14.5982C17.5828 14.7544 17.5235 14.9043 17.4181 15.0148C17.3126 15.1253 17.1696 15.1873 17.0205 15.1873H15.801C15.6519 15.1873 15.5089 15.1253 15.4035 15.0148C15.298 14.9043 15.2388 14.7544 15.2388 14.5982V13.8505C15.2388 13.7427 15.1979 13.6394 15.1252 13.5632C15.0525 13.487 14.9539 13.4442 14.851 13.4442H4.14898C4.04614 13.4442 3.94751 13.487 3.8748 13.5632C3.80208 13.6394 3.76122 13.7427 3.76122 13.8505V14.5982C3.76122 14.6755 3.74668 14.7521 3.71843 14.8236C3.69017 14.8951 3.64876 14.9601 3.59655 15.0148C3.54434 15.0695 3.48236 15.1129 3.41414 15.1425C3.34593 15.1721 3.27281 15.1873 3.19898 15.1873H1.96786C1.89402 15.1873 1.82091 15.1721 1.7527 15.1425C1.68448 15.1129 1.6225 15.0695 1.57029 15.0148C1.51808 14.9601 1.47667 14.8951 1.44841 14.8236C1.42016 14.7521 1.40561 14.6755 1.40561 14.5982V9.83187C1.38152 9.06053 1.58459 8.30011 1.98724 7.65392C2.02731 7.59162 2.06932 7.52999 2.11327 7.46904C2.15647 7.40867 2.18278 7.33689 2.18925 7.26173C2.19572 7.18657 2.18208 7.11102 2.14988 7.04352C2.11768 6.97603 2.06817 6.91926 2.00692 6.87959C1.94566 6.83992 1.87507 6.81891 1.80306 6.81891H1.74878L1.35714 6.81281C1.20288 6.81281 1.05494 6.7486 0.945866 6.63429C0.836789 6.51999 0.77551 6.36496 0.77551 6.20331C0.77551 5.93716 0.77551 5.71978 0.77551 5.52474Z"
  597.                                                                           fill="#C3092E"/>
  598.                                                                 </svg>
  599.                                                                 <span class="trade_in-modif-name"
  600.                                                                       v-html="item.body"></span>
  601.                                                             </div>
  602.                                                             <div class="trade_in-modif-item">
  603.                                                                 <svg width="20" height="13" viewBox="0 0 20 13"
  604.                                                                      fill="none" xmlns="http://www.w3.org/2000/svg">
  605.                                                                     <path d="M19.175 3.89997H17.875C17.7451 3.89997 17.615 3.99747 17.5825 4.12745L16.6726 6.82497H15.7951L14.9176 5.36247C14.8525 5.26497 14.755 5.19995 14.625 5.19995H13.3251V4.22495C13.3251 4.02995 13.1951 3.89997 13.0001 3.89997H10.725V2.59998H11.7C11.895 2.59998 12.025 2.46999 12.025 2.27499V0.324988C12.025 0.129987 11.895 0 11.7 0H5.85C5.655 0 5.52502 0.129987 5.52502 0.324988V2.27499C5.52502 2.46999 5.655 2.59998 5.85 2.59998H6.82501V3.89997H4.22499C4.12749 3.89997 4.06248 3.93245 3.9975 3.99747C3.93253 4.06248 3.9 4.12745 3.9 4.22495V5.19995H1.62501C1.43001 5.19995 1.30003 5.32994 1.30003 5.52494V7.47494H0.650013V6.49998C0.650013 6.30498 0.520026 6.17499 0.325026 6.17499C0.130026 6.17499 0 6.30498 0 6.49998V9.1C0 9.295 0.129987 9.42498 0.324988 9.42498C0.519988 9.42498 0.649975 9.295 0.649975 9.1V8.125H1.29999V10.725C1.29999 10.92 1.42998 11.05 1.62498 11.05H4.06248L5.26497 12.87C5.32998 12.935 5.42748 13 5.52498 13H14.625C14.755 13 14.8525 12.935 14.9175 12.805L15.795 11.05H16.705L17.5825 12.805C17.6475 12.935 17.745 13 17.875 13H19.175C19.37 13 19.5 12.87 19.5 12.675V4.22499C19.5 4.02999 19.37 3.89997 19.175 3.89997ZM6.17499 0.649975H11.375V1.94996H10.4H7.14999H6.17499V0.649975ZM7.47502 2.59998H10.075V3.89997H7.47502V2.59998ZM1.95 10.4V5.84997H3.9V10.4H1.95ZM14.3975 12.35H5.68749L4.54998 10.6283V5.52498V4.54998H7.14999H10.4H12.675V5.52498C12.675 5.71998 12.805 5.84997 13 5.84997H14.43L15.275 7.25831V10.595L14.3975 12.35ZM15.925 10.4V7.47498H16.575V10.4H15.925ZM18.85 12.35H18.07L17.225 10.7203V7.15114L18.1025 4.54998H18.85V12.35Z"
  606.                                                                           fill="#C3092E"/>
  607.                                                                 </svg>
  608.                                                                 <span class="trade_in-modif-name"
  609.                                                                       v-html="item.engineName+' / '+item.fuelType"></span>
  610.                                                             </div>
  611.                                                             <div class="d-flex justify-content-between">
  612.                                                                 <div class="trade_in-modif-item">
  613.                                                                     <svg width="16" height="16" viewBox="0 0 16 16"
  614.                                                                          fill="none" xmlns="http://www.w3.org/2000/svg">
  615.                                                                         <path d="M14.6667 12.8228V8V3.17719C15.4208 3.04922 16 2.38916 16 1.6C16 0.72 15.28 0 14.4 0C13.52 0 12.8 0.72 12.8 1.6C12.8 2.38916 13.3792 3.04922 14.1333 3.17719V7.73334H10.4V3.17719C11.1542 3.04922 11.7333 2.38916 11.7333 1.6C11.7333 0.72 11.0133 0 10.1333 0C9.25334 0 8.53334 0.72 8.53334 1.6C8.53334 2.38916 9.1125 3.04922 9.86669 3.17719V7.73334H6.13334V3.17719C6.88753 3.04922 7.46669 2.38916 7.46669 1.6C7.46669 0.72 6.74669 0 5.86669 0C4.98669 0 4.26669 0.72 4.26669 1.6C4.26669 2.38916 4.84584 3.04922 5.60003 3.17719V7.73334H1.86666V3.17719C2.62084 3.04922 3.2 2.38916 3.2 1.6C3.2 0.72 2.48 0 1.6 0C0.72 0 0 0.72 0 1.6C0 2.38916 0.579156 3.04922 1.33334 3.17719V8C1.33334 8.16 1.44 8.26666 1.6 8.26666H5.6V12.8228C4.84581 12.9508 4.26666 13.6108 4.26666 14.4C4.26666 15.28 4.98666 16 5.86666 16C6.74666 16 7.46666 15.28 7.46666 14.4C7.46666 13.6108 6.8875 12.9508 6.13331 12.8228V8.26666H9.86666V12.8228C9.11247 12.9508 8.53331 13.6108 8.53331 14.4C8.53331 15.28 9.25331 16 10.1333 16C11.0133 16 11.7333 15.28 11.7333 14.4C11.7333 13.6108 11.1542 12.9508 10.4 12.8228V8.26666H14.1333V12.8228C13.3791 12.9508 12.8 13.6108 12.8 14.4C12.8 15.28 13.52 16 14.4 16C15.28 16 16 15.28 16 14.4C16 13.6108 15.4208 12.9508 14.6667 12.8228ZM13.3333 1.6C13.3333 1.01334 13.8133 0.533344 14.4 0.533344C14.9867 0.533344 15.4667 1.01334 15.4667 1.6C15.4667 2.18666 14.9867 2.66666 14.4 2.66666C13.8133 2.66666 13.3333 2.18666 13.3333 1.6ZM9.06666 1.6C9.06666 1.01334 9.54666 0.533344 10.1333 0.533344C10.72 0.533344 11.2 1.01334 11.2 1.6C11.2 2.18666 10.72 2.66666 10.1333 2.66666C9.54666 2.66666 9.06666 2.18666 9.06666 1.6ZM4.8 1.6C4.8 1.01334 5.28 0.533344 5.86666 0.533344C6.45331 0.533344 6.93331 1.01334 6.93331 1.6C6.93331 2.18666 6.45331 2.66666 5.86666 2.66666C5.28 2.66666 4.8 2.18666 4.8 1.6ZM0.533344 1.6C0.533344 1.01334 1.01334 0.533344 1.6 0.533344C2.18666 0.533344 2.66666 1.01334 2.66666 1.6C2.66666 2.18666 2.18666 2.66666 1.6 2.66666C1.01334 2.66666 0.533344 2.18666 0.533344 1.6ZM6.93334 14.4C6.93334 14.9867 6.45334 15.4667 5.86669 15.4667C5.28003 15.4667 4.80003 14.9867 4.80003 14.4C4.80003 13.8133 5.28003 13.3333 5.86669 13.3333C6.45334 13.3333 6.93334 13.8133 6.93334 14.4ZM11.2 14.4C11.2 14.9867 10.72 15.4667 10.1333 15.4667C9.54669 15.4667 9.06669 14.9867 9.06669 14.4C9.06669 13.8133 9.54669 13.3333 10.1333 13.3333C10.72 13.3333 11.2 13.8133 11.2 14.4ZM14.4 15.4667C13.8133 15.4667 13.3333 14.9867 13.3333 14.4C13.3333 13.8133 13.8133 13.3333 14.4 13.3333C14.9867 13.3333 15.4667 13.8133 15.4667 14.4C15.4667 14.9867 14.9867 15.4667 14.4 15.4667Z"
  616.                                                                               fill="#C3092E"/>
  617.                                                                     </svg>
  618.                                                                     <span class="trade_in-modif-name"
  619.                                                                           v-html="item.trans"></span>
  620.                                                                 </div>
  621.                                                                 <div class="trade_in-modif-item">
  622.                                                                     <svg width="18" height="16" viewBox="0 0 18 16"
  623.                                                                          fill="none" xmlns="http://www.w3.org/2000/svg">
  624.                                                                         <path d="M0.890655 9.85124L1.7457 10.6945C2.04609 11.0177 2.4304 11.2371 2.85011 11.3223V13.4602L1.56755 13.1892C1.17564 13.0838 0.783775 13.3297 0.712507 13.7162L0.570014 14.4189C0.534401 14.5946 0.570014 14.7702 0.676894 14.9459C0.783775 15.1216 0.961922 15.227 1.14003 15.2621L4.63146 16C4.66708 16 4.73834 16 4.77396 16C4.91645 16 5.05899 15.9649 5.16587 15.9297C5.34401 15.8243 5.45089 15.6486 5.48651 15.473L5.629 14.7702C5.66461 14.5945 5.629 14.3837 5.52212 14.2432C5.41524 14.0675 5.23709 13.9621 5.05899 13.927L3.56266 13.6107V11.3321C3.98517 11.2544 4.38948 11.0244 4.70273 10.6593L5.55777 9.81608C5.99093 9.47432 6.26014 9.04018 6.34664 8.55118H11.4254C11.5095 9.04211 11.8116 9.49648 12.2912 9.8512L13.1463 10.6945C13.4467 11.0176 13.831 11.2371 14.2507 11.3222V13.4702H12.8256C12.4337 13.4702 12.1131 13.7864 12.1131 14.1729V14.8757C12.1131 15.2622 12.4337 15.5784 12.8256 15.5784H16.3883C16.7802 15.5784 17.1008 15.2622 17.1008 14.8757V14.1729C17.1008 13.7864 16.7802 13.4702 16.3883 13.4702H14.9632V11.3321C15.3857 11.2544 15.7901 11.0244 16.1033 10.6593L16.9583 9.81608C17.4928 9.39444 17.7778 8.83228 17.7778 8.19984C17.7778 7.56739 17.4928 6.97007 16.9583 6.54844L16.1033 5.70518C15.7944 5.37286 15.3969 5.15031 14.9632 5.07068V2.92946H16.3883C16.7802 2.92946 17.1008 2.61324 17.1008 2.22673V1.52404C17.1008 1.13753 16.7802 0.821309 16.3883 0.821309H12.8256C12.4337 0.821309 12.1131 1.13753 12.1131 1.52404V2.22677C12.1131 2.61328 12.4337 2.9295 12.8256 2.9295H14.2507V5.07154C13.8282 5.15187 13.4541 5.37401 13.1463 5.70522L12.2912 6.54848C11.8208 6.90324 11.5447 7.36411 11.4445 7.84849H6.34731C6.26143 7.34946 5.99189 6.89097 5.55777 6.54848L4.70273 5.70522C4.39386 5.3729 3.99628 5.15035 3.56266 5.07072V2.55806L4.98772 2.85922C5.02333 2.85922 5.0946 2.85922 5.13021 2.85922C5.2727 2.85922 5.41524 2.82409 5.55773 2.75381C5.73588 2.6484 5.84276 2.47271 5.87837 2.29706L6.02087 1.59432C6.05648 1.41863 6.02087 1.20782 5.91399 1.06729C5.80711 0.891594 5.62896 0.786187 5.45085 0.751064L1.95946 0.0131701C1.78131 -0.021952 1.56755 0.0131702 1.42506 0.118578C1.24691 0.223985 1.14003 0.399678 1.10442 0.57533L0.961922 1.27806C0.855042 1.66457 1.10442 2.05104 1.49632 2.12132L2.85015 2.40745V5.0715C2.42764 5.15183 2.0536 5.37397 1.74574 5.70518L0.890655 6.54844C0.284986 7.00519 0 7.63764 0 8.27008C0 8.86741 0.320641 9.46473 0.890655 9.85124ZM4.77396 15.2973L1.28252 14.5945L1.42506 13.8918L3.0855 14.2261C3.10738 14.2326 3.13046 14.2372 3.15472 14.24L4.91649 14.5946L4.77396 15.2973ZM16.3883 14.8756H12.8256V14.1729H16.3883V14.8756ZM12.8256 1.52404H16.3883V2.22677H12.8256V1.52404ZM1.78131 0.751023L5.27275 1.48888L5.13025 2.19161L3.41938 1.83005C3.36193 1.79155 3.2897 1.76998 3.20641 1.76998C3.18766 1.76998 3.16967 1.77142 3.15205 1.77356L1.63882 1.45375L1.78131 0.751023ZM12.7544 7.07548L12.79 7.04036L13.6806 6.16197C13.93 5.88087 14.2863 5.74034 14.6426 5.74034C14.9988 5.74034 15.3551 5.88087 15.6401 6.16197L16.5307 7.04036C16.887 7.35658 17.1008 7.77821 17.1008 8.19984C17.1008 8.58635 16.887 9.00798 16.5307 9.28904C16.4951 9.32416 16.4951 9.32416 16.4951 9.32416L15.6045 10.2025C15.3194 10.5188 14.9632 10.6593 14.6069 10.6593C14.2507 10.6593 13.93 10.4836 13.645 10.2025L12.7544 9.32416L12.7188 9.28904C12.3268 9.00794 12.1131 8.62147 12.1131 8.23496C12.1131 7.81333 12.3268 7.3917 12.7544 7.07548ZM1.35379 7.07548L1.3894 7.04036L2.28006 6.16197C2.52943 5.88087 2.88573 5.74034 3.24198 5.74034C3.59823 5.74034 3.95453 5.88087 4.23951 6.16197L5.13017 7.04036C5.48642 7.35658 5.70018 7.77821 5.70018 8.19984C5.70018 8.58635 5.48642 9.00798 5.13017 9.28904C5.09456 9.32416 5.09456 9.32416 5.09456 9.32416L4.20394 10.2026C3.91892 10.5188 3.56266 10.6593 3.20641 10.6593C2.85015 10.6593 2.52951 10.4836 2.24449 10.2026L1.35383 9.3242L1.31822 9.28908C0.926309 9.00798 0.712549 8.62151 0.712549 8.235C0.712507 7.81333 0.926268 7.42686 1.35379 7.07548Z"
  625.                                                                               fill="#C3092E"/>
  626.                                                                     </svg>
  627.                                                                     <span class="trade_in-modif-name"
  628.                                                                           v-html="item.drive"></span>
  629.                                                                 </div>
  630.                                                             </div>
  631.                                                             <span class="trade_in-comlectation-price"
  632.                                                                   v-html="(item.price*1).toLocaleString()+' грн'"></span>
  633.                                                         </div>
  634.                                                     </div>
  635.                                                 </div>
  636.                                                 <div class="mb-4 text-center trade_in-change-icon"
  637.                                                      v-if="vehicleData.item">
  638.                                                     <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
  639.                                                          xmlns="http://www.w3.org/2000/svg">
  640.                                                         <path d="M28.7499 4.99976V12.4998H21.2499" stroke="#515B62"
  641.                                                               stroke-width="2" stroke-linecap="round"
  642.                                                               stroke-linejoin="round"/>
  643.                                                         <path d="M1.25008 25.0002V17.5002H8.75008" stroke="#515B62"
  644.                                                               stroke-width="2" stroke-linecap="round"
  645.                                                               stroke-linejoin="round"/>
  646.                                                         <path d="M4.38758 11.25C5.02154 9.45845 6.099 7.85673 7.51941 6.59424C8.93983 5.33176 10.6569 4.44968 12.5104 4.0303C14.364 3.61091 16.2935 3.6679 18.1191 4.19594C19.9446 4.72398 21.6066 5.70586 22.9501 7.04997L28.7501 12.5M1.25008 17.5L7.05008 22.95C8.39351 24.2941 10.0555 25.276 11.8811 25.804C13.7066 26.332 15.6362 26.389 17.4897 25.9696C19.3432 25.5503 21.0603 24.6682 22.4807 23.4057C23.9012 22.1432 24.9786 20.5415 25.6126 18.75"
  647.                                                               stroke="#515B62" stroke-width="2" stroke-linecap="round"
  648.                                                               stroke-linejoin="round"/>
  649.                                                     </svg>
  650.                                                 </div>
  651.                                                 <div class="trade_in-second-info trade_in-last-steep"
  652.                                                      v-if="vehicleData.item">
  653.                                                     <div class="d-flex align-items-center">
  654.                                                         <span class="trade_in-second-info-title trade_in-last-steep-title"
  655.                                                               v-html="vehicleData.title+' '+vehicleData.equipment.title"></span>
  656.                                                         <div class="d-inline-block">
  657.                                                             <span class="trade_in-second-info-options trade_in-last-steep-options"
  658.                                                                   v-html="vehicleData.item.engineName+' / '+vehicleData.item.fuelType"></span>
  659.                                                         </div>
  660.                                                     </div>
  661.                                                     <div class="trade_in-second-info-price">
  662.                                                         <span class="trade_in-last-steep-item">
  663.                                                             {{ 'trade_in.price'|trans({}, 'dc_base') }}:
  664.                                                             <b v-html="(vehicleData.item.price*1).toLocaleString()+' грн'"></b>
  665.                                                         </span>
  666.                                                         <span class="" v-if="api.result.priceTI > 0">
  667.                                                             {{ 'trade_in.price_for_you'|trans({}, 'dc_base') }}:
  668.                                                             <b v-html="(vehicleData.difference*1).toLocaleString()+' грн'"></b>
  669.                                                         </span>
  670.                                                     </div>
  671.                                                 </div>
  672.                                             </div>
  673.                                             <div class="col-md-12" v-if="vehicleData.item">
  674.                                                 <button @click="sendLead"
  675.                                                         class="btn btn-primary trade_in-btn-agree">{{ 'trade_in.trade_in_order'|trans({}, 'dc_base') }}</button>
  676.                                             </div>
  677.                                         </div>
  679.                                     </div>
  680.                                 </div>
  681.                             </div>
  682.                         </div>
  683.                     </div>
  684.                 </div>
  685.             </div>
  686.         </div>
  687.     </div>
  688. </section>
  689. <svg width="0" height="0" class="hidden tradein-sprite">
  690.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8" id="icon-check">
  691.         <path d="M9 1L3.5 6.5L1 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
  692.               stroke-linejoin="round"/>
  693.     </symbol>
  694. </svg>