{% extends '@DcSite/Opel/base.html.twig' %}
{% block seo %}
<title>{{ 'seo.car_in_stock.title'|trans({}, 'dc_opel') }}</title>
<meta name="description" content="{{ 'seo.car_in_stock.desc'|trans({}, 'dc_opel') }}"/>
{% endblock seo %}
{% block ogtagDynamic %}
<meta property="og:title" content="{{ 'seo.car_in_stock.title'|trans({}, 'dc_opel') }}"/>
<meta property="og:description" content="{{ 'seo.car_in_stock.desc'|trans({}, 'dc_opel') }}"/>
{% endblock ogtagDynamic %}
{% block css %}
{% endblock %}
{% block content %}
<section class="breadcrumbs__new">
<div class="container">
<ol class="global_breadcrumbs__new" itemscope itemtype="https://schema.org/BreadcrumbList">
<li class="marker__none" itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="{{ path('opel_homepage') }}">
<span class="breadcrumbs__link" itemprop="name">opel</span></a>
<meta itemprop="position" content="1"/>
</li>
<div class="arrow-bcs"> ❯ </div>
<li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span style="color: #837F7F;" class="breadcrumbs__link" itemprop="name">{{ 'pages.car_in_stock.breadcrumb_title'|trans({}, 'dc_opel') }}</span>
<meta itemprop="position" content="2"/>
</li>
</ol>
</div>
</section>
<section class="modules__used-cars elements__style-form-el pt-0" id="used-car-catalog">
<header class="page-header">
<div class="container">
<h1 class="section-title text-left mb-2">{{ 'pages.car_in_stock.title'|trans({}, 'dc_opel') }}</h1>
{% include '@DcSite/Modules/car-instock/index.html.twig' with {
'paths': {
'leasingPage': path('opel_finance_leasing'),
'creditPage': path('opel_finance_credit'),
'tradeInPage': path('opel_finance_trade_in'),
'testDrivePage': path('opel_service_consultation')
}
} %}
<div class="page-header__descr">
{{ 'pages.car_in_stock.title_desc'|trans({}, 'dc_opel')|raw }}
</div>
</div>
</header>
<div class="modules__used-cars-filter" v-if="step === 2">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select class="form-control" v-model="selected.model">
<option :value="0">Модель</option>
<option :value="model.id" v-for="model in models" v-html="model.name"></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="form-control" v-model="selected.equipment" :disabled="!selected.model">
<option :value="0">{{ 'car_in_stock_module.complectation'|trans({}, 'dc_base') }}</option>
<option v-for="equipment in equipments[selected.model]" :value="equipment.id"
v-html="equipment.name"></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="form-control" v-model="selected.fuelType" :disabled="!selected.model">
<option :value="0">{{ 'car_in_stock_module.fuel_type'|trans({}, 'dc_base') }}</option>
<option v-for="fuel in fuelTypes[selected.model]" :value="fuel.id"
v-html="fuel.name"></option>
</select>
</div>
</div>
<div class="col-md-3" v-if="colors[selected.model]">
<div class="form-group">
<select class="form-control" v-model="selected.color" :disabled="!selected.model">
<option :value="0">{{ 'car_in_stock_module.color'|trans({}, 'dc_base') }}</option>
<option v-for="color in colors[selected.model]" :value="color" v-html="color"></option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 d-flex justify-content-between">
<button class="modules__used-cars-filter-btn filter-btn-reset d-flex align-items-center"
@click="reset">
{{ 'car_in_stock_module.reset_all'|trans({}, 'dc_base') }} <span class="close-icon"></span>
</button>
</div>
</div>
</div>
</div>
<div class="container" v-if="display__twig">
{% if vehicles.vehicles is defined %}
<div class="row car-list mb-0">
{% for vehicle in vehicles.vehicles %}
<div class="col-12 col-md-4 col-sm-6">
<div class="car-list__item">
<a href="{{ vehicle.url }}" class="car-list__photo">
<img src="{{ vehicle.image }}" alt="{{ vehicle.name }}">
</a>
<div class="car-list__content">
<div class="car__list__status__wrapper">
<div class="car__list__status">
<div class="car-list__title">
<a href="{{ vehicle.url }}">Opel <span>{{ vehicle.name }}</span></a>
</div>
<div class="car-list__compelctation">{{ vehicle.equipment.title }}</div>
</div>
{% if vehicle.hasStorage and not vehicle.hasReserved %}
<div class="modules__filter-car-instock">
{{ 'car_in_stock_module.in_stock'|trans({}, 'dc_base') }}
</div>
{% endif %}
</div>
<ul class="car-list-options --price --b-bottom">
{% if vehicle.hasReserved %}
<li class="first-price">{{ 'car_in_stock_module.reserved'|trans({}, 'dc_base') }}</li>
{% elseif vehicle.inDelivery and not vehicle.hasStorage %}
<li class="first-price">{{ 'car_in_stock_module.in_delivery'|trans({}, 'dc_base') }}</li>
{% endif %}
{% if not vehicle.hasReserved %}
<li class="car-list-options__item">
<span class="car-list-options__title">{{ 'car.price.title'|trans({}, 'dc_morris') }}</span>
<span class="car-list-options__val">
<span>{{ vehicle.price|price }} грн</span>
{% if vehicle.fullPrice > vehicle.price %}
<div class="second-price">{{ vehicle.fullPrice|price }} грн</div>
{% endif %}
</span>
</li>
{% endif %}
</ul>
<ul class="car-list-options">
<li class="car-list-options__item">
<span class="car-list-options__title">{{ 'car.options.power'|trans({}, 'dc_morris') }}</span>
<span class="car-list-options__val">{{ vehicle.power }} к.с.
</span>
</li>
<li class="car-list-options__item">
<span class="car-list-options__title">{{ 'car.options.fuel_type'|trans({}, 'dc_morris') }}</span>
<span class="car-list-options__val">{{ vehicle.fuelType.name }}
</span>
</li>
<li class="car-list-options__item">
<span class="car-list-options__title">{{ 'car.options.year'|trans({}, 'dc_morris') }}</span>
<span class="car-list-options__val">{{ vehicle.year }}</span>
</li>
</ul>
<a href="{{ vehicle.url }}"
class="btn btn-outline-primary --size-md w-100 car-list__more">{{ 'pages.buttons.details'|trans({}, 'dc_base') }}</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
<div class="container" v-if="display__vue">
<div class="row car-list mb-0">
<div class="col-12 col-md-4 col-sm-6" v-if="filter(vehicle)" v-for="vehicle in vehicles">
<div class="car-list__item">
<a :href="vehicle.url" class="car-list__photo">
<img :src="vehicle.image" :alt="vehicle.name">
</a>
<div class="car-list__content">
<div class="car__list__status__wrapper">
<div class="car__list__status">
<div class="car-list__title">
<a :href="vehicle.url">Opel <span v-html="vehicle.name"></span></a>
</div>
<div class="car-list__compelctation" v-html="vehicle.equipment.title"></div>
</div>
<div v-if="vehicle.hasStorage && !vehicle.hasReserved"
class="modules__filter-car-instock">
{{ 'car_in_stock_module.in_stock'|trans({}, 'dc_base') }}
</div>
</div>
<ul class="car-list-options --price --b-bottom">
<li v-if="vehicle.hasReserved"
class="first-price">{{ 'car_in_stock_module.reserved'|trans({}, 'dc_base') }}</li>
<li v-else-if="vehicle.inDelivery && !vehicle.hasStorage"
class="first-price">{{ 'car_in_stock_module.in_delivery'|trans({}, 'dc_base') }}</li>
<li v-if="!vehicle.hasReserved" class="car-list-options__item">
<span class="car-list-options__title">{{ 'car.price.title'|trans({}, 'dc_morris') }}</span>
<span class="car-list-options__val">
<span v-html="vehicle.price.toLocaleString() + ' грн'"></span>
<div class="second-price" v-if="vehicle.fullPrice > vehicle.price"
v-html="vehicle.fullPrice.toLocaleString() + ' грн'"></div>
</span>
</li>
</ul>
<ul class="car-list-options">
<li class="car-list-options__item">
<span class="car-list-options__title">{{ 'car.options.transmission_type'|trans({}, 'dc_morris') }}<</span>
<span class="car-list-options__val" v-html="vehicle.transmissionType.name">
</span>
</li>
<li class="car-list-options__item">
<span class="car-list-options__title">{{ 'car.options.power'|trans({}, 'dc_morris') }}</span>
<span class="car-list-options__val" v-html="vehicle.power + ' к.с.'">
</span>
</li>
<li class="car-list-options__item">
<span class="car-list-options__title">{{ 'car.options.fuel_type'|trans({}, 'dc_morris') }}</span>
<span class="car-list-options__val" v-html="vehicle.fuelType.name">
</span>
</li>
<li class="car-list-options__item">
<span class="car-list-options__title">{{ 'car.options.year'|trans({}, 'dc_morris') }}</span>
<span class="car-list-options__val" v-html="vehicle.year"></span>
</li>
</ul>
<a :href="vehicle.url"
class="btn btn-outline-primary --size-md w-100 car-list__more">{{ 'pages.buttons.details'|trans({}, 'dc_base') }}</a>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block pageJS %}
<script>
app.onCustomEvent('appInit', function () {
app.loadCss('{{ asset('bundles/dcsite/css/modules/used-cars/used-cars.css') }}');
app.loadJs('{{ asset('bundles/dcsite/js/modules/car-in-stock.js') }}', function () {
usedCarsCatalog({
initUrl: '{{ path('base_car_in_stock_init_catalog') }}',
withoutFirstStep: true,
});
});
});
</script>
{% endblock %}