{%- macro listEntry(label, value, options = {}) -%}
  {%- set class = options.class|default({}) -%}
  {%- set prepend = options.prepend|default({}) %}
  {% set append = options.append|default({}) -%}
  {% apply spaceless %}
    {% if label and value %}
      <li{% if class %} class="{{- class -}}"{% endif %}>
        <span class="label">{{- label -}}</span>
        <span class="value">{% if prepend %}{{ prepend }}{% endif %}{{- value -}}{% if append %}{{ append }}{% endif %}</span>
      </li>
    {% endif %}
  {% endapply %}
{%- endmacro -%}

<div class="{{ class }} content--element block"{{ cssID }}{% if style is defined and style %} style="{{ style }}"{% endif %}>
  <div class="custom-contao-container">

    {% block content %}
      {% import "@ContaoCore/Image/Studio/_macros.html.twig" as studio %}

      <div class="re_asset_expose">

        <div class="header clearfix">
          <p class="assetNo">{{ 'tl_vr_real_estate_assets.assetNo.0'|trans({}, 'contao_default') }}: <span class="value">{{ item.assetNo }}</span><span class="hint">(Bei Bewerbung bitte angeben)</span></p>
          <h1 class="mb-4">{{- item.title -}}{% if item.city %} in {{- item.city -}}{% endif %}</h1>
          {% if item.address %}
            <p class="subhead">{{ item.address }}{% if item.floor %}, {{ item.floor }}{% endif %}</p>
          {% endif %}
        </div>

        <div class="row mb-5 clearfix">
          <div class="col-md-6">
            {% if item.galleryFigures %}
              <div class="swiper h-100">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                  <!-- Slides -->
                  {% for image in item.galleryFigures %}
                    <div class="swiper-slide">
                      {{- studio.figure(image, { attr: { class: ('image_container swiper-lazy') }}) -}}
                    </div>
                  {% endfor %}
                </div>


                {% if item.galleryFigures|length > 1 %}
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                {% endif %}
              </div>
            {% endif %}
          </div>
          <div class="col-md-6">
            {% if item.floorPlansFigures %}
              <div class="swiper h-100">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                  <!-- Slides -->
                  {% for image in item.floorPlansFigures %}
                    <div class="swiper-slide">
                      {{- studio.figure(image, { attr: { class: ('image_container swiper-lazy') }}) -}}
                    </div>
                  {% endfor %}
                </div>


                {% if item.floorPlansFigures|length > 1 %}
                  <div class="swiper-pagination"></div>
                  <div class="swiper-button-prev"></div>
                  <div class="swiper-button-next"></div>
                {% endif %}
              </div>
            {% endif %}
          </div>
        </div>

        <div class="facts mb-2">

          <div class="row">
            <div class="col-md-6">
              <h3 class="mb-3">{{ 'MSC.re_properties'|trans({}, 'contao_default') }}</h3>
              <div class="p-4 text-primary content--box mb-5" >
                {% apply spaceless %}
                  <ul class="labelList mb-3">
                    {% if item.assetNo %}
                      {{ _self.listEntry('tl_vr_real_estate_assets.assetNo.0'|trans({}, 'contao_default'),item.assetNo) }}
                    {% endif %}
                    {% if item.livingSpace %}
                      {{ _self.listEntry('tl_vr_real_estate_assets.livingSpace.0'|trans({}, 'contao_default'),item.livingSpace|number_format(2, ',', ''),{ append: ' m²'}) }}
                    {% endif %}
                    {{ _self.listEntry('tl_vr_real_estate_assets.numberOfRooms.0'|trans({}, 'contao_default'),item.numberOfRooms) }}
                    {% if item.condition %}
                      {% set condition = 'REF.re_condition.' ~ item.condition %}
                      {{ _self.listEntry('tl_vr_real_estate_assets.condition.0'|trans({}, 'contao_default'),condition|trans({}, 'contao_default')) }}
                    {% endif %}
                    {{ _self.listEntry('tl_vr_real_estate_assets.constructionYear.0'|trans({}, 'contao_default'),item.constructionYear) }}
                  </ul>

                  <ul class="labelList mb-5">
                    {% if item.heatingType %}
                      {% set heating = 'REF.re_heatingType.' ~ item.heatingType %}
                      {{ _self.listEntry('tl_vr_real_estate_assets.heatingType.0'|trans({}, 'contao_default'),heating|trans({}, 'contao_default')) }}
                    {% endif %}
                    {% if item.energyConsumption and item.energyPassType %}
                      {% set passType = 'REF.re_energyPassType.' ~ item.energyPassType %}
                      {{ _self.listEntry('MSC.re_energyConsumption'|trans({}, 'contao_default') ~ ' ' ~ passType|trans({}, 'contao_default'),item.energyConsumption,{ append: ' kWh/(m²a)'}) }}
                    {% endif %}
                  </ul>

                  <h5>{{ 'MSC.re_rent'|trans({}, 'contao_default') }}</h5>
                  <ul class="labelList mb-3">
                    {% if item.coldRent > 0 %}
                      {{ _self.listEntry('tl_vr_real_estate_assets.coldRent.0'|trans({}, 'contao_default'),item.coldRent|number_format(2, ',', ''),{ append: ' €'}) }}
                    {% else %}
                      {{ _self.listEntry('tl_vr_real_estate_assets.rent.0'|trans({}, 'contao_default'),item.rent|number_format(2, ',', ''),{ append: ' €'}) }}
                    {% endif %}
                    {% if item.advanceOperatingCosts > 0 %}
                      {{ _self.listEntry('tl_vr_real_estate_assets.advanceOperatingCosts.0'|trans({}, 'contao_default'),item.advanceOperatingCosts|number_format(2, ',', ''),{ append: ' €'}) }}
                    {% endif %}
                    {% if item.heatingCosts > 0 %}
                      {{ _self.listEntry('tl_vr_real_estate_assets.heatingCosts.0'|trans({}, 'contao_default'),item.heatingCosts|number_format(2, ',', ''),{ append: ' €'}) }}
                    {% endif %}
                  </ul>

                  <ul class="labelList mb-3">
                    {{ _self.listEntry('tl_vr_real_estate_assets.cooperativeShares.0'|trans({}, 'contao_default'),item.cooperativeShares) }}
                    {{ _self.listEntry('tl_vr_real_estate_assets.availability.0'|trans({}, 'contao_default'),item.availableFrom) }}
                  </ul>

                  <ul class="labelList">
                    {{ _self.listEntry('MSC.re_deadline'|trans({}, 'contao_default'),item.deadline) }}
                  </ul>
                {% endapply %}

              </div>
            </div>

            <div class="col-md-6">
              {% if item.description %}
                <h3 class="mb-3">{{ 'MSC.re_description'|trans({}, 'contao_default') }}</h3>
                <div class="p-4 text-primary content--box mb-5">
                  <div class="description">{{ item.description|raw }}</div>
                </div>
              {% endif %}

              {% if item.features %}
                <h3 class="mb-3">{{ 'MSC.re_features'|trans({}, 'contao_default') }}</h3>
                <div class="p-4 text-primary content--box mb-5">
                  <ul class="checkList">
                    {% for feature in item.features %}
                      {% set featureTrans = 'REF.re_features.' ~ feature %}
                      <li>{{ featureTrans|trans({}, 'contao_default') }}</li>
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}

            </div>
          </div>

        </div>

        <div class="row actions">
          <div class="col-md-6 order-last order-md-first">
            <a class="btn btn-outline-primary" href="{{ item.listUrl }}">Zurück zur Übersicht</a>
          </div>
          <div class="col-md-6 text-end order-first order-md-last">
            {% if formURL %}
              <a class="btn btn-secondary" href="{{ formURL }}" target="_blank">Jetzt bewerben</a>
            {% endif %}
            <a class="btn btn-primary" href="{{ item.pdfUrl }}">Exposé downloaden</a>
          </div>
        </div>


      </div>
    {% endblock %}

  </div>
</div>

<script>
  if ($('.swiper:not(.custom)').length) {
    const basicSlider = () => {
      let basicSliders = document.querySelectorAll('.swiper:not(.custom)')
      let prevArrow = document.querySelectorAll('.swiper:not(.custom) > .swiper-button-prev')
      let nextArrow = document.querySelectorAll('.swiper:not(.custom) > .swiper-button-next')
      let pagination = document.querySelectorAll('.swiper:not(.custom) >.swiper-pagination')
      basicSliders.forEach((slider, index) => {
        let prevArrow = slider.querySelector('.swiper-button-prev');
        let nextArrow = slider.querySelector('.swiper-button-next');
        let pagination = slider.querySelector('.swiper-pagination');
        const swiper = new Swiper(slider, {
          direction: 'horizontal',
          loop: true,
          preloadImages: false,
          lazy: true,
          navigation: {
            // the 'index' bit below is just the order of the class in the queryselectorAll array, so the first one would be NextArrow[0] etc
            nextEl: nextArrow,
            prevEl: prevArrow,
          },
          pagination: {
            el: pagination,
            clickable: true
          }
        });
      })
    }
    window.addEventListener('load', basicSlider)
  }
</script>

{{ pdfJs|raw }}
