{% set priceChange = info.soldPrice != info.price  %}
{% set priceTrend = info.trendUp ? 'up' : 'down' %}

<div class="lofty-detail-info lofty-flex">
    <div class="lofty-detail-info-content">
        {% if info.mlsOrg.listingProviderDirection == 3 %}
            {% if info.mlsOrg.copyright is not empty %}
                <p class="lofty-mls-copyright" style="display: none">{{ info.mlsOrg.copyright | raw }}</p>
            {% endif %}
            <p class="lofty-mls-info" style="display: none">{{ info.mlsInfo | raw }}</p>
        {% endif %}
        <p class="lofty-detail-address">
            <span class="lofty-address-text">
                {{ info.streetAddress }}
                <span class="lofty-city-address">{{ info.cityAddress }}</span>
            </span>
            {% for tag in info.listingTags  %}
                <span class="lofty-status-tag {{ tag.style.className }}">{{ tag.value }}</span>
            {% endfor %}
        </p>
        <p class="lofty-update-time">
            {% if info.updateTimeLong %}
                UPDATED: <span class="lofty-updateTimeLong">{{ (info.updateTimeLong/1000) | date("m/d/Y h:i A") }} </span>
            {% endif %}
            <span class="lofty-house-market-text">{{ info.marketInfo }}</span>
        </p>
        {% if info.mlsOrg.listingProviderDirection == 1 %}
            {% if info.mlsOrg.copyright is not empty %}
                <p class="lofty-mls-copyright" style="display: none">{{ info.mlsOrg.copyright | raw }}</p>
            {% endif %}
            <p class="lofty-mls-info" style="display: none">{{ info.mlsInfo | raw }}</p>
        {% endif %}
        {% if info.soldDate and info.showSoldPrice %}
            <div class="lofty-price-box">
                <p class="lofty-mls-price">{{ info.soldPrice }}</p>
                <p class="lofty-initial-price">
                    <span class="lofty-line-through">{{ info.initialPrice }}</span>
                    {% if priceChange %}
                        <span class="lofty-trend-rate lofty-{{ priceTrend }}-color">
                    {% if priceTrend == 'up'%}
                        <i class="lofty_iconfont lofty-icon-arrow_03_{{ priceTrend }}"></i>
                    {% else %}
                        <i class="lofty_iconfont lofty-icon-arrow_04_{{ priceTrend }}"></i>
                    {% endif %}
                            {{ info.trend }}
                </span>
                    {% endif %}
                </p>
            </div>
        {% else %}
            <p class="lofty-mls-price">{{ info.price }}</p>
        {% endif %}
        <p class="lofty-baseinfo-detail">{{ info.bedInfo | raw }}</p>
        <div class="lofty-line"></div>
        <p class="lofty-info-title">Key Details</p>
        <div class="lofty-key-detail">
            <div class="lofty-detail-wrapper">
                {% for key, value in info.firstGroup.fields  %}
                    <p class="lofty-detail-key-detail-item">
                        <span class="lofty-key">{{ value.name }}</span>
                        <span class="lofty-value">{{ value.value | raw }}</span>
                    </p>
                {% endfor %}
                {% if info.firstGroup.fields|length is odd %}
                    <p class="lofty-detail-key-detail-item">
                        <span class="lofty-key"></span><span class="lofty-value"></span>
                    </p>
                {% endif %}
            </div>
        </div>
        <div class="lofty-other-fields" style="display: none">
            {% for group in info.otherGroup  %}
                <p class="lofty-info-title">{{ group.nameText }}</p>
                <div class="lofty-key-detail">
                    <div class="lofty-detail-wrapper">
                        {% for item in group.fields  %}
                            <p class="lofty-detail-key-detail-item">
                                <span class="lofty-key">{{ item.name }}</span>
                                <span class="lofty-value">{{ item.value | raw}}</span>
                            </p>
                        {% endfor %}
                        {% if group.fields|length is odd %}
                            <p class="lofty-detail-key-detail-item">
                                <span class="lofty-key"></span><span class="lofty-value"></span>
                            </p>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
        <div id="lofty-open-fields" class="lofty-open-other-fields"></div>
        {% if info.detailsDescribe is not empty %}
            <p class="lofty-info-title">Property Description</p>
            <p class="lofty-detail-content">{{ info.detailsDescribe | raw }}</p>
        {% endif %}
    </div>

    <div id="lofty-request-tour"></div>
</div>