{%- extends 'park/base.html.twig' -%}
{% block importmap %}{{ importmap(['app','mobility']) }}{% endblock %}
{%- set pageTitle -%}<b>La Mobilité</b><br/><small class="fw-normal">autour {{ park.prefixedName }}</small>{% endset %}
{%- block body -%}
    <section class="mobility">
        <div class="container">
            <div class="mobility-header mb-4 mb-lg-5 d-none d-md-block">
                <h1 class="mobility-header-title text-center h2">{{ park.name }} {{ ux_icon('bi:chevron-right', {class:'text-tertiary', height:'18',width:'18'}) }} <b>Informations pratiques</b></h1>
            </div>
            <div class="row">
                {% for mobility in park.mobilites %}
                    <div class="col-sm-6 col-lg-4 mb-3 mb-sm-4">
                        <div class="mobility-item">
                            <div class="row gx-3 align-items-center">
                                {% if mobility.image and mobility.image.name %}
                                    <div class="col-3 col-sm-3 col-lg-3 col-xl-3 col-xxl-3">
                                        <figure class="mobility-item-figure ratio ratio-1x1">
                                            <img src="{{ asset(mobility.image.name)|imagine_filter('all') }}" class="mobility-item-figure-img cover" alt="{{ mobility.title }}">
                                        </figure>
                                    </div>
                                {% endif %}
                                <div class="{{ mobility.image ? 'col-9 col-sm-9 col-lg-9 col-xl-9 col-xxl-9':'col-12' }}">
                                    <div class="postList-item-body">
                                        <h2 class="mobility-item-body-title h5 mb-0">{{ mobility.title }}</h2>
                                    </div>
                                </div>
                                {% if mobility.description is not empty %}
                                    <div class="col-12">
                                        <hr>
                                        <div class="mobility-item-body-content">{{ mobility.description|raw }}</div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
{%- endblock -%}