{%- extends 'park/base.html.twig' -%}
{% block importmap %}{{ importmap(['app','real_estate-list']) }}{% endblock %}
{%- set pageTitle -%}<b>Annonces Immobilières</b><br/><small class="fw-normal">{{ park.prefixedName }}</small>{% endset %}
{%- block body -%}
    <section class="realEstateList">
        <div class="container">
            <div class="realEstateList-header mb-3 mb-lg-5 d-none d-md-block">
                <h1 class="realEstateList-header-title text-center h2">{{ park.name }} {{ ux_icon('bi:chevron-right', {class:'text-tertiary', height:'18',width:'18', 'aria-label': 'Business Profile'}) }} <b>Annonces Immobilières</b></h1>
            </div>
            <div class="realEstateList-results">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="realEstateList-results-filter sticky-lg-top mb-4">
                            <a class="realEstateList-results-filter-title" data-bs-toggle="collapse" href="#collapseFilter" role="button"
                               aria-expanded="{{ realEstateListFilterForm ? 'true':'false' }}" aria-controls="collapseFilter">
                                Filtres
                                {{ ux_icon('bi:chevron-down', {class:'text-white', height:'16',width:'16', 'aria-label': 'Business Profile'}) }}
                            </a>
                            <div class="collapse d-lg-block" id="collapseFilter">
                                {{ include('park/components/realEstateListFilterForm.default.html.twig',{realEstateListFilterForm:realEstateListFilterForm}) }}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="row">
                            {% for realEstate in realEstates %}
                                <div class="col-12 col-md-6 col-lg-4 mb-3 mb-lg-4">
                                    <div class="realEstateList-results-item position-relative">
                                        <div class="row gx-3 align-items-center">
                                            <div class="col-4 col-md-12">
                                                <figure class="realEstateList-results-item-figure">
                                                    {% if realEstate.image %}
                                                        <img src="{{ asset(realEstate.image.name)|imagine_filter('all') }}" class="realEstateList-results-item-figure-img img-fluid" alt="">
                                                    {% endif %}
                                                </figure>
                                            </div>
                                            <div class="col-8 col-md-12">
                                                <div class="realEstateList-results-item-body">
                                                    <h3 class="realEstateList-results-item-body-title h5 mb-2">{{ realEstate.title }}</h3>
                                                    <div class="realEstateList-results-item-body-category fw-bold"><span class="">{{ realEstate.roomCount }} pièces</span><span class="mx-2">•</span><span class="">{{ realEstate.area }} m²</span></div>
                                                    <div class="realEstateList-results-item-body-price my-2 text-end">{{ (realEstate.price??0)|format_currency('EUR') }}</div>
                                                    <a href="{{ realEstate.link is not empty ? realEstate.link : path('park_real_estate_show', {'realEstate': realEstate.uuidStr}) }}" target="_blank" class="stretched-link">En savoir +</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{%- endblock -%}