{% if related_models is not empty %}


<style>
    #related_brand {
        max-width: 668px;;
    }
    .swiper-slide {
        width: 100%;
        max-width: 668px;
        display: block !important;
        text-align: left;
    }
</style>

{% if not mobile %}
<link rel="stylesheet"href="/styles/lib/swiper-bundle.min.css"/>
<script src="/scripts/lib/swiper-bundle.min.js"></script>
{% endif %}

<section id="related_brand" class="mb-4 select-none">
    {% include "templates/components/common/section_title.twig" with {
        'title'     : 'listino ' ~ related_models.brand_name ~ ' ' ~ now|date('Y'),
        'slider_id' : 'brand-models',
        'controls'  : true
        
    } %}
    {% include "templates/components/common/carousel.twig" with {
        'slider_id'      : 'brand-models',
        'loop'           : related_models.models,
        'slides_per_view': 2,
        'pagination'     : false,
        'brandname'      : related_models.brand_name,
        'showmore'       : false,
        'component'      : 'card-model-small'
    } %}

    <div class="flex items-center mt-6 w-full justify-center">
        <a href="{{related_models.brand_url}}" class="mb-6 font-sans max-w-xs flex items-center justify-center border-none rounded-md text-sm font-semibold transition-colors duration-200 bg-slate-100 hover:bg-slate-200 w-full mx-auto relative py-3 px-6 text-slate-600 hover:text-primary">Vedi tutti i modelli {{related_models.brand_name}}</a>
    </div>
</section>
    
{% endif %}