<div class="calculation_module-base-style section-padding-page bg-gray-page w-100" id="{% if wrapperId is defined %}{{ wrapperId }}{% else %}accessories{% endif %}"> <div class="container"> <div class="row justify-content-center forms"> <div class="col-md-12"> <div id="ins-calc" class="credit-calc-page"> <div class="flex-column"> <template v-if="!options.withoutModelFilter"> <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4 overflow-hidden" v-if="brands && !brand"> <div class="calculation_module-title">Бренд:</div> </div> <div class="col-md-12" v-if="brands && !brand"> <div class="row row-calculation_module mobile-scroll"> <div class="col-md-2 calculation_module-col calculation_module-brand" v-for="brandItem in brands" @click="setBrand(brandItem,brandItem.dealerId)"> <div class="calculation_module-style" :class="brand && brand.id == brandItem.id ? 'active' : ''"> <div class="calculation_module-item-img"> <img :src="brandItem.image" :alt="brandItem.name"> </div> <div class="calculation_module-info" v-if="brandItem.dealers"> <div class="calculation_module-info-head"> <div class="calculation_module-title mb-2"> <span class="dealer-active" v-html="brandItem.name"></span> {{ 'car_page.new.choose_dealer'|trans({}, 'dc_base') }} </div> </div> <div @click.stop.prevent="setBrand(brandItem,dealer.id)" class="calculation_module-info-brand" v-for="dealer in brandItem.dealers"> <span class="calculation_module-info-brand-name" v-html="dealer.title"></span> <span class="calculation_module-info-brand-addr" v-html="dealer.adres"></span> </div> </div> </div> </div> </div> </div> <div class="w-100" v-if="dealer && data"> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4 overflow-hidden"> <div class="calculation_module-title">Модель: <span :class="options.disableCarChange !== true ? 'calculation_module-title-selected' : ''" @click="setBrand(null)" v-if="brand" v-html="brand.name"></span> <span :class="options.disableCarChange !== true ? 'calculation_module-title-selected' : ''" @click="setCar(null)" v-if="selectCar" v-html="selectCar.carName+(selectCar.hasHybrid && options.withHybrid ? ' Hybrid' : '')"></span> </div> </div> </div> </div> <div class="w-100" v-if="data && group && !selectCar"> <div class="menu-select-car swappy-radios mobile-scroll" role="radiogroup" v-if="Object.keys(data).length > 1"> <label v-for="groupItem in data" :class="{'active': groupItem.id == group}"> <input type="radio" v-model="group" :value="groupItem.id" name="group"/> <span v-html="groupItem.title"></span> </label> </div> <div class="row row-calculation_module mobile-scroll"> <div class="col-md-3 calculation_module-col calculation_module-col--car" v-for="carItem in data[group].cars" @click="setCar(carItem)"> <div class="calculation_module-style" :class="selectCar && selectCar.id == carItem.id ? 'active' : ''"> <div class="calculation_module-item-img"> <picture :alt="carItem.carName"> <source :srcset="carItem.image_webp" type="image/webp"> <source :srcset="carItem.image"> <img :src="carItem.image" :alt="carItem.carName"> </picture> </div> <span class="calculation_module-item-name" v-html="carItem.carName+(carItem.hasHybrid && options.withHybrid ? ' {{ 'pages.base.car_type.hybrid'|trans({}, 'dc_base') }}' : '')"></span> <span class="calculation_module-item-price"></span> </div> </div> </div> </div> </template> <div style="white-space: nowrap;" class="menu-select-car swappy-radios mobile-scroll" role="radiogroup" v-if="selectCar"> <label v-for="group in selectCar.groups" :checked="accGroup == group.id" :class="{'active': group.id == accGroup}"> <input type="radio" v-model="accGroup" @click="setAccGroup(group.id)" :id="'acc-group-'+group.id" :value="group.id" name="accGroup"/> <span v-html="group.title"></span> </label> </div> <div class="tab-content" v-if="selectCar && accGroup" id="nav-tabContent"> <div class="row row-calculation_module mobile-scroll"> <div class="col-md-3 calculation_module-col calculation_module-col--acc tab-pane fade show" :id="'group-' + acc.groupId + '-' + acc.id" v-for="acc in selectCar.groups[accGroup].accessories" @click.prevent="setAccessory(acc)"> <div class="calculation_module-style"> <div class="calculation_module-item-img"> <picture :alt="acc.name"> <source :srcset="acc.image_webp" type="image/webp"> <source :srcset="acc.image"> <img :src="acc.image" :alt="acc.name"> </picture> </div> <span class="calculation_module-item-name" v-html="acc.name"></span> <span class="calculation_module-item-price" v-html="acc.price.toLocaleString()"></span> </div> </div> </div> </div> </div> </div> </div> </div> </div></div>