{%- extends 'park/base.html.twig' -%}
{% block importmap %}{{ importmap(['app','index']) }}{% endblock %}
{%- block body -%}
    <div class="container">
        <section class="businessSearch">
            <h1 class="mb-4 text-center h2">Localiser une entreprise sur <b>{{ park.name }}</b><small class="fs-6 ms-3"><a href="{{ path('park_business_list') }}" class="d-inline-block">Voir&nbsp;tout&nbsp;{{ ux_icon('bi:chevron-right', {class:'text-tertiary', 'aria-label': 'Chevron'}) }}</a></small></h1>
            {{ include('park/components/businessListFilterForm.inline.html.twig',{businessListFilterForm:businessListFilterForm} ) }}
        </section>
        <hr>
        <section>
            <div class="row">
                <div class="col-xxl-9 overflow-hidden">
                    <div class="topNews mb-4 mb-xxl-0">
                        <h2 class="mb-4 text-center h4"><b>À découvrir</b> en ce moment <small class="fs-6 ms-3"><a href="{{ path('park_postlist') }}" class="d-inline-block">Voir&nbsp;tout&nbsp;{{ ux_icon('bi:chevron-right', {class:'text-tertiary', 'aria-label': 'Business Phone'}) }}</a></small></h2>
                        <div class="swiper" {{ stimulus_controller('swiper',{slidesPerView:1}) }} style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff">
                            <div class="swiper-wrapper">
                                {# {% set displayedPosts = [park.displayedPost1,park.displayedPost2,park.displayedPost3]|filter(v=>v) %} #}
                                {% for displayedPost in posts|shuffle %}
                                    <div class="swiper-slide">
                                        <div class="topNews-slider-item ratio ratio-a4" {% if displayedPost.image %}style="background-image:url('{{ asset(displayedPost.image.name)|imagine_filter('all') }}');background-size: cover;background-position: center;"{% endif %}>
                                            <div class="topNews-slider-item-overlay"></div>
                                            <div class="topNews-slider-item-body">
                                                <h3 class="topNews-slider-item-title h5">{{ displayedPost.title }}</h3>
                                                <div class="topNews-slider-item-text d-none d-lg-block mb-2">{{ displayedPost.description|striptags|u.truncate(40,'...') }}</div>
                                                <a href="{{ path('park_post_show', {'post': displayedPost.uuidStr}) }}" class="d-inline-block stretched-link z-1">Voir&nbsp;{{ ux_icon('bi:chevron-right', {class:'text-tertiary', 'aria-label': 'Chevron'}) }}</a>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3">
                    <div class="practicalInfos">
                        <div class="row">
                            <div class="col-lg-6 col-xxl-12">
                                <div class="practicalInfos-btn mb-lg-4">
                                    <div class="row gx-2 align-items-center">
                                        <div class="col-auto">{{ ux_icon('uil:bus', {height:'20',width:'20', 'aria-label': 'Home'}) }}</div>
                                        <div class="col">
                                            <div class="practicalInfos-btn-title">Infos pratiques</div>
                                        </div>
                                        <div class="col-auto">
                                            <a class="stretched-link" href="{{ path('park_mobility') }}">
                                                {{ ux_icon('bi:chevron-right', {class:'text-tertiary', 'aria-label': 'Chevron'}) }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
{%- endblock -%}