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

{% block content %}

  {% 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-headers='{"VR-Ajax": "RePropertiesList"}' hx-trigger="change, submit" hx-target="closest .module-managed-property" 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 %}

  {% block assets %}
    <div class="assetList">
      {% for item in assets %}
        {% 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.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 %}
                </li>
                {% if item.livingSpace > 0 %}
                  <li>
                    <span class="label">Wohnfläche:</span>
                    {{ item.livingSpace|number_format(2, ',', '') }} m²
                  </li>
                {% endif %}
              </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 %}


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