<div id="accessoriesFilter">
<section class="section__accessories__search">
<div class="container">
{% if seoMeta.h1 %}
<h1 class="accessories__title">{{ seoMeta.h1 }}</h1>
{% else %}
{% if baseParams.isMainCategory is defined %}
{% if baseParams.isMainCategory and model is not defined %}
<h1 class="accessories__title">{{ 'accessories.category.main.h1'|trans({'%brand%': dealer.brand.name}, 'dc_base') }}
{% endif %}
{% if not baseParams.isMainCategory and model is not defined %}
<h1 class="accessories__title">{{ 'accessories.category.other.h1'|trans({'%category%': category.title(app.request.locale)}, 'dc_base') }}
{% endif %}
{% if baseParams.isMainCategory and model is defined %}
<h1 class="accessories__title">{{ 'accessories.category_model.main.h1'|trans({'%model%': model.title}, 'dc_base') }}
{% endif %}
{% if not baseParams.isMainCategory and model is defined %}
<h1 class="accessories__title">{{ 'accessories.category_model.other.h1'|trans({'%category%': category.title(app.request.locale), '%model%': model.title}, 'dc_base') }}
{% endif %}
{{ variation is defined ? variation.years : null }}
</h1>
{% endif %}
{% endif %}
<div class="accessories__search__wrapper">
<p class="accessories__search__text">{% if accessoryModel is defined %}{{ 'accessories.select_car'|trans({}, 'dc_base') }}{% endif %}</p>
<div class="accessories__search__container">
<input class="accessories__search__input" type="text" v-model="inputSearch" @keyup.enter="initSearch"
placeholder="{{ 'accessories.search_article_number'|trans({}, 'dc_base') }}">
<button class="accessories__search-icon" @click="initSearch">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<g clip-path="url(#clip0_129_72)">
<path d="M13.8673 13.2383L10.2527 9.68153C11.1993 8.65314 11.7808 7.29308 11.7808 5.79648C11.7804 2.59497 9.14339 0 5.89025 0C2.63711 0 0.00012207 2.59497 0.00012207 5.79648C0.00012207 8.99799 2.63711 11.593 5.89025 11.593C7.29583 11.593 8.585 11.1068 9.59763 10.2985L13.2262 13.8694C13.403 14.0435 13.6901 14.0435 13.8669 13.8694C14.0441 13.6952 14.0441 13.4125 13.8673 13.2383ZM5.89025 10.7011C3.13774 10.7011 0.906401 8.50525 0.906401 5.79648C0.906401 3.0877 3.13774 0.891822 5.89025 0.891822C8.64279 0.891822 10.8741 3.0877 10.8741 5.79648C10.8741 8.50525 8.64279 10.7011 5.89025 10.7011Z"
fill="#181716"/>
</g>
<defs>
<clipPath id="clip0_129_72">
<rect width="14" height="14" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
</div>
</section>
<section class="section__accessories__slider">
<div class="container overflow-hidden-mobile">
<div class="accessories__slider__wrapper">
<div class="accessories-slider">
<a v-if="options.carModels" v-for="model in options.carModels" :key="model.id" :href="'/accessories-' + model.url"
class="accessories__slider__box">
<img class="accessories__slider__img"
:src="model.image" alt="">
<p class="accessories__slider__name" v-html="model.title"></p>
</a>
<a v-for="variation in options.modelVariations" :key="variation.id" :href="'variation-' + variation.id"
class="accessories__slider__box">
<img class="accessories__slider__img"
:src="variation.image" alt="">
<p class="accessories__slider__name" v-html="variation.period"></p>
</a>
</div>
</div>
</div>
</section>
<section class="section__accessories__select__item">
<div class="container">
<div class="accessories__select__item__wrapper">
<p class="select__item__info">{{ 'accessories.found'|trans({}, 'dc_base') }} <span class="select__item__count">{{ accessoryCount }}</span>
{{ 'accessories.proposals'|trans({}, 'dc_base') }}:</p>
<div class="select__item__wrapper">
<div class="select__item" v-for="active in params.active">
<span v-html="active.title"></span>
<button @click="deleteFilter(active.key, active.param)">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L11 11M11 1L1 11" stroke="{{ svgColor ?? '#FF0022' }}" stroke-linecap="round"/>
</svg>
</button>
</div>
</div>
<div class="accessories__filter__container">
<button class="accessories__filter__mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M0.5 4.17537H8.64103C8.86559 5.08269 9.68634 5.75747 10.6621 5.75747C11.6378 5.75747 12.4585 5.08269 12.6831 4.17537H15.5C15.7761 4.17537 16 3.9515 16 3.67537C16 3.39925 15.7761 3.17537 15.5 3.17537H12.6831C12.4585 2.26806 11.6378 1.59325 10.662 1.59325C9.68628 1.59325 8.86553 2.26806 8.641 3.17537H0.5C0.223875 3.17537 0 3.39925 0 3.67537C0 3.9515 0.223875 4.17537 0.5 4.17537ZM10.6621 2.59325C11.2587 2.59325 11.7442 3.07869 11.7442 3.67534C11.7442 4.27203 11.2587 4.75747 10.6621 4.75747C10.0654 4.75747 9.57994 4.27203 9.57994 3.67534C9.57994 3.07869 10.0654 2.59325 10.6621 2.59325ZM0.5 8.5H3.31694C3.5415 9.40731 4.36222 10.0821 5.33797 10.0821C6.31372 10.0821 7.13444 9.40731 7.359 8.5H15.5C15.7761 8.5 16 8.27612 16 8C16 7.72387 15.7761 7.5 15.5 7.5H7.35897C7.13441 6.59269 6.31369 5.91787 5.33794 5.91787C4.36219 5.91787 3.54147 6.59269 3.31691 7.5H0.5C0.223875 7.5 0 7.72387 0 8C0 8.27612 0.223844 8.5 0.5 8.5ZM5.33794 6.91787C5.93462 6.91787 6.42006 7.40331 6.42006 8C6.42006 8.59666 5.93462 9.08209 5.33794 9.08209C4.74125 9.08209 4.25581 8.59666 4.25581 8C4.25581 7.40331 4.74125 6.91787 5.33794 6.91787ZM15.5 11.8246H12.6831C12.4585 10.9173 11.6378 10.2425 10.662 10.2425C9.68628 10.2425 8.86556 10.9173 8.641 11.8246H0.5C0.223875 11.8246 0 12.0485 0 12.3246C0 12.6007 0.223875 12.8246 0.5 12.8246H8.64103C8.86559 13.7319 9.68631 14.4067 10.6621 14.4067C11.6378 14.4067 12.4585 13.7319 12.6831 12.8246H15.5C15.7761 12.8246 16 12.6007 16 12.3246C16 12.0485 15.7762 11.8246 15.5 11.8246ZM10.6621 13.4067C10.0654 13.4067 9.57994 12.9213 9.57994 12.3246C9.57994 11.7279 10.0654 11.2425 10.6621 11.2425C11.2587 11.2425 11.7442 11.7279 11.7442 12.3246C11.7442 12.9213 11.2587 13.4067 10.6621 13.4067Z"
fill="{{ svgColor ?? '#FF0022' }}"/>
</svg>
{{ 'accessories.filter'|trans({}, 'dc_base') }}
</button>
<div class="accessories__select__sort__wrapper">
<svg class="accessories__select__name-icon-mob" xmlns="http://www.w3.org/2000/svg" width="17"
height="16" viewBox="0 0 17 16" fill="none">
<path d="M14.2229 6.37536L11.8229 0.61536C11.7483 0.43648 11.5736 0.32 11.38 0.32C11.1864 0.32 11.0115 0.43648 10.937 0.61536L8.53695 6.37536C8.43471 6.62 8.55055 6.90112 8.79519 7.00304C9.04031 7.10528 9.32063 6.98976 9.42287 6.7448L10.3 4.64H12.46L13.337 6.74464C13.4138 6.9288 13.592 7.04016 13.78 7.04016C13.8419 7.04016 13.9042 7.02816 13.9646 7.00288C14.2093 6.90096 14.3251 6.62 14.2229 6.37536ZM10.7 3.68L11.38 2.048L12.06 3.68H10.7ZM13.78 15.2C13.78 15.4651 13.5653 15.68 13.3 15.68H9.45999C9.27535 15.68 9.10751 15.5742 9.02735 15.4078C8.94767 15.2416 8.96975 15.0442 9.08495 14.9002L12.3011 10.88H9.45999C9.19471 10.88 8.97999 10.6651 8.97999 10.4C8.97999 10.1349 9.19471 9.92 9.45999 9.92H13.3C13.4846 9.92 13.6525 10.0258 13.7326 10.1922C13.8123 10.3584 13.7902 10.5558 13.675 10.6998L10.4589 14.72H13.3C13.5653 14.72 13.78 14.9349 13.78 15.2ZM6.43935 12.9406C6.62687 13.1282 6.62687 13.4318 6.43935 13.6194L4.99935 15.0594C4.90559 15.1531 4.78271 15.2 4.65999 15.2C4.53727 15.2 4.41439 15.1531 4.32063 15.0594L2.88063 13.6194C2.69311 13.4318 2.69311 13.1282 2.88063 12.9406C3.06815 12.7531 3.37183 12.7531 3.55935 12.9406L4.17999 13.5613V1.28C4.17999 1.01488 4.39471 0.8 4.65999 0.8C4.92527 0.8 5.13999 1.01488 5.13999 1.28V13.5613L5.76063 12.9406C5.94799 12.7531 6.25183 12.7531 6.43935 12.9406Z"
fill="{{ svgColor ?? '#FF0022' }}"/>
</svg>
<span class="accessories__select__name">{{ 'accessories.sort'|trans({}, 'dc_base') }}:</span>
<select class="accessories__select__sort" v-model="selected.sort">
<option :value="'position'">{{ 'catalog.from_default'|trans({}, 'portal_base') }}</option>
<option :value="'price-asc'">{{ 'catalog.from_cheap'|trans({}, 'portal_base') }}</option>
<option :value="'price-desc'">{{ 'catalog.from_expensive'|trans({}, 'portal_base') }}</option>
</select>
</div>
</div>
</div>
</div>
</section>
<div class="section__accessories__catalog">
<div class="container">
<div class="section__accessories__catalog__wrapper">
<div class="accessories__catalog__filter__wrapper">
<div class="catalog__filter__close">
<svg class="filter__close-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 4.17537H8.64103C8.86559 5.08269 9.68634 5.75747 10.6621 5.75747C11.6378 5.75747 12.4585 5.08269 12.6831 4.17537H15.5C15.7761 4.17537 16 3.9515 16 3.67537C16 3.39925 15.7761 3.17537 15.5 3.17537H12.6831C12.4585 2.26806 11.6378 1.59325 10.662 1.59325C9.68628 1.59325 8.86553 2.26806 8.641 3.17537H0.5C0.223875 3.17537 0 3.39925 0 3.67537C0 3.9515 0.223875 4.17537 0.5 4.17537ZM10.6621 2.59325C11.2587 2.59325 11.7442 3.07869 11.7442 3.67534C11.7442 4.27203 11.2587 4.75747 10.6621 4.75747C10.0654 4.75747 9.57994 4.27203 9.57994 3.67534C9.57994 3.07869 10.0654 2.59325 10.6621 2.59325ZM0.5 8.5H3.31694C3.5415 9.40731 4.36222 10.0821 5.33797 10.0821C6.31372 10.0821 7.13444 9.40731 7.359 8.5H15.5C15.7761 8.5 16 8.27612 16 8C16 7.72387 15.7761 7.5 15.5 7.5H7.35897C7.13441 6.59269 6.31369 5.91787 5.33794 5.91787C4.36219 5.91787 3.54147 6.59269 3.31691 7.5H0.5C0.223875 7.5 0 7.72387 0 8C0 8.27612 0.223844 8.5 0.5 8.5ZM5.33794 6.91787C5.93462 6.91787 6.42006 7.40331 6.42006 8C6.42006 8.59666 5.93462 9.08209 5.33794 9.08209C4.74125 9.08209 4.25581 8.59666 4.25581 8C4.25581 7.40331 4.74125 6.91787 5.33794 6.91787ZM15.5 11.8246H12.6831C12.4585 10.9173 11.6378 10.2425 10.662 10.2425C9.68628 10.2425 8.86556 10.9173 8.641 11.8246H0.5C0.223875 11.8246 0 12.0485 0 12.3246C0 12.6007 0.223875 12.8246 0.5 12.8246H8.64103C8.86559 13.7319 9.68631 14.4067 10.6621 14.4067C11.6378 14.4067 12.4585 13.7319 12.6831 12.8246H15.5C15.7761 12.8246 16 12.6007 16 12.3246C16 12.0485 15.7762 11.8246 15.5 11.8246ZM10.6621 13.4067C10.0654 13.4067 9.57994 12.9213 9.57994 12.3246C9.57994 11.7279 10.0654 11.2425 10.6621 11.2425C11.2587 11.2425 11.7442 11.7279 11.7442 12.3246C11.7442 12.9213 11.2587 13.4067 10.6621 13.4067Z"
fill="{{ svgColor ?? '#FF0022' }}"/>
</svg>
<p class="filter__close-text">{{ 'accessories.filter_found'|trans({}, 'dc_base') }} <span>{{ accessoryCount }}</span> {{ 'accessories.proposals'|trans({}, 'dc_base') }}</p>
<svg class="filter__close-x" xmlns="http://www.w3.org/2000/svg" width="12" height="12"
viewBox="0 0 12 12" fill="none">
<path d="M10.75 1.125L1 10.875M1 1.125L10.75 10.875" stroke="#C5C6C6" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="catalog__filter__open__mob">
{% if category is defined or accessoryCategories is defined %}
<p class="accessories__catalog__name">{{ 'accessories.catalogue'|trans({}, 'dc_base') }}</p>
{% endif %}
{% if category is defined %}
{% if category.parent is not null %}
{% if category.parent.parent is null and model is not defined %}
{% set backUrl = path('shop_accessory_catalog', filterParams.filters) %}
{% elseif category.parent.parent is null and model is defined %}
{% set backUrl = path('shop_accessory_model', {modelUrl: model.url}|merge(filterParams.filters)) %}
{% elseif model is defined %}
{% set backUrl = path('shop_accessory_category_model', {categoryUrl: category.parent.url, modelUrl: model.url}|merge(filterParams.filters)) %}
{% else %}
{% set backUrl = path('shop_accessory_category', {categoryUrl: category.parent.url}|merge(filterParams.filters)) %}
{% endif %}
<a href="{{ backUrl }}"
class="accessories__catalog__prev">
<svg class="catalog__prev__icon" xmlns="http://www.w3.org/2000/svg" width="11"
height="6"
viewBox="0 0 11 6" fill="inherit">
<path d="M0.717157 3.28284C0.560947 3.12663 0.560947 2.87337 0.717157 2.71716L3.26274 0.171573C3.41895 0.0153632 3.67222 0.0153632 3.82843 0.171573C3.98464 0.327783 3.98464 0.581048 3.82843 0.737258L1.56569 3L3.82843 5.26274C3.98464 5.41895 3.98464 5.67222 3.82843 5.82843C3.67222 5.98464 3.41895 5.98464 3.26274 5.82843L0.717157 3.28284ZM11 3.4H1V2.6H11V3.4Z"
fill="inherit"/>
</svg>
{{ 'accessories.back_to'|trans({}, 'dc_base') }} <span>{{ category.parent.title(app.request.locale) }}</span></a>
{% endif %}
{% endif %}
{% if accessoryCategories is defined %}
<ul class="filter__header__box">
{% for category in accessoryCategories %}
{% if model.url is defined and variation is not defined %}
<li class="filter__header-item"><a
href="{{ path('shop_accessory_category_model', {categoryUrl: category.url, modelUrl: model.url}|merge(filterParams.filters)) }}">{{ category.title(app.request.locale) }}</a>
</li>
{% elseif model.url is defined and variation is defined %}
<li class="filter__header-item"><a
href="{{ path('shop_accessory_category_model_variation', {categoryUrl: category.url, modelUrl: model.url, variationId: variation.id}|merge(filterParams.filters)) }}">{{ category.title(app.request.locale) }}</a>
</li>
{% else %}
<li class="filter__header-item"><a
href="{{ path('shop_accessory_category', {categoryUrl: category.url}|merge(filterParams.filters)) }}">{{ category.title(app.request.locale) }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
<template v-if="isLoad && filters.model">
<p class="accessories__catalog__name">{{ 'accessories.model'|trans({}, 'dc_base') }}</p>
<div class="catalog__filter__input__container collapse filter-more" id="filter-more-model">
<div class="catalog__filter__input__box" v-for="model in filters.model">
<input class="catalog__filter__input" :id="'checkbox-model-' + model.id"
type="checkbox" v-model="selected.model[model.id]" name="model"
:value="model.id">
<label :for="'checkbox-model-' + model.id" v-html="model.title"></label>
</div>
</div>
<a class="collapsed filter-more-btn" data-bs-toggle="collapse" data-toggle="collapse" href="#filter-more-model"
aria-expanded="false" aria-controls="filter-more-model"></a>
</template>
<template v-if="isLoad && filters.year">
<p class="accessories__catalog__name">{{ 'accessories.year'|trans({}, 'dc_base') }}</p>
<div class="catalog__filter__input__container collapse filter-more" id="filter-more-year">
<div class="catalog__filter__input__box" v-for="year in filters.year">
<input class="catalog__filter__input" :id="'checkbox-year-' + year.id"
type="checkbox" v-model="selected.year[year.id]" name="year"
:value="year.id">
<label :for="'checkbox-year-' + year.id" v-html="year.title"></label>
</div>
</div>
<a class="collapsed filter-more-btn" data-bs-toggle="collapse" data-toggle="collapse" href="#filter-more-year"
aria-expanded="false" aria-controls="filter-more-year"></a>
</template>
<template v-if="isLoad && filters.fuel">
<p class="accessories__catalog__name">{{ 'accessories.fuel_type'|trans({}, 'dc_base') }}</p>
<div class="catalog__filter__input__container">
<div class="catalog__filter__input__box" v-for="fuel in filters.fuel">
<input class="catalog__filter__input" :id="'checkbox-fuel-' + fuel.id"
type="checkbox" v-model="selected.fuel[fuel.id]" name="fuel"
:value="fuel.id">
<label :for="'checkbox-fuel-' + fuel.id" v-html="fuel.title"></label>
</div>
</div>
</template>
</div>
<div class="filters__btn__apply" v-if="buttonFilter">
<button class="btn__cancel"
@click.stop.prvent="filterReload">{{ 'new_catalog.del'|trans({}, 'portal_base') }}</button>
<button class="btn__apply"
@click.stop.prvent="filterAction">{{ 'new_catalog.apply'|trans({}, 'portal_base') }}</button>
</div>
</div>
<div class="accessories__catalog__main__wrapper">
{% if accessories|length %}
<div class="accessories__catalog__main">
{% for accessory in accessories %}
<div class="accessories__catalog__card">
<div class="catalog__card__img__box">
<a class="catalog__card__img"
href="{{ path('shop_accessory_page', {workId: accessory.id}) }}"><img
src="{{ sonata_path(accessory.image , 'reference') }}" alt=""></a>
<!-- <div class="accessories__star__rating">
<span>{{ accessory.review.avg }}</span>
</div>-->
{% if accessory.isSale %}
<svg class="accessories__interest" width="30" height="32"
viewBox="0 0 30 32"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect y="2" width="30" height="30" rx="15" fill="{{ svgColor ?? '#FF0022' }}"/>
<path d="M13.02 16.77C11.99 16.77 11.33 16.01 11.33 14.8C11.33 13.6 11.99 12.84 13.02 12.84C14.05 12.84 14.71 13.6 14.71 14.8C14.71 16.01 14.05 16.77 13.02 16.77ZM12.53 20L16.99 12.9H18.02L13.56 20H12.53ZM13.02 15.91C13.47 15.91 13.69 15.54 13.69 14.8C13.69 14.07 13.47 13.7 13.02 13.7C12.57 13.7 12.35 14.07 12.35 14.8C12.35 15.54 12.57 15.91 13.02 15.91ZM17.52 20.06C16.49 20.06 15.82 19.3 15.82 18.09C15.82 16.89 16.49 16.13 17.52 16.13C18.55 16.13 19.21 16.89 19.21 18.09C19.21 19.3 18.55 20.06 17.52 20.06ZM17.52 19.2C17.97 19.2 18.19 18.83 18.19 18.09C18.19 17.36 17.97 16.99 17.52 16.99C17.07 16.99 16.84 17.36 16.84 18.09C16.84 18.83 17.07 19.2 17.52 19.2Z"
fill="white"/>
</svg>
{% endif %}
{# Під замовлення #}
{% if accessory.count > 0 %}
<div class="accessories__status__in-stock">
<p class="status__in-stock-text">{{ 'main.in_stock'|trans({}, 'dc_base') }}</p>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="24" y="24" width="24" height="24" rx="12"
transform="rotate(180 24 24)" fill="inherit"/>
<path d="M10.3667 15.7167C10.2778 15.7167 10.1944 15.7027 10.1167 15.6747C10.0389 15.6467 9.96667 15.5996 9.9 15.5333L7.03333 12.6667C6.91111 12.5444 6.85267 12.386 6.858 12.1913C6.86333 11.9967 6.92733 11.8384 7.05 11.7167C7.17222 11.5944 7.32778 11.5333 7.51667 11.5333C7.70556 11.5333 7.86111 11.5944 7.98333 11.7167L10.3667 14.1L16.0167 8.45C16.1389 8.32778 16.2973 8.26667 16.492 8.26667C16.6867 8.26667 16.8449 8.32778 16.9667 8.45C17.0889 8.57222 17.15 8.73067 17.15 8.92533C17.15 9.12 17.0889 9.27822 16.9667 9.4L10.8333 15.5333C10.7667 15.6 10.6944 15.6473 10.6167 15.6753C10.5389 15.7033 10.4556 15.7171 10.3667 15.7167Z"
fill="inherit"/>
</svg>
</div>
{% else %}
<div class="accessories__status__to-order">
<p class="status__in-stock-text">{{ 'main.to_order'|trans({}, 'dc_base') }}</p>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="12" fill="inherit"/>
<path d="M11.62 12.52L11.4 7.9H12.86L12.64 12.52H11.62ZM12.14 15.15C11.71 15.15 11.36 14.8 11.36 14.37C11.36 13.94 11.71 13.59 12.14 13.59C12.58 13.59 12.92 13.94 12.92 14.37C12.92 14.8 12.58 15.15 12.14 15.15Z"
fill="inherit"/>
</svg>
</div>
{% endif %}
</div>
<a class="catalog__card__name"
href="{{ path('shop_accessory_page', {workId: accessory.id}) }}">{{ accessory.title }}</a>
<div class="catalog__price__card">
<p>{{ 'accessories.price_accessory'|trans({}, 'dc_base') }}</p>
{% if accessory.isSale %}
<span class="catalog__price">{{ accessory.salePricePart |number_format(2, '.', ' ') }}</span>
{% else %}
<span class="catalog__price">{{ accessory.pricePart |number_format(2, '.', ' ') }}</span>
{% endif %}
</div>
<div class="catalog__price__card">
{% if accessory.priceJob > 0 %}
<div class="catalog__price__card__parent">
<p class="catalog__price__name">{{ 'accessories.price_installation'|trans({}, 'dc_base') }}</p>
<svg class="price__card-icon" xmlns="http://www.w3.org/2000/svg"
width="10"
height="11"
viewBox="0 0 10 11" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4.99953 0.5C6.38053 0.5 7.63041 1.05938 8.53504 1.96401C9.43968 2.86959 10 4.11947 10 5.49953C10 6.88053 9.43968 8.13041 8.53504 9.03504C7.63041 9.93968 6.38053 10.5 4.99953 10.5C3.61947 10.5 2.36959 9.93968 1.46401 9.03504C0.559381 8.13041 0 6.88053 0 5.49953C0 4.11947 0.559381 2.86864 1.46401 1.96401C2.36864 1.05938 3.61947 0.5 4.99953 0.5ZM7.98321 2.51585C7.22007 1.75271 6.16451 1.28012 4.99953 1.28012C3.83454 1.28012 2.77993 1.75271 2.01585 2.51585C1.25271 3.27993 0.780115 4.33454 0.780115 5.49953C0.780115 6.66451 1.25271 7.72007 2.01585 8.48321C2.77993 9.24634 3.83454 9.71894 4.99953 9.71894C6.16451 9.71894 7.22007 9.24634 7.98321 8.48321C8.74634 7.72007 9.21894 6.66451 9.21894 5.49953C9.21894 4.33454 8.74634 3.27993 7.98321 2.51585ZM4.95614 3.6714C4.74106 3.6714 4.56655 3.49689 4.56655 3.28181C4.56655 3.0658 4.74106 2.89128 4.95614 2.89128H5.04292C5.25894 2.89128 5.43345 3.0658 5.43345 3.28181C5.43345 3.49689 5.25894 3.6714 5.04292 3.6714H4.95614ZM4.60617 4.5732C4.60617 4.35813 4.78068 4.18361 4.9967 4.18361C5.21177 4.18361 5.38628 4.35813 5.38628 4.5732V7.71819C5.38628 7.93326 5.21177 8.10872 4.9967 8.10872C4.78068 8.10872 4.60617 7.93326 4.60617 7.71819V4.5732Z"
fill="#9C9C9C"/>
</svg>
<div class="price__card__info__box">
{% if accessory.isSale %}
<p>{{ 'accessories.price_accessory'|trans({}, 'dc_base') }} {{ accessory.salePricePart |number_format(2, '.', ' ') }}</p>
<p>{{ 'accessories.installation_price'|trans({}, 'dc_base') }} {{ accessory.priceJob |number_format(2, '.', ' ') }}</p>
<p>{{ 'accessories.total_price'|trans({}, 'dc_base') }} {{ (accessory.salePricePart + accessory.priceJob) |number_format(2, '.', ' ') }}</p>
{% else %}
<p>{{ 'accessories.price_accessory'|trans({}, 'dc_base') }} {{ accessory.pricePart |number_format(2, '.', ' ') }}</p>
<p>{{ 'accessories.installation_price'|trans({}, 'dc_base') }} {{ accessory.priceJob |number_format(2, '.', ' ') }}</p>
<p>{{ 'accessories.total_price'|trans({}, 'dc_base') }} {{ (accessory.pricePart + accessory.priceJob) |number_format(2, '.', ' ') }}</p>
{% endif %}
</div>
</div>
{% if accessory.isSale %}
<span class="catalog__price">{{ (accessory.salePricePart + accessory.priceJob) |number_format(2, '.', ' ') }}</span>
{% else %}
<span class="catalog__price">{{ (accessory.pricePart + accessory.priceJob) |number_format(2, '.', ' ') }}</span>
{% endif %}
{% endif %}
</div>
<div class="catalog__card__info__wrapper">
{% if accessory.models|length > 0 %}
<p class="catalog__card__info-title">{{ 'accessories.suitable_for'|trans({}, 'dc_base') }} :</p>
{% for model in accessory.models %}
<span class="catalog__card__info-item">{{ model }}; </span>
{% endfor %}
{% endif %}
</div>
<div class="catalog__card__article">
{{ 'accessories.article'|trans({}, 'dc_base') }}:{{ accessory.vendorCode }}</div>
</div>
{% endfor %}
</div>
{% elseif filterParams.search %}
<div class="catalog__no_search__message">{{ 'accessories.product_not_found'|trans({}, 'dc_base') }}</div>
{% endif %}
<div class="pagination-test text-center">
{% include '@DcSite/Modules/pagination/pagination.html.twig' %}
</div>
<div class="description mt-3">
{% if seoMeta.descriptionAll %}{{ seoMeta.descriptionAll|raw}}{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>