<div class="card__box car__box__moto__water cursor-pointer"
{% if item.vehicle.isUsed %}
@click="transitionToCarPage('{{ path('portal_used_car',{url:item.vehicle.url}) }}')"
{% else %}
@click="transitionToCarPage('{{ path('portal_new_car', {dealer: item.vehicle.dealer.url, url:item.vehicle.url, variation: item.vehicle.vehicleItemId }) }}')"
{% endif %}>
{% include '@Portal/Catalog/catalog-card-preview.html.twig' %}
<div class="card__car__info__wrapper">
{% if item.vehicle.isUsed %}
<a class="card__car__title" href="{{ path('portal_used_car',{url:item.vehicle.url}) }}">{{ item.vehicle.fullName }}</a>
{% else %}
<a class="card__car__title"
href="{{ path('portal_new_car',{dealer: item.vehicle.dealer.url, url:item.vehicle.url, variation: item.vehicle.vehicleItemId }) }}">{{ item.vehicle.fullName }}</a>
{% endif %}
<div class="card__car__power__box">
{% if item.vehicle.isUsed %}
<a class="card__car__power" href="{{ path('portal_used_car',{url:item.vehicle.url}) }}">{{ item.vehicle.equipment.title }} {{ item.vehicle.enginePower(app.request.locale) }} {{ 'catalog.k_s'|trans({}, 'portal_base') }}</a>
{% else %}
<a class="card__car__power" href="{{ path('portal_new_car',{dealer: item.vehicle.dealer.url, url:item.vehicle.url, variation: item.vehicle.vehicleItemId }) }}">{{ item.vehicle.equipment.title }} {{ item.vehicle.enginePower(app.request.locale) }} {{ 'catalog.k_s'|trans({}, 'portal_base') }}</a>
{% endif %}
<span class="card__car__year">{{ item.vehicle.year }}</span>
</div>
{% if item.vehicle.bodyType.id == 288 %}
{% include '@Portal/Catalog/icons/boat_icon.html.twig' %}
{% elseif item.vehicle.bodyType.id == 106 %}
{% include '@Portal/Catalog/icons/jet_ski.html.twig' %}
{% elseif item.vehicle.bodyType.id == 289 %}
{% include '@Portal/Catalog/icons/engines.html.twig' %}
{% endif %}
<div class="card__car__credit__info__box">
{% if item.creditPayment > 0 and not app.request.get('credit') %}
<span class="credit__info__title">Авто в кредит за {{ item.creditPayment }} грн/{{ 'catalog.month'|trans({}, 'portal_base') }}</span>
<div class="car_tooltip_icon" @click="infoActive($event)">
<svg width="12" height="12" viewBox="0 0 12 12" fill="inherit"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.99943 0C7.65664 0 9.1565 0.671257 10.2421 1.75682C11.3276 2.84351 12 4.34336 12 5.99943C12 7.65664 11.3276 9.1565 10.2421 10.2421C9.1565 11.3276 7.65664 12 5.99943 12C4.34336 12 2.84351 11.3276 1.75682 10.2421C0.671257 9.1565 0 7.65664 0 5.99943C0 4.34336 0.671257 2.84237 1.75682 1.75682C2.84237 0.671257 4.34336 0 5.99943 0ZM9.57985 2.41902C8.66409 1.50325 7.39742 0.936138 5.99943 0.936138C4.60145 0.936138 3.33591 1.50325 2.41902 2.41902C1.50325 3.33591 0.936138 4.60145 0.936138 5.99943C0.936138 7.39742 1.50325 8.66409 2.41902 9.57985C3.33591 10.4956 4.60145 11.0627 5.99943 11.0627C7.39742 11.0627 8.66409 10.4956 9.57985 9.57985C10.4956 8.66409 11.0627 7.39742 11.0627 5.99943C11.0627 4.60145 10.4956 3.33591 9.57985 2.41902ZM5.94736 3.80568C5.68927 3.80568 5.47986 3.59626 5.47986 3.33818C5.47986 3.07895 5.68927 2.86954 5.94736 2.86954H6.0515C6.31073 2.86954 6.52014 3.07895 6.52014 3.33818C6.52014 3.59626 6.31073 3.80568 6.0515 3.80568H5.94736ZM5.5274 4.88784C5.5274 4.62975 5.73682 4.42034 5.99604 4.42034C6.25413 4.42034 6.46354 4.62975 6.46354 4.88784V8.66182C6.46354 8.91991 6.25413 9.13046 5.99604 9.13046C5.73682 9.13046 5.5274 8.91991 5.5274 8.66182V4.88784Z"
fill="#9C9C9C"/>
</svg>
</div>
<div class="card__car__info__box" :class="{ active: isActiveInfo == '{{ item.vehicle.vehicleItemId }}' }">
<span class="card_car_info_close" @click="infoClose($event)">
<svg width="9" height="9" viewbox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L1 8M1 1L8 8" stroke="#9C9C9C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<p class="card__car__info__text">{{ 'catalog.calculation_preliminary'|trans({}, 'portal_base') }}</p>
</div>
{% endif %}
</div>
{% if not item.vehicle.isUsed %}
<div class="card__car__color__box">
{% if item.vehicleColors|length > 1 %}
{% for color in item.vehicleColors %}
<div class="car__color {% if loop.index == 1 %}active{% endif %}"
v-on:click="setColorVehicle($event, '{{ color.imageVehicle }}', '{{ color.imageWebpVehicle }}')"
style="background-image: url('{{ color.imageColor }}')"></div>
{% endfor %}
{% endif %}
</div>
{% endif %}
<div class="card__car__power__box card_car_power_box_wrap">
{% if item.creditPayment > 0 and app.request.get('credit') %}
<span class="card__car__price__new">{{ item.creditPayment|price }} грн/{{ 'catalog.month'|trans({}, 'portal_base') }}</span>
{% endif %}
{% if item.vehicle.isUsed and (item.vehicle.vehicleItems.first.isReserved or item.vehicle.vehicleItems.first.deposit) %}
<span class="card__car__price__new">{{ 'car_in_stock_module.reserved'|trans({}, 'dc_base') }}</span>
{% else %}
<span class="card__car__price__second">{{ item.vehicle.price|price }} грн</span>
{% endif %}
{% if item.vehicle.fullPrice > item.vehicle.price and not (item.vehicle.vehicleItems.first.isReserved or item.vehicle.vehicleItems.first.deposit) %}
<span class="card__car__price__old">{{ item.vehicle.fullPrice|price }} грн</span>
{% endif %}
</div>
</div>
<div class="add__comparison__like__box">
<button class="comparison__like add__comparison{% if item.comparedId is not null %} active{% endif %}" comparedId="{{ item.comparedId }}" @click="blockTransition" onclick="app.Compare.toggleCompare({{ item.vehicle.vehicleItemId }})"></button>
<button class="comparison__like add__like{% if item.featuredId is not null %} active{% endif %}" featuredId="{{ item.featuredId }}" @click="blockTransition" onclick="app.Favorit.toggleFavorite('vehicle', {vehicleItemId: '{{ item.vehicle.vehicleItemId }}', locale: '{{ app.request.locale }}', link: '{{ app.request.schemeAndHttpHost }}{{ path('portal_new_car',{dealer: item.vehicle.dealer.url,url:item.vehicle.url, variation: item.vehicle.vehicleItemId }) }}'})"></button>
</div>
<div class="location__box">
<img src="{{ asset('/bundles/portal/img/icon-svg/location-marker.svg') }}" alt="">
{# <span class="location__text">Тойота Центр Одеса ВІДІ Пальміра</span> #}
<span class="location__text">{{ item.vehicle.dealer.name }}</span>
</div>
<div class="card__car__learn__more__box" :class="{ hideme: isActiveInfo == '{{ item.vehicle.vehicleItemId }}' }">
<a class="car__learn__more__btn"
{% if item.vehicle.isUsed %}
@click="transitionToCarPage('{{ path('portal_used_car',{url:item.vehicle.url}) }}')"
{% else %}
@click="transitionToCarPage('{{ path('portal_new_car', {dealer: item.vehicle.dealer.url, url:item.vehicle.url, variation: item.vehicle.vehicleItemId }) }}')"
{% endif %}>{{ 'catalog.more_detail'|trans({}, 'portal_base') }}</a>
{# {% if item.vehicle.optionsByEquipment(item.vehicle.equipment, app.request.locale, true)|length > 0 %}#}
{# <div class="car__learn__more__info__wrapper">#}
{# {% for id, group in item.vehicle.optionsByEquipment(item.vehicle.equipment, app.request.locale, true) %}#}
{# {% for option in group.options %}#}
{# <div class="car__learn__more">#}
{# <img src="{{ asset('/bundles/portal/img/icon-svg/green-ok.svg') }}" alt="">#}
{# <span class="car__learn__more__text">{{ option }}</span>#}
{# </div>#}
{# {% endfor %}#}
{# {% endfor %}#}
{# </div>#}
{# {% endif %}#}
</div>
<div class="additional__information__box">
{% if item.vehicle.isUsed and item.hasNds %}
<img src="{{ asset('/bundles/portal/img/icon-svg/pdf-icon.svg') }}" alt="">
{% endif %}
{% if item.vehicle.isUsed and vehicle.isSelect %}
<img src="{{ asset('/bundles/portal/img/icon-svg/select-icon.svg') }}" alt="">
{% endif %}
</div>
</div>