{% extends '@Contao/frontend_module/_base.html.twig' %}
{% use "@Contao/component/_list.html.twig" %}
{% use "@Contao/component/_figure.html.twig" %}

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

{%- macro listEntry(label, value, options = {}) -%}
    {%- set class = options.class|default({}) -%}
    {%- set prepend = options.prepend|default({}) %}
    {% set append = options.append|default({}) -%}
    {% set strong = options.strong is defined and options.strong ? true : false %}
    {% apply spaceless %}
        {% if label and value %}
            <li class="{% if class %}{{- class -}}{% endif %}{{- strong ? ' strong' : '' -}}">
                <span class="label">{{- label -}}</span>
                <span class="value">{% if prepend %}{{ prepend }}{% endif %}{{- value -}}{% if append %}{{ append }}{% endif %}</span>
            </li>
        {% endif %}
    {% endapply %}
{%- endmacro -%}
{%- macro backgroundWrapper_open(classes = '') -%}
    <div class="{{ classes ? classes ~ ' ' : '' }}content-background-wrapper">
        <div class="content-background-wrapper-bg">
        </div>
        <div class="content-background-wrapper-fg">
            <div class="content-grid">
                <div class="fragments">
{%- endmacro -%}
{%- macro backgroundWrapper_close() -%}
                </div>
            </div>
        </div>
    </div>
{%- endmacro -%}


{% block content %}
    <div class="re_asset_expose">

        {{ _self.backgroundWrapper_open('-padding-medium') }}
        <p class="overviewLink"><a class="btn btn-outline-primary" href="{{ item.listUrl }}">Zurück zur Übersicht</a></p>
        <h1>{{ item.title }}{% if item.city %} in {% if item.hasProperty %}{{ item.property.city }}{% else %}{{ item.city }}{% endif %}{% endif %}</h1>
        {{ _self.backgroundWrapper_close }}

        {{ _self.backgroundWrapper_open('-alt-color-1 -width-small -padding-medium') }}
        <h3>Informationen</h3>
        <div class="expose-facts">
            <ul class="expose-facts-costs">
                {% if item.coldRent > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.coldRent.0'|trans({}, 'contao_default'),item.coldRent|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.rent > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.rent.0'|trans({}, 'contao_default'),item.rent|number_format(2, ',', ''),{ append: ' €'}) }}{% endif %}
                {% set total = item.coldRent + item.rent + item.advanceOperatingCosts %}
                {{ _self.listEntry('tl_vr_real_estate_assets.total'|trans({}, 'contao_default'),total|number_format(2, ',', ''),{ class: 'mt-default', strong: true, append: ' €'}) }}
                {% if item.deposit is not empty %}{{ _self.listEntry('tl_vr_real_estate_assets.deposit.0'|trans({}, 'contao_default'),item.deposit|number_format(2, ',', ''),{ class: 'mt-default', append: ' €'}) }}{% endif %}
            </ul>
            <ul class="expose-facts-features">
                {% if item.livingSpace > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.livingSpace.0'|trans({}, 'contao_default'),item.livingSpace|number_format(2, ',', ''),{ append: ' m²'}) }}{% endif %}
                {% if item.numberOfRooms > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.numberOfRooms.0'|trans({}, 'contao_default'),item.numberOfRooms) }}{% endif %}
                {% if item.floor > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.floor.0'|trans({}, 'contao_default'),item.floor) }}{% endif %}
                {% if item.constructionYear is not empty %}{{ _self.listEntry('tl_vr_real_estate_assets.constructionYear.0'|trans({}, 'contao_default'),item.constructionYear) }}{% endif %}
                {% 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 %}
                {% if item.parking is not empty %}
                <li>
                    <span class="label">{{- 'tl_vr_real_estate_assets.parking.0'|trans({}, 'contao_default') -}}</span>
                    <span class="value">
                        {% for spot in item.parking -%}
                        {%- if loop.index > 1 -%}, {% endif -%}{{ ('REF.re_parking.' ~ spot)|trans({}, 'contao_default') }}
                        {%- endfor %}
                    </span>
                </li>
                {% endif %}
                {% for feature in item.features %}
                    {% set featureTrans = 'REF.re_features.' ~ feature %}
                    {{ _self.listEntry(featureTrans|trans({}, 'contao_default'),'Ja') }}
                {% endfor %}
                {% if item.entitlementCertificate == '1' %}{{ _self.listEntry('MSC.re_entitlementCertificate'|trans({}, 'contao_default'),'Ja',{ class: 'mt-default', strong: true }) }}{% endif %}
            </ul>
        </div>
        {{ _self.backgroundWrapper_close }}

        {{ _self.backgroundWrapper_open('-padding-medium') }}
        <div class="expose-description">
            <div class="re_asset_card">
                {% if item.galleryFigures[0] %}
                    {{- studio.figure(item.galleryFigures[0], { 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>
                    </ul>
                    {% if item.pdfUrl is not empty %}
                        <p class="pdf-link"><a href="{{ item.pdfUrl }}" title="{{ 'MSC.re_pdfExpose'|trans({}, 'contao_default') }}" target="_blank">PDF-Expose</a></p>
                    {% endif %}
                </div>
            </div>
        {% if item.description %}
            <div class="description">{{ item.description|raw }}</div>
        {% endif %}
        </div>

        <div class="expose-gallery">
        {% with {items: item.galleryFigures} %}{{ block('list_component') }}{% endwith %}
        </div>
        {{ _self.backgroundWrapper_close }}

        {{ _self.backgroundWrapper_open('-alt-color-1 -padding-medium') }}
        <h3>Grundriß</h3>
        <div class="expose-floorplans">
            {% with {items: item.floorPlansFigures} %}{{ block('list_component') }}{% endwith %}
        </div>

        {{ _self.backgroundWrapper_close }}

        {% if item.hasProperty %}
            {{ _self.backgroundWrapper_open('-padding-medium') }}
            <h3>Gebäudeinformationen</h3>
            <div class="property-description">
                {% if item.property.description %}
                    <div class="description">{{ item.property.description|raw }}</div>
                {% endif %}

                <div class="property-media">
                    {% block property_media %}
                        {% if item.property.galleryFigures[0] %}
                            {{- studio.figure(item.property.galleryFigures[0], { attr: { class: ('image_container media') }}) -}}
                        {% endif %}
                    {% endblock %}
                </div>
            </div>
            {{ _self.backgroundWrapper_close }}
        {% endif %}

        {% if item.hasProperty %}
            {{ _self.backgroundWrapper_open('-padding -alt-color-1') }}
        {% else %}
            {{ _self.backgroundWrapper_open('-padding') }}
        {% endif %}
        <p class="overviewLink"><a class="btn btn-outline-primary" href="{{ item.listUrl }}">Zurück zur Übersicht</a></p>
        {{ _self.backgroundWrapper_close }}


    </div>
{% endblock %}

{% block list_item %}
    {% with {figure: item} %}{{ block('figure_component') }}{% endwith %}
{% endblock %}
