{% set bs5 = true %} 
{% extends '@Portal/template.html.twig' %} 
{% set routePrefix = app.request.get('credit') ? 'portal_finance_credit_' : 'portal_new_' %} 
 
{% block content %} 
    {% if hasCredit %} 
        {% include '@Portal/Catalog/catalog-credit.html.twig' %} 
    {% else %} 
        {% include '@Portal/Catalog/catalog-main.html.twig' %} 
    {% endif %} 
 
    {#    Модальне вікно банера     #} 
    <div class="modal fade modal__step__custom" id="order-car" tabindex="-1" role="dialog" aria-labelledby="orderCarLabel" aria-hidden="true"> 
        <div class="modal-dialog modal__step__custom__dialog modal-dialog-centered" role="document"> 
            <div class="modal-content modal__step__custom__content modal__step__custom-btn"> 
                <div class="modal-header modal__step__custom__header"> 
                    <p class="modal-title modal__step__custom__title" id="orderCarLabel">{{ 'card_car.modal.we_are_happy'|trans({}, 'portal_base') }}</p> 
                    <button type="button" class="close modal__step__custom__close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"> 
                        <span aria-hidden="true">×</span> 
                    </button> 
                </div> 
                {{ form_start(OrderCallForm, {attr: {class: 'forms-sm lead-form pop-up', 'data-parent': 'order-car', 'data-thank-popup': 'show', action: path( 'portal_callback_form' )} }) }} 
                <div class="modal-body modal__step__custom__body"> 
                    <p class="modal__step__custom__text">{{ 'card_car.modal.contact_phone'|trans({}, 'portal_base') }}</p> 
                    <div class="modal__step__custom__input mb-3"> 
                        {{ form_row(OrderCallForm.name) }} 
                    </div> 
                    <div class="modal__step__custom__input mb-5"> 
                        {{ form_row(OrderCallForm.phone) }} 
                    </div> 
                    <div class="col-md-12"> 
                        <div class="form-group checkbox style-b js-form-privacy"> 
                            <label class="checkboxes__item-privacy"> 
                                <input type="checkbox" name="{{ OrderCallForm.privacy.vars.full_name }}" value="{{ OrderCallForm.privacy.vars.value }}" id="{{ OrderCallForm.privacy.vars.id }}"/> 
                                <div id="check_privacy" class="checkbox__checkmark form-control"></div> 
                                <div class="checkbox__body">{{ 'multi_consultation.step_3.confirm'|trans({}, 'dc_base') }} <a href="{{ privacyUrl }}" target="_blank">{{ 'modal_online_service.learn_about_deal'|trans({}, 'portal_base') }}</a></div> 
                            </label> 
                        </div> 
                    </div> 
                </div> 
                <div class="d-none"> 
                    {{ form_rest(OrderCallForm) }} 
                </div> 
                <div class="modal-footer modal__step__custom__footer mt-0"> 
                    <button type="submit" class="modal__step__custom__btn">{{ 'card_car.modal.waiting_for_call'|trans({}, 'portal_base') }}</button> 
                </div> 
                {{ form_end(OrderCallForm) }} 
            </div> 
        </div> 
    </div> 
    {#    Модальне вікно банера     #} 
 
{% endblock %} 
 
{% block script %} 
    <script src="/dist/{{ MODE }}/portal/js/portalCarCatalog.js?{{ VERSION }}"></script> 
    <script type="text/javascript"> 
        $(() => { 
            window.portal.portalCarCatalog.initCatalogFilters({ 
                initUrl: '{{ path('portal_new_catalog_init_filters') }}', 
                buildTypeUrl: '{{ path('portal_new_catalog_build_url') }}', 
                buildUrl: '{{ path('portal_new_catalog_search_build_url') }}', 
                getDealersFromFilter: '{{ path('portal_new_catalog_get_dealers_by_filter') }}', 
                getDealersFromSelectedFilter: '{{ path('portal_new_catalog_get_dealers_by_selected_filter') }}', 
                carUrl: '{{ path(routePrefix ~ 'catalog', {state: state, type: type}) }}', 
                params: {{ baseParams|json_encode|raw }}, 
                searchParams: {{ searchParams|json_encode|raw }}, 
                searchFilters: {{ filters|json_encode|raw }}, 
                count: '{{ count }}', 
                seoLinks: {{ seoLinks|json_encode|raw }} 
            }); 
 
            {% for item in catalogNav %} 
            {% if item.brand is defined %} 
            // brand 
            new Swiper(".selection__catalog__car-slider", { 
                slidesPerView: 7, 
                allowTouchMove: false, 
                navigation: { 
                    nextEl: ".swiper-button-next", 
                    prevEl: ".swiper-button-prev", 
                }, 
                breakpoints: { 
                    1400: { 
                        slidesPerView: 7, 
                        loop: true, 
                        allowTouchMove: true, 
 
                    }, 
                    1200: { 
                        slidesPerView: 6, 
                        loop: true, 
                        allowTouchMove: true, 
 
                    }, 
                    991: { 
                        slidesPerView: 5, 
                        loop: true, 
                        allowTouchMove: true, 
 
                    }, 
                    768: { 
                        init: false, 
                    }, 
                }, 
            }); 
 
            {% elseif item.model is defined %} 
            // model 
            new Swiper(".selection__catalog__car-slider", { 
                slidesPerView: 5, 
                allowTouchMove: false, 
                navigation: { 
                    nextEl: ".swiper-button-next", 
                    prevEl: ".swiper-button-prev", 
                }, 
                breakpoints: { 
                    1400: { 
                        slidesPerView: 7, 
                        loop: true, 
                        allowTouchMove: true, 
 
                    }, 
                    1200: { 
                        slidesPerView: 6, 
                        loop: true, 
                        allowTouchMove: true, 
 
                    }, 
                    991: { 
                        slidesPerView: 5, 
                        loop: true, 
                        allowTouchMove: true, 
 
                    }, 
                    768: { 
                        init: false, 
                    }, 
                }, 
            }); 
 
            {% else %} 
            // bodyType 
            new Swiper(".selection__catalog__car-slider", { 
                slidesPerView: 8, 
                allowTouchMove: false, 
                navigation: { 
                    nextEl: ".swiper-button-next", 
                    prevEl: ".swiper-button-prev", 
                }, 
                breakpoints: { 
                    1400: { 
                        slidesPerView: 7, 
                        loop: true, 
                        allowTouchMove: true, 
 
                    }, 
                    1200: { 
                        slidesPerView: 6, 
                        loop: true, 
                        allowTouchMove: true, 
 
                    }, 
                    991: { 
                        slidesPerView: 5, 
                        loop: true, 
                        allowTouchMove: true, 
 
                    }, 
                    768: { 
                        init: false, 
                    }, 
                }, 
            }); 
            {% endif %} 
            {% endfor %} 
        }); 
    </script> 
    {% block schema_catalog_product %} 
    {% endblock %} 
{% endblock %}