<section class="car-tech-section" id="vehicleCharacteristic">
<div class="container">
<h1 class="car-tech-section__title">
{# {% if model.hasHybrid %}#}
{# {{ 'pages.car_card.prices_for_model_hybrid'|trans({ "%model%": model.fullName }, 'dc_base') }}#}
{# {% else %}#}
{# {{ 'pages.car_card.prices_for_model'|trans({ "%model%": model.fullName }, 'dc_base') }}#}
{# {% endif %}#}
{{ 'car_page.tech'|trans({}, 'dc_base') }}
{{ model.fullName }}
{% if model.hasHybrid %}
{{ 'base.car_cat.hubrid'|trans({}, 'dc_toyota') }}
{% endif %}
</h1>
<div class="car-table">
<div class="car-table__header sticky js-scroll-sync js-touch-scroll" data-scroll-sync="tech-table">
<div class="car-table__row">
<div class="car-table__col-left --th">
{{ 'car_page.compare.engine'|trans({}, 'dc_base') }}
(<span v-html="engines.length"></span>)
</div>
<div v-for="engine in engines" class="car-table__col --th" v-html="engine.title"></div>
</div>
</div>
<template v-for="group, gId, idx in tech">
<div v-if="groups[gId]" class="car-table__body-title" :class="{'--opened': idx === 0 }" v-html="groups[gId]"></div>
<div v-else class="car-table__body-title" :class="{'--opened': idx === 0 }">{{ 'сharacteristic.general'|trans({}, 'dc_base') }}</div>
<div class="car-table__body js-scroll-sync js-touch-scroll" :class="{'--opened': idx === 0 }" data-scroll-sync="tech-table">
<div v-for="characteristic in group" class="car-table__row">
<div class="car-table__col-left">
<p class="car-table__text-characteristic" v-html="characteristic.title"></p>
</div>
<div v-for="engine in engines" class="car-table__col">
<span class="car-table__text" v-html="characteristic.items[engine.id]"></span>
</div>
</div>
</div>
</template>
</div>
</div>
</section>