{{ vite_js('src/module/listing-detail/index.js', ['jquery']) }}

{% set previewPics = data.info.previewPictures ?: [] %}

<div id='{{ moduleId }}' class='lofty-listing-detail-page lofty-reset-style'>

    <div class="lofty-listing-detail">
        <div id="lofty-listing-pictures" class="swiper">
            <div class="swiper-wrapper">
                {% if previewPics | length > 0 %}
                    {% for img in previewPics %}
                        <div class="swiper-slide">
                            <img src="{{ img }}" alt="">
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="swiper-slide">
                        <img src="{{ static('public/img/empty-listing.png') }}" alt="">
                    </div>
                {% endif %}
            </div>           
        </div>

        <div class="lofty-detail-btns"></div>

        <div class="lofty-tour-btns">
            {% if data.info.tourLink %}
            <div class="lofty-btn-item">
                <a href="{{ data.info.tourLink }}" target="_blank">
                    <i class="lofty_iconfont lofty-icon-Virtual"></i>
                    <span>Virtual Tour</span>
                </a>
            </div>
            {% endif %}
            {% if data.info.chimeVideoLink %}
            <div class="lofty-btn-item">
                <a href="{{ data.info.chimeVideoLink }}" target="_blank">
                    <i class="lofty_iconfont lofty-icon-video"></i>
                    <span>Video Tour</span>
                </a>
            </div>
            {% endif %}
        </div>
    </div>

    {% include 'module/md_listing_detail/detail_info.html' with {'info': data.info, 'collectStatus': data.collectStatus, 'copyRight': data.replaceAfterCopyRight} %}

    {% if data.info.mlsOrg.listingProviderDirection == 2 %}
        <div class="lofty-detail-info mt-40">
            {% if data.info.mlsOrg.copyright is not empty %}
                <p class="lofty-mls-copyright" style="display: none">{{ data.info.mlsOrg.copyright | raw }}</p>
            {% endif %}
            <p class="lofty-mls-info" style="display: none">{{ data.info.mlsInfo | raw }}</p>
        </div>
    {% endif %}

    <div id="lofty-detail-map-container" class="lofty-detail-info"></div>

    <div id="lofty-detail-similar-listings" class="lofty-detail-info"></div>

    <div class="lofty-detail-info">
        {% include 'module/md_listing_detail/detail_mls.html' %}
    </div>

    <input id='lofty-data' value='{{ json_data }}' type='hidden'/>
</div>

{{ render_scripts()}}