{% set isProtected = house.isProtected  %}
<div class="lofty-house-item lofty-reset-style" house-id="{{ house.id }}">
    <div class="lofty-house-img">
        <a target="_blank" href="{{ house.detailUrl }}">
            {% if house.previewPicture %}
                <img src="{{ house.previewPicture }}" loading="lazy" alt="{{ house.address }}">
            {% else %}
                <img src="{{ static('public/img/empty-listing.png') }}" loading="lazy" alt="{{ house.address }}">
            {% endif %}
        </a>
        {% if isProtected %}
          <div class="lofty-house-mask-blur">
            <div class="lofty-house-login-box">
                <div class="lock-circle">
                    <i class="lofty_iconfont lofty-icon-lock1"></i>
                </div>
                {% if not house.loginStatus %}
                   <div class="lock-desc">Free Account Required</div>
                {% elseif not house.vowStatus %}
                   <div class="lock-desc">Email Verification Required</div>
                {% endif %}
                {% if not house.loginStatus %}
                <div class="login-desc">
                    <span class="lofty-register">Register</span> or
                    <span class="lofty-login">Login</span>
                    to view details
                </div>
                {% elseif not house.vowStatus %}
                <div class="login-desc" style="text-align: center">
                    <span class="lofty-verify">Verify Your Email</span>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% if not isProtected %}
            {% for tag in house.listingTags  %}
                <div class="lofty-status-tag {{ tag.style.className }}">{{ tag.value }}</div>
            {% endfor %}
                <div class="lofty-img-counts">
                    <i class="lofty_iconfont lofty-icon-pic"></i>
                    <span class="lofty-count-number">{{ house.picturesNum }}</span>
                </div>
            {% if not house.soldDate %}
                {% if house.collectStatus %}
                    <i class="lofty_iconfont lofty-icon-heart-fill collect-heart"></i>
                {% else %}
                 <i class="lofty_iconfont lofty-icon-heart-fill lofty-icon-heart-mask"></i>
                 <i class="lofty_iconfont lofty-icon-heart collect-heart"></i>
                {% endif %}
            {% endif %}
        {% endif %}
    </div>
    {% if house.soldDate %}
        <p class="lofty-item-price">
            {% if house.showSoldPrice  %}
                <span>${{ isProtected ? '****' : house.soldPrice | number_format(0, '.', ',')}}</span>
                <span class="lofty-house-initial-price lofty-line-through">${{ isProtected ? '****' : house.price | number_format(0, '.', ',')}}</span>
            {% else %}
                <span>${{ isProtected ? '****' : house.price | number_format(0, '.', ',')}}</span>
            {% endif %}
            {% if house.showSoldPrice and house.priceChange and not isProtected %}
                <span class="lofty-trend-rate lofty-{{ house.priceTrend }}-color">
                    {% if house.priceTrend == 'up'%}
                    <i class="lofty_iconfont lofty-icon-arrow_03_{{ house.priceTrend }}"></i>
                    {% else %}
                    <i class="lofty_iconfont lofty-icon-arrow_04_{{ house.priceTrend }}"></i>
                    {% endif %}
                    {{ (house.priceChangePercent * 100) | abs | number_format(1) ~ '%' }}
                </span>
            {% endif %}
        </p>
    {% else %}
        <p class="lofty-item-price">${{ isProtected ? '****' : house.price | number_format(0, '.', ',')}}</p>
    {% endif %}
    <p class="lofty-item-detail">
        {% if house.bedrooms > 0 %}
            <span>{{ isProtected ? '***': house.bedrooms }} {{ house.bedrooms == 1 ? 'Bed':'Beds' }}</span>
        {% endif %}
        {% if house.bathrooms > 0 %}
            <span>{{ isProtected ? '***': house.bathrooms }} {{ house.bedrooms == 1 ? 'Bath':'Baths' }}</span>
        {% endif %}
        {% if house.area > 0 %}
            <span>{{ isProtected ? '***': house.area | number_format(house.decimal, '.', ',')}} {{ house.unit }}</span>
        {% endif %}
    </p>
    <p class="lofty-item-address">
        <a target="_blank" href="{{ house.detailUrl }}">
            {{ isProtected ? 'Address Not Disclosed' : house.address }}
        </a>
    </p>
    {% if house.showMls %}
        <div class="lofty-house-mls-id">
            MLS# {{ house.mlsListingId }}
        </div>
    {% endif %}
    <div class="lofty-mls-info">
        <div class="lofty-text">
            <p class="lofty-house-tag">{{ house.mlsOrg.cardTemplate | raw }}</p>
        </div>
        {% if house.mlsOrg.logo %}
        <div class="lofty-mls-logo lofty-pc-mls-logo"><img src="{{ house.mlsOrg.logo }}" alt="{{ house.mlsOrg.name ?? house.mlsOrg.id }}"></div>
        {% endif %}
        {% if house.mlsOrg.smallLogo %}
        <div class="lofty-mls-logo lofty-mobile-mls-logo"> <img src="{{ house.mlsOrg.smallLogo }}" alt="{{ house.mlsOrg.name ?? house.mlsOrg.id }}"></div>
        {% endif %}
    </div>
</div>