src/DcSiteBundle/Resources/views/Modules/reglament-to/index.html.twig line 1

Open in your IDE?
  1. <style>
  2.     .reglament_to-milage.show{
  3.         display: block !important;
  4.         top: 0 !important;
  5.     }
  6. </style>
  8. {% if webpack is not defined %}
  9. <link rel="stylesheet" href="{{ asset('bundles/dcsite/css/modules/reglament-to/style.css') }}">
  10. {% endif %}
  12. <section class="reglament_to" id="regulationId">
  13.     <div class="container">
  14.         <div class="row" v-if="models">
  15.             <div class="col-md-12">
  16.                 {% if modelTitle is defined %}
  17.                     <h2 class="title">{{ 'form.to_widget_title_model'|trans({'%brand%': dealer.brand.name, '%model%': modelTitle}, 'dc_base')|raw}}</h2>
  18.                 {% else %}
  19.                     <h2 class="title">{{ 'form.to_widget_title'|trans({}, 'dc_base')|raw}}</h2>
  20.                 {% endif %}
  22.                 {% if dealer.name and dealer.id is defined and dealer.id != 15%}
  23.                     <p>{{ dealer.name }}</p>
  24.                 {% endif %}
  25.             </div>
  26.         </div>
  27.         <div class="row" v-if="brands.length && !brand">
  28.             <div class="col-md-12">
  29.                 <span class="service_widget-title">{{ 'modules.online-booking.choose_brand'|trans({},'dc_base') }}:</span>
  30.             </div>
  31.             <div class="col-md-12">
  32.                 <div class="service_choose_brand-wrap">
  33.                     <div class="service_choose_brand service_choose_brand_card-item" v-for="brandItem in brands"
  34.                          @click="setBrand(brandItem,brandItem.dealerId)">
  35.                         <a href="#" class="service_choose_brand_card-img">
  36.                             <img :src="brandItem.image" alt="">
  37.                         </a>
  38.                         <span class="service_choose_brand_card-title" v-html="brandItem.name"></span>
  40.                         <div class="service_choose_brand_card-info" v-if="brandItem.dealers">
  41.                             <div class="service_choose_brand_card-info-head">
  42.                                 <div class="service_choose_brand_card-title mb-2">
  43.                                     {{ 'car_page.new.choose_dealer'|trans({}, 'dc_base') }}
  44.                                 </div>
  45.                             </div>
  46.                             <div @click.stop.prevent="setBrand(brandItem,dealer.id)"
  47.                                  class="service_choose_brand_card-info-brand" v-for="dealer in brandItem.dealers">
  48.                                 <span class="service_choose_brand_card-info-brand-name" v-html="dealer.title"></span>
  49.                                 <span class="service_choose_brand_card-info-brand-addr" v-html="dealer.adres"></span>
  50.                             </div>
  51.                         </div>
  53.                     </div>
  54.                 </div>
  55.             </div>
  56.         </div>
  57.         <div class="row" v-show="models && models.length && !selectedModel">
  58.             <div class="col-md-12">
  59.                 <button class="go_back" v-on:click="setBrand(null); scrollServiceTop()" v-if="findWithBrands">
  60.                     <svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  61.                         <path d="M7 1L1 6.5L7 12" stroke="#282830"/>
  62.                     </svg>
  63.                     Назад
  64.                 </button>
  66.                 <span class="subtitle">{{ 'form.to_widget_choose_model'|trans({}, 'dc_base') }}
  67.                     {% if dealerName is defined %}
  68.                         <span>{{ dealerName }}</span>
  69.                     {% elseif dealer is defined %}
  70.                         <span>{{ dealer.nameByLocale(app.request.locale) }}</span>
  71.                     {% endif %}
  72.                     :
  73.                 </span>
  74.             </div>
  75.             <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 reglament_to-col" v-for="model in models" v-on:click="setModel(model.id)">
  76.                 <div class="reglament_to-card">
  77.                     <div class="reglament_to-card-img">
  78.                         <img :src="model.img" :alt="model.title" loading="lazy">
  79.                     </div>
  80.                     <span class="reglament_to-card-title" v-html="model.title"></span>
  81.                 </div>
  82.             </div>
  83.         </div>
  86.         <div class="row" v-if="variations && selectedModel && !selectedPeriod">
  87.             <div class="col-md-12">
  88.                 <button v-if="!options.model" class="go_back" v-on:click="selectedModel = variations = false; scrollServiceTop()">
  89.                     <svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  90.                         <path d="M7 1L1 6.5L7 12" stroke="#282830"/>
  91.                     </svg>
  92.                     Назад
  93.                 </button>
  94.             </div>
  95.             <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 reglament_to-col" v-for="period in variations">
  96.                 <div class="reglament_to-card" @click.stop.prevent="selectedPeriod = period.period">
  97.                     <div class="reglament_to-card-img">
  98.                         <picture :alt="period.period">
  99.                             <source :srcset="period.image_webp" type="image/webp">
  100.                             <source :srcset="period.image">
  101.                             <img :src="period.image" :alt="period.period" loading="lazy">
  102.                         </picture>
  103.                     </div>
  104.                     <span class="reglament_to-card-title" v-html="period.period"></span>
  105.                 </div>
  106.             </div>
  107.         </div>
  110.         <div class="row reglament_to-modification --variations" v-if="periodVariations && !data.vId">
  111.             <div class="col-md-12">
  112.                 <div class="reglament_to-modification-head">
  113.                     <button class="go_back" v-on:click="backVariations()">
  114.                         <svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  115.                             <path d="M7 1L1 6.5L7 12" stroke="#282830"/>
  116.                         </svg>
  117.                         Назад
  118.                     </button>
  119.                     <div class="reglament_to-modification-head-model">
  120.                         <span class="reglament_to-card-title text-left" v-html="selectedModel['title']"></span>
  121.                         <span class="reglament_to-card-year" v-html="selectedPeriod"></span>
  122.                     </div>
  123.                 </div>
  124.             </div>
  125.             <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4">
  126.                 <div class="row">
  127.                     <div class="col-md-12 reglament_to-modification-car">
  128.                         <div class="row align-items-center">
  129.                             <div class="col-md-4">
  130.                                 <div class="reglament_to-card-img">
  131.                                     <img :src="selectedImage" alt="" loading="lazy">
  132.                                 </div>
  133.                             </div>
  134.                             <div class="col-md-6">
  135.                                 <span class="reglament_to-card-title reglament_to-card-title-mobile text-left" v-html="selectedModel['title'] + ' ' + selectedPeriod"></span>
  136.                             </div>
  137.                         </div>
  138.                     </div>
  139.                     <div class="col-md-12 reglament_to-filter ">
  140.                         <div class="reglament_to-filter-head">
  141.                             <span class="subtitle">{{ 'form.to_widget_choose_modif'|trans({}, 'dc_base') }}:</span>
  142.                             <button class="reglament_to-filter-btn collapsed" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  143.                                 {{ 'form.filters'|trans({}, 'dc_base') }}
  144.                                 <svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
  145.                                     <path d="M10 1L5.5 5L1 1" stroke="#505053" stroke-width="2"/>
  146.                                 </svg>
  147.                             </button>
  148.                         </div>
  149.                         <div class="row collapse reglament_to-filter-collapse" id="collapseExample">
  152.                             <div class="col-sm-6 col-md-6 col-lg-12 col-xl-6">
  153.                                 <div class="form-group">
  154.                                     <label for="fuelLabel">{{ 'form.to_widget_fuel'|trans({}, 'dc_base') }}</label>
  155.                                     <select name="" id="fuelLabel" class="form-control" v-model="selectedFilter.fuel">
  156.                                         <option value="all">{{ 'form.all_variants'|trans({}, 'dc_base') }}</option>
  157.                                         <option v-for="fuel in filters.fuel" v-bind:value="fuel" v-html="fuel"></option>
  158.                                     </select>
  159.                                 </div>
  160.                             </div>
  161.                             <div class="col-sm-6 col-md-6 col-lg-12 col-xl-6">
  162.                                 <div class="form-group">
  163.                                     <label for="engineLabel">{{ 'form.to_widget_engine'|trans({}, 'dc_base') }}, л.</label>
  164.                                     <select name="" id="engineLabel" class="form-control" v-model="selectedFilter.engine">
  165.                                         <option value="all">{{ 'form.all_variants'|trans({}, 'dc_base') }}</option>
  166.                                         <option v-for="engine in filters.engine" v-bind:value="engine" v-html="engine"></option>
  167.                                     </select>
  168.                                 </div>
  169.                             </div>
  170.                             <div class="col-sm-6 col-md-6 col-lg-12 col-xl-6">
  171.                                 <div class="form-group">
  172.                                     <label for="transmissionLabel">{{ 'form.to_widget_transmision'|trans({}, 'dc_base') }}</label>
  173.                                     <select name="" id="transmissionLabel" class="form-control" v-model="selectedFilter.transmission">
  174.                                         <option value="all">{{ 'form.all_variants'|trans({}, 'dc_base') }}</option>
  175.                                         <option v-for="transmission in filters.transmission" v-bind:value="transmission" v-html="transmission"></option>
  176.                                     </select>
  177.                                 </div>
  178.                             </div>
  179.                             <div class="col-sm-6 col-md-6 col-lg-12 col-xl-6">
  180.                                 <div class="form-group">
  181.                                     <label for="driveLabel">{{ 'form.to_widget_privod'|trans({}, 'dc_base') }}</label>
  182.                                     <select name="" id="driveLabel" class="form-control" v-model="selectedFilter.drive">
  183.                                         <option value="all">{{ 'form.all_variants'|trans({}, 'dc_base') }}</option>
  184.                                         <option v-for="drive in filters.drive" v-bind:value="drive" v-html="drive"></option>
  185.                                     </select>
  186.                                 </div>
  187.                             </div>
  188.                         </div>
  190.                     </div>
  191.                 </div>
  192.             </div>
  193.             <div class="col-sm-12 col-md-12 col-lg-8 col-xl-8">
  194.                 <div class="reglament_to-modif-item-wrap">
  195.                     <div class="row">
  196.                         <div v-on:click="setVariation(variation, index)" class="col-sm-6 col-md-6 col-lg-6 col-xl-4" v-for="(variation, index) in filteredVariations">
  197.                             <button class="reglament_to-modif">
  198.                                 <div class="reglament_to-modif-item">
  199.                                     <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  200.                                         <path d="M19.925 7.89997H18.625C18.4951 7.89997 18.365 7.99747 18.3325 8.12745L17.4226 10.825H16.5451L15.6676 9.36247C15.6025 9.26497 15.505 9.19995 15.375 9.19995H14.0751V8.22495C14.0751 8.02995 13.9451 7.89997 13.7501 7.89997H11.475V6.59998H12.45C12.645 6.59998 12.775 6.46999 12.775 6.27499V4.32499C12.775 4.12999 12.645 4 12.45 4H6.6C6.405 4 6.27502 4.12999 6.27502 4.32499V6.27499C6.27502 6.46999 6.405 6.59998 6.6 6.59998H7.57501V7.89997H4.97499C4.87749 7.89997 4.81248 7.93245 4.7475 7.99747C4.68253 8.06248 4.65 8.12745 4.65 8.22495V9.19995H2.37501C2.18001 9.19995 2.05003 9.32994 2.05003 9.52494V11.4749H1.40001V10.5C1.40001 10.305 1.27003 10.175 1.07503 10.175C0.880026 10.175 0.75 10.305 0.75 10.5V13.1C0.75 13.295 0.879987 13.425 1.07499 13.425C1.26999 13.425 1.39998 13.295 1.39998 13.1V12.125H2.04999V14.725C2.04999 14.92 2.17998 15.05 2.37498 15.05H4.81248L6.01497 16.87C6.07998 16.935 6.17748 17 6.27498 17H15.375C15.505 17 15.6025 16.935 15.6675 16.805L16.545 15.05H17.455L18.3325 16.805C18.3975 16.935 18.495 17 18.625 17H19.925C20.12 17 20.25 16.87 20.25 16.675V8.22499C20.25 8.02999 20.12 7.89997 19.925 7.89997ZM6.92499 4.64998H12.125V5.94996H11.15H7.89999H6.92499V4.64998ZM8.22502 6.59998H10.825V7.89997H8.22502V6.59998ZM2.7 14.4V9.84997H4.65V14.4H2.7ZM15.1475 16.35H6.43749L5.29998 14.6283V9.52498V8.54998H7.89999H11.15H13.425V9.52498C13.425 9.71998 13.555 9.84997 13.75 9.84997H15.18L16.025 11.2583V14.595L15.1475 16.35ZM16.675 14.4V11.475H17.325V14.4H16.675ZM19.6 16.35H18.82L17.975 14.7203V11.1511L18.8525 8.54998H19.6V16.35Z" fill="#E40C25"></path>
  201.                                     </svg>
  202.                                     {% verbatim %}{{ engine(index) }}{% endverbatim %}
  203.                                 </div>
  204.                                 <div class="reglament_to-modif-item" v-if="variation.trans">
  205.                                     <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  206.                                         <path d="M17.1667 15.3228V10.5V5.67719C17.9208 5.54922 18.5 4.88916 18.5 4.1C18.5 3.22 17.78 2.5 16.9 2.5C16.02 2.5 15.3 3.22 15.3 4.1C15.3 4.88916 15.8792 5.54922 16.6333 5.67719V10.2333H12.9V5.67719C13.6542 5.54922 14.2333 4.88916 14.2333 4.1C14.2333 3.22 13.5133 2.5 12.6333 2.5C11.7533 2.5 11.0333 3.22 11.0333 4.1C11.0333 4.88916 11.6125 5.54922 12.3667 5.67719V10.2333H8.63334V5.67719C9.38753 5.54922 9.96669 4.88916 9.96669 4.1C9.96669 3.22 9.24669 2.5 8.36669 2.5C7.48669 2.5 6.76669 3.22 6.76669 4.1C6.76669 4.88916 7.34584 5.54922 8.10003 5.67719V10.2333H4.36666V5.67719C5.12084 5.54922 5.7 4.88916 5.7 4.1C5.7 3.22 4.98 2.5 4.1 2.5C3.22 2.5 2.5 3.22 2.5 4.1C2.5 4.88916 3.07916 5.54922 3.83334 5.67719V10.5C3.83334 10.66 3.94 10.7667 4.1 10.7667H8.1V15.3228C7.34581 15.4508 6.76666 16.1108 6.76666 16.9C6.76666 17.78 7.48666 18.5 8.36666 18.5C9.24666 18.5 9.96666 17.78 9.96666 16.9C9.96666 16.1108 9.3875 15.4508 8.63331 15.3228V10.7667H12.3667V15.3228C11.6125 15.4508 11.0333 16.1108 11.0333 16.9C11.0333 17.78 11.7533 18.5 12.6333 18.5C13.5133 18.5 14.2333 17.78 14.2333 16.9C14.2333 16.1108 13.6542 15.4508 12.9 15.3228V10.7667H16.6333V15.3228C15.8791 15.4508 15.3 16.1108 15.3 16.9C15.3 17.78 16.02 18.5 16.9 18.5C17.78 18.5 18.5 17.78 18.5 16.9C18.5 16.1108 17.9208 15.4508 17.1667 15.3228ZM15.8333 4.1C15.8333 3.51334 16.3133 3.03334 16.9 3.03334C17.4867 3.03334 17.9667 3.51334 17.9667 4.1C17.9667 4.68666 17.4867 5.16666 16.9 5.16666C16.3133 5.16666 15.8333 4.68666 15.8333 4.1ZM11.5667 4.1C11.5667 3.51334 12.0467 3.03334 12.6333 3.03334C13.22 3.03334 13.7 3.51334 13.7 4.1C13.7 4.68666 13.22 5.16666 12.6333 5.16666C12.0467 5.16666 11.5667 4.68666 11.5667 4.1ZM7.3 4.1C7.3 3.51334 7.78 3.03334 8.36666 3.03334C8.95331 3.03334 9.43331 3.51334 9.43331 4.1C9.43331 4.68666 8.95331 5.16666 8.36666 5.16666C7.78 5.16666 7.3 4.68666 7.3 4.1ZM3.03334 4.1C3.03334 3.51334 3.51334 3.03334 4.1 3.03334C4.68666 3.03334 5.16666 3.51334 5.16666 4.1C5.16666 4.68666 4.68666 5.16666 4.1 5.16666C3.51334 5.16666 3.03334 4.68666 3.03334 4.1ZM9.43334 16.9C9.43334 17.4867 8.95334 17.9667 8.36669 17.9667C7.78003 17.9667 7.30003 17.4867 7.30003 16.9C7.30003 16.3133 7.78003 15.8333 8.36669 15.8333C8.95334 15.8333 9.43334 16.3133 9.43334 16.9ZM13.7 16.9C13.7 17.4867 13.22 17.9667 12.6333 17.9667C12.0467 17.9667 11.5667 17.4867 11.5667 16.9C11.5667 16.3133 12.0467 15.8333 12.6333 15.8333C13.22 15.8333 13.7 16.3133 13.7 16.9ZM16.9 17.9667C16.3133 17.9667 15.8333 17.4867 15.8333 16.9C15.8333 16.3133 16.3133 15.8333 16.9 15.8333C17.4867 15.8333 17.9667 16.3133 17.9667 16.9C17.9667 17.4867 17.4867 17.9667 16.9 17.9667Z" fill="#E40C25"></path>
  207.                                     </svg>
  208.                                     {% verbatim %}{{ variation.trans }}{% endverbatim %}
  209.                                 </div>
  210.                                 <div class="reglament_to-modif-item" v-if="variation.drive">
  211.                                     <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  212.                                         <path d="M2.50076 12.3512L3.3558 13.1945C3.6562 13.5177 4.04051 13.7371 4.46022 13.8223V15.9602L3.17766 15.6892C2.78575 15.5838 2.39388 15.8297 2.32261 16.2162L2.18012 16.9189C2.14451 17.0946 2.18012 17.2702 2.287 17.4459C2.39388 17.6216 2.57203 17.727 2.75014 17.7621L6.24157 18.5C6.27718 18.5 6.34845 18.5 6.38406 18.5C6.52656 18.5 6.66909 18.4649 6.77597 18.4297C6.95412 18.3243 7.061 18.1486 7.09661 17.973L7.23911 17.2702C7.27472 17.0945 7.23911 16.8837 7.13223 16.7432C7.02535 16.5675 6.8472 16.4621 6.66909 16.427L5.17277 16.1107V13.8321C5.59528 13.7544 5.99959 13.5244 6.31284 13.1593L7.16788 12.3161C7.60104 11.9743 7.87024 11.5402 7.95675 11.0512H13.0355C13.1196 11.5421 13.4217 11.9965 13.9013 12.3512L14.7564 13.1945C15.0568 13.5176 15.4411 13.7371 15.8608 13.8222V15.9702H14.4357C14.0438 15.9702 13.7232 16.2864 13.7232 16.6729V17.3757C13.7232 17.7622 14.0438 18.0784 14.4357 18.0784H17.9984C18.3903 18.0784 18.711 17.7622 18.711 17.3757V16.6729C18.711 16.2864 18.3903 15.9702 17.9984 15.9702H16.5733V13.8321C16.9959 13.7544 17.4002 13.5244 17.7134 13.1593L18.5685 12.3161C19.1029 11.8944 19.3879 11.3323 19.3879 10.6998C19.3879 10.0674 19.1029 9.47007 18.5685 9.04844L17.7134 8.20518C17.4045 7.87286 17.007 7.65031 16.5733 7.57068V5.42946H17.9984C18.3903 5.42946 18.711 5.11324 18.711 4.72673V4.02404C18.711 3.63753 18.3903 3.32131 17.9984 3.32131H14.4357C14.0438 3.32131 13.7232 3.63753 13.7232 4.02404V4.72677C13.7232 5.11328 14.0438 5.4295 14.4357 5.4295H15.8608V7.57154C15.4383 7.65187 15.0642 7.87401 14.7564 8.20522L13.9013 9.04848C13.4309 9.40324 13.1548 9.86411 13.0546 10.3485H7.95742C7.87154 9.84946 7.602 9.39097 7.16788 9.04848L6.31284 8.20522C6.00397 7.8729 5.60639 7.65035 5.17277 7.57072V5.05806L6.59783 5.35922C6.63344 5.35922 6.70471 5.35922 6.74032 5.35922C6.88281 5.35922 7.02535 5.32409 7.16784 5.25381C7.34599 5.1484 7.45287 4.97271 7.48848 4.79706L7.63097 4.09432C7.66659 3.91863 7.63097 3.70782 7.52409 3.56729C7.41721 3.39159 7.23906 3.28619 7.06096 3.25106L3.56956 2.51317C3.39142 2.47805 3.17766 2.51317 3.03516 2.61858C2.85702 2.72399 2.75014 2.89968 2.71452 3.07533L2.57203 3.77806C2.46515 4.16457 2.71452 4.55104 3.10643 4.62132L4.46026 4.90745V7.5715C4.03775 7.65183 3.66371 7.87397 3.35585 8.20518L2.50076 9.04844C1.89509 9.50519 1.61011 10.1376 1.61011 10.7701C1.61011 11.3674 1.93075 11.9647 2.50076 12.3512ZM6.38406 17.7973L2.89263 17.0945L3.03516 16.3918L4.69561 16.7261C4.71748 16.7326 4.74057 16.7372 4.76483 16.74L6.5266 17.0946L6.38406 17.7973ZM17.9984 17.3756H14.4357V16.6729H17.9984V17.3756ZM14.4357 4.02404H17.9984V4.72677H14.4357V4.02404ZM3.39142 3.25102L6.88285 3.98888L6.74036 4.69161L5.02948 4.33005C4.97203 4.29155 4.89981 4.26998 4.81652 4.26998C4.79777 4.26998 4.77978 4.27142 4.76216 4.27356L3.24892 3.95375L3.39142 3.25102ZM14.3645 9.57548L14.4001 9.54036L15.2907 8.66197C15.5401 8.38087 15.8964 8.24034 16.2527 8.24034C16.6089 8.24034 16.9652 8.38087 17.2502 8.66197L18.1409 9.54036C18.4971 9.85658 18.7109 10.2782 18.7109 10.6998C18.7109 11.0863 18.4971 11.508 18.1409 11.789C18.1052 11.8242 18.1052 11.8242 18.1052 11.8242L17.2146 12.7025C16.9296 13.0188 16.5733 13.1593 16.217 13.1593C15.8608 13.1593 15.5402 12.9836 15.2551 12.7025L14.3645 11.8242L14.3289 11.789C13.937 11.5079 13.7232 11.1215 13.7232 10.735C13.7232 10.3133 13.937 9.8917 14.3645 9.57548ZM2.9639 9.57548L2.99951 9.54036L3.89016 8.66197C4.13954 8.38087 4.49583 8.24034 4.85209 8.24034C5.20834 8.24034 5.56464 8.38087 5.84962 8.66197L6.74028 9.54036C7.09653 9.85658 7.31029 10.2782 7.31029 10.6998C7.31029 11.0863 7.09653 11.508 6.74028 11.789C6.70466 11.8242 6.70466 11.8242 6.70466 11.8242L5.81405 12.7026C5.52902 13.0188 5.17277 13.1593 4.81652 13.1593C4.46026 13.1593 4.13962 12.9836 3.85459 12.7026L2.96394 11.8242L2.92833 11.7891C2.53642 11.508 2.32266 11.1215 2.32266 10.735C2.32261 10.3133 2.53638 9.92686 2.9639 9.57548Z" fill="#E40C25"></path>
  213.                                     </svg>
  214.                                     {% verbatim %}{{ variation.drive }}{% endverbatim %}
  215.                                 </div>
  216.                                 <div class="reglament_to-modif-item text-wrap" v-if="variation.description">
  217.                                     {% verbatim %}{{ '(' + variation.description + ')' }}{% endverbatim %}
  218.                                 </div>
  219.                             </button>
  220.                         </div>
  221.                     </div>
  222.                 </div>
  223.             </div>
  224.         </div>
  228.         <div class="row reglament_to-modification --regulations" v-if="regulations">
  229.             <div class="col-md-12">
  230.                 <div class="reglament_to-modification-head">
  231.                     <button class="go_back" v-on:click="backRegulations()">
  232.                         <svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  233.                             <path d="M7 1L1 6.5L7 12" stroke="#282830"/>
  234.                         </svg>
  235.                         Назад
  236.                     </button>
  237.                     <div class="reglament_to-modification-head-model">
  238.                         <span class="reglament_to-card-title text-left" v-html="selectedModel['title']"></span>
  239.                         <span class="reglament_to-card-year" v-html="selectedPeriod"></span>
  240.                     </div>
  241.                 </div>
  242.             </div>
  243.             <div class="col-md-12 reglament_to-modification-car">
  244.                 <div class="row align-items-center">
  245.                     <div class="col-sm-12 col-md-12 col-lg-7 col-xl-6">
  246.                         <div class="row align-items-center">
  247.                             <div class="col-md-4">
  248.                                 <div class="reglament_to-card-img reglament_to-card-img-table">
  249.                                     <img :src="selectedImage" alt="" loading="lazy">
  250.                                 </div>
  251.                             </div>
  252.                             <div class="col-md-6">
  253.                                 <span class="reglament_to-card-title reglament_to-card-title-mobile text-left" v-html="selectedModel['title'] + ' ' + selectedPeriod"></span>
  254.                                 <span class="reglament_to-card-desc" v-html="engine(data.index)"></span>
  255.                             </div>
  256.                         </div>
  257.                     </div>
  258.                     <div class="col-sm-12 col-md-12 col-lg-5 col-xl-6 head-right-calculation-btn">
  259.                         {% if servicePath is defined %}
  260.                             <a :href="'{{ path(servicePath) }}?variation_id='+data.vId+(data.mileage ? '&regulation_id='+regulations.id[data.mileage] : '')" class="calculation-btn calculation-order-to color">{{ 'form.to_widget_btn_order'|trans({}, 'dc_base') }}</a>
  261.                         {% endif %}
  262.                     </div>
  263.                 </div>
  264.             </div>
  265.             <div class="col-md-12">
  266.                 <span class="reglament_to-title-milage">{{ 'form.drive_count'|trans({}, 'dc_base') }}, км:</span>
  267.                 <div class="reglament_to-milage-dropdown">
  268.                     <button class="btn btn-secondary dropdown-toggle radios__btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  269.                         <span class="reglament_to-milage-item-title" v-html="data.mileage"></span>
  270.                         <span class="reglament_to-milage-item-price" v-html="regulations.amounts[data.mileage] + ' грн'"></span>
  271.                     </button>
  274.                     <div class="dropdown-menu reglament_to-milage radios__btn top__position-mobile" role="radiogroup" aria-labelledby="dropdownMenuButton" aria-bs-labelledby="dropdownMenuButton">
  275.                         <label :class="{'reglament_to-milage-item': true, 'active': index === 0}" v-for="(mileage, index) in regulations.mileages" v-on:click="setMileage(mileage)">
  276.                             <input type="radio" name="group" :value="mileage" :checked="index === 0">
  277.                             <span class="reglament_to-milage-item-title" v-html="mileage"></span>
  278.                             <span class="reglament_to-milage-item-price" v-html="regulations.amounts[mileage] + ' грн'"></span>
  279.                         </label>
  280.                     </div>
  281.                 </div>
  282.                 <div class="reglament_to-table">
  283.                     <table class="table">
  284.                         <thead>
  285.                         <tr>
  286.                             <th scope="col">{{ 'regulations.works'|trans({}, 'dc_base') }}</th>
  287.                         </tr>
  288.                         </thead>
  289.                         <tbody>
  290.                         <tr v-if="work.mileages[data.mileage]" v-for="work in regulations.works">
  291.                             <td scope="row" v-html="work.title"></td>
  292.                             <td v-if="data.mileage == null || data.mileage == mileage" v-for="mileage in regulations.mileages">
  293.                                 <span v-if="work.mileages[mileage]" v-html="work.mileages[mileage].amount+' {{ 'reglament_to_pdf.hours'|trans({}, 'dc_base') }}'"></span>
  294.                                 <span v-else>-</span>
  295.                             </td>
  296.                         </tr>
  297.                         <tr>
  298.                             <td scope="row">{{ 'form.to_widget_orient_price'|trans({}, 'dc_base') }}</td>
  299.                             <td>{% verbatim %} {{ regulations.jobsAmount[data.mileage] }} {% endverbatim %} грн</td>
  300.                         </tr>
  301.                         </tbody>
  302.                         <thead>
  303.                         <tr>
  304.                             <th>{{ 'regulations.parts'|trans({}, 'dc_base') }}</th>
  305.                         </tr>
  306.                         </thead>
  307.                         <tbody>
  308.                         <tr v-if="part.mileages[data.mileage]" v-for="part in regulations.parts">
  309.                             <td v-html="part.title + ' ('+ part.mileages[data.mileage].count+ ' ' + part.unit + ')'"></td>
  310.                             <td v-if="data.mileage == mileage" v-for="mileage in regulations.mileages">
  311.                                 <span v-if="part.mileages[mileage]" v-html="part.mileages[mileage].amount +' грн'"></span>
  312.                                 <span v-else>-</span>
  313.                             </td>
  314.                         </tr>
  315.                         </tbody>
  316.                         <tfoot>
  317.                         <tr>
  318.                             <td>{{ 'form.to_widget_orient_price_to'|trans({}, 'dc_base') }}*</td>
  319.                             <td v-if="data.mileage == mileage" v-for="mileage in regulations.mileages" v-html="regulations.amounts[mileage] +' грн'"></td>
  320.                         </tr>
  321.                         </tfoot>
  322.                     </table>
  323.                     <div class="reglament__to-btnwrap">
  324.                         <form action="{{ path('base_regulation_download') }}" id="regulationsToPdf" target="_blank">
  325.                             {% if servicePath is defined %}
  326.                                 <a :href="'{{ path(servicePath) }}?variation_id='+data.vId+(data.mileage ? '&regulation_id='+regulations.id[data.mileage] : '')" class="calculation-btn calculation-order-to color">{{ 'form.to_widget_btn_order'|trans({}, 'dc_base') }}</a>
  327.                             {% endif %}
  328.                             <input type="hidden" name="vId" :value="data.vId">
  329.                             <input type="hidden" name="dealer" :value="dealer">
  330.                             <button type="submit" class="calculation-btn download-price">
  331.                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  332.                                     <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="#FF0022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  333.                                     <path d="M7 10L12 15L17 10" stroke="#FF0022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  334.                                     <path d="M12 15V3" stroke="#FF0022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  335.                                 </svg>
  336.                                 {{ 'form.to_widget_btn_download'|trans({}, 'dc_base') }}
  337.                             </button>
  338.                         </form>
  339.                     </div>
  341.                 </div>
  342.             </div>
  343.         </div>
  345.     </div>
  346. </section>