{% extends '@Contao/frontend_module/_base.html.twig' %}
{% import "@ContaoCore/Image/Studio/_macros.html.twig" as studio %}

{% block content %}
    {% if groups is not defined or groups is empty %}
        <p class="alert alert-secondary">{{ 'MSC.re_empty'|trans({}, 'contao_default') }}</p>
    {% else %}
        {% block filter %}
            <div class="-padding content-background-wrapper">
                <div class="content-background-wrapper-bg">
                </div>

                <div class="content-background-wrapper-fg">
                    <div class="content-grid">
                        <div class="fragments">
                            <h5>{{ 'MSC.re_filter'|trans({}, 'contao_default') }}</h5>
                            <form class="assets-list-filter" hx-get="{{ pageUrl is defined ? pageUrl : '' }}" hx-push-url="false" hx-swap="outerHTML" hx-headers='{"VR-Ajax": "ReAssetsList"}' hx-trigger="change, submit" hx-target="closest .module-vr-re-assets-list" hx-indicator="body" class="filter">
                                {% if filterOptions is defined and filterOptions is iterable %}
                                    {% for key, options in filterOptions %}
                                        <div class="filter-wrapper">
                                            <select name="filter[{{ key }}]"{% if filter[key] is defined and filter[key] is not empty %} class="active"{% endif %}>
                                                <option value="">{{ ('REF.re_filter.' ~ key)|trans({}, 'contao_default') }}</option>
                                                {% for value, label in options %}
                                                    <option value="{{ value }}"{% if filter[key] is defined and filter[key] == value %} selected{% endif %}>{{ label }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    {% endfor %}
                                {% endif %}
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        {% endblock %}

        <div class="assets-list-wrapper">
            {% for group in groups %}
                {% block group %}
                    {% if data.vr_re_grouped is defined and data.vr_re_grouped == '1' %}
                        <h3>{{ group.label }}</h3>
                    {% endif %}
                    <div class="assetList">
                        {% for item in group.items %}
                            {% block item %}
                                <div class="asset re_asset_card">
                                    {% if item.teaserFigure %}
                                        {{- studio.figure(item.teaserFigure, { attr: { class: ('image_container media') }}) -}}
                                    {% endif %}

                                    <div class="details">
                                        <ul>
                                            <li>
                                                <span class="label">Adresse:</span>
                                                {% if item.hasProperty %}
                                                    {% if item.property.address is not empty %}{{ item.property.address }}<br>{% endif %}
                                                    {% if item.property.postal is not empty and item.property.city is not empty %}{{ item.property.postal }} {{ item.property.city }}<br>{% endif %}
                                                {% else %}
                                                    {% if item.address is not empty %}{{ item.address }}<br>{% endif %}
                                                    {% if item.postal is not empty and item.city is not empty %}{{ item.postal }} {{ item.city }}<br>{% endif %}
                                                {% endif %}
                                            </li>
                                            {% if item.livingSpace > 0 %}
                                                <li>
                                                    <span class="label">Wohnfläche:</span>
                                                    {{ item.livingSpace|number_format(2, ',', '') }} m²
                                                </li>
                                            {% endif %}
                                            <li>
                                                <span class="label">Kaltmiete:</span>
                                                {% if item.coldRent is not empty %}{{ item.coldRent|number_format(2, ',', '') }} €{% endif %}
                                            </li>
                                        </ul>
                                        {% if item.detailsUrl %}
                                            <p class="details-link"><a class="link" href="{{ item.detailsUrl }}">{{ 'MSC.more'|trans({}, 'contao_default') }}</a></p>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endblock %}
                        {% endfor %}
                    </div>
                {% endblock %}
            {% endfor %}
        </div>
    {% endif %}

    {% block overlay %}
        <div class="assets-list-overlay"></div>
    {% endblock %}
{% endblock %}
