{% if vehicleColor.colors is not empty %}
<section class="car-colors-section" id="select-vehicle-color">
<div class="container" id="vehicleColors" v-if="showBlock">
<div class="car-section-title">{{ 'car.color.select'|trans({}, 'dc_toyota_od') }}</div>
<div class="car-colors-widget">
<div v-if="curColor"
:class="{'--active': isSelect}"
class="car-colors-widget__car"
>
<img loading="lazy" :src="curColor.image" :alt="curColor.title">
</div>
<div class="car-colors-widget__content">
<div class="car-colors-widget__title">
<span v-if="curColor && isSelect"
v-html="curColor.title"
></span>
{# <span v-else v-html="vehicleType.title">#}
{# {{ 'car.color.your-color'|trans({}, 'dc_toyota_od') }}#}
{# </span>#}
<span v-if="curColor && isSelect && curColor.price > 0"
class="color-price main-color"
v-html="'+ ' + curColor.price.toLocaleString() + ' грн'"
></span>
</div>
<div class="car-colors-widget__colors">
<label
v-for="color in colors"
class="car-colors-widget__color-label"
@click="setColor(color)"
>
<input type="radio" name="carColor" :value="color.title"
class="car-colors-widget__color-input">
<div class="car-colors-widget__color-preview">
<img loading="lazy" :src="color.preview">
</div>
</label>
</div>
</div>
</div>
</div>
</section>
{% endif %}