{% if data is not defined or not data | length %}
    <div class="kv-properties-container kv-listings-none">
        <div class="kv-col kv-w-100 kv-text-center">
            Sorry, no listings found.
        </div>
    </div>
{% else %}
    {% set perRow = defaultFilters.perRow|round in [1, 2, 3, 4] ? defaultFilters.perRow|round : 6 %}
    {% set perRowClass = ' kv-per-row-' ~ perRow %}

    <div class="kv-properties-container {% if currentFilters.layout is defined %}kv-layout-{{ currentFilters.layout }}{% else %}kv-layout-card{% endif %} {{ 'kv-grid-columns-' ~ kvcoreidx.defaultFilters.perRow }}">
        {% for listing in data %}
            <div class="kv-property{{ perRowClass }}">
                {% set click %}
                    {% if openListingsInNewTab %}
                        window.open('{{ listing.detail_url }}', '_blank');
                    {% else %}
                        document.location='{{ listing.detail_url }}';
                    {% endif %}
                {% endset %}

                {% if kvcoreidx.options.design == 'v1' %}
                    <div class="kv-box-v1">
                        <div class="kv-box-v1-image"
                                {% if listing.coverphoto_url is not empty %}
                                    style="background-image:url('{{ listing.coverphoto_url }}');"
                                {% endif %}
                        >
                            <ul class="kv-box-v1-links">
                                <li>
                                    <a href="{{ listing.detail_url }}"
                                            {% if kvcoreidx.openListingsInNewTab %}
                                                target="_blank"
                                            {% endif %}
                                    >
                                        <i class="fa fa-search kv-mr-3"></i><span>View detail</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ '/properties/?similarMls=' ~ listing.mls ~ '&similarMlsId=' ~ listing.mlsid }}"
                                       class="kv-similar-properties"
                                       data-mls="{{ listing.mls }}"
                                       data-mlsid="{{ listing.mlsid }}"
                                            {% if kvcoreidx.openListingsInNewTab %}
                                                target="_blank"
                                            {% endif %}
                                    >
                                        <i class="fa fa-balance-scale kv-mr-3"></i><span>Similar Properties</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="add-favorite {% if listing.saved %}saved-listing{% endif %}"
                                       data-mls="{{ listing.mls }}"
                                       data-mls_id="{{ listing.mlsid }}"
                                    >
                                        {% if not listing.saved %}
                                            <i class="fa fa-heart-o kv-mr-3"></i><span>Add to favorites</span>
                                        {% else %}
                                            <i class="fa fa-heart fa-heart-red kv-mr-3"></i><span>Remove from favorites</span>
                                        {% endif %}
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="kv-box-v1-content" onclick="{{ click }}">
                            <div class="kv-box-v1-title">
                                <h2 class="kv-box-v1-title-main">${{ listing.price|number_format }}</h2>

                                {% if listing.type is defined %}
                                    <small class="kv-box-v1-keyword">{{ listing.type }}</small>
                                {% endif %}

                                <h3 class="kv-box-v1-title-sub">
                                    {% if listing.address %}
                                        {{ listing.address }}
                                    {% else %}
                                        &nbsp;
                                    {% endif %}
                                </h3>
                            </div>
                        </div>

                        <div class="kv-box-v1-footer kv-bt" onclick="{{ click }}">
                            <div class="kv-box-v1-footer-item">
                                <span>{{ listing.beds ?: '-' }}</span>
                                <small class="kv-color-gray">BEDS</small>
                            </div>
                            <div class="kv-box-v1-footer-item">
                                <span>{{ listing.baths + listing.halfbaths * 0.5 ?: '-' }}</span>
                                <small class="kv-color-gray">BATHS</small>
                            </div>
                            <div class="kv-box-v1-footer-item">
                                <span>{{ listing.footage | number_format(0) ?: '-' }}</span>
                                <small class="kv-color-gray">SQFT</small>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="kv-box kv-box-footer-count-1">
                        {% if listing.coverphoto_url is not empty %}
                            <a href="{{ listing.detail_url }}"
                               class="kv-box-image"
                               style="background-image: url({{ listing.coverphoto_url }})"
                                    {% if kvcoreidx.openListingsInNewTab %}
                                        target="_blank"
                                    {% endif %}
                            >
                            </a>
                        {% endif %}

                        <div class="kv-box-content" onclick="{{ click }}">
                            <div class="kv-box-title">
                                <h3 class="kv-box-content-title-main">
                                    <span class="kv-box-content-title-main-bold">${{ listing.price|number_format }}</span>
                                </h3>
                                {% set address = listing.area is empty ? listing.address : listing.address ~ ', ' ~ listing.area %}
                                <h4 class="kv-box-content-title-sub"
                                    title="{{ address }}"
                                >
                                    {{ listing.address }}{% if listing.area %}<br/> {{ listing.area }}{% endif %}
                                </h4>
                            </div>

                            {% if listing.type is defined %}
                                <div class="kv-box-content-keyword">{{ listing.type }}</div>
                            {% endif %}
                        </div>

                        <div class="kv-box-footer kv-box-footer-show">
                            <div class="kv-box-footer-item">
                                <div>{{ listing.beds ?: '-' }}</div>
                                <small>BEDS</small>
                            </div>
                            <div class="kv-box-footer-item">
                                <div>{{ listing.bathsCalculated ?: '-'  }}</div>
                                <small>BATHS</small>
                            </div>
                            <div class="kv-box-footer-item">
                                <div>{{ listing.footage|number_format(0) ?: '-' }}</div>
                                <small>SQFT</small>
                            </div>
                        </div>

                        <div class="kv-box-footer">
                            <a href="{{ '/properties/?similarMls=' ~ listing.mls ~ '&similarMlsId=' ~ listing.mlsid }}"
                               class="kv-box-footer-item kv-small kv-similar-properties"
                               data-mls="{{ listing.mls }}"
                               data-mlsid="{{ listing.mlsid }}"
                                    {% if kvcoreidx.openListingsInNewTab %}
                                        target="_blank"
                                    {% endif %}
                            >
                                <i class="fa fa-balance-scale"></i>&nbsp;Similar
                            </a>
                            <a href="#"
                               class="kv-box-footer-item kv-small add-favorite {% if listing.saved %}saved-listing{% endif %}"
                               data-mls="{{ listing.mls }}"
                               data-mls_id="{{ listing.mlsid }}"
                            >
                                {% if not listing.saved %}
                                    <i class="fa fa-heart-o"></i>&nbsp;Add to favorites
                                {% else %}
                                    <i class="fa fa-heart"></i>&nbsp;Remove from favorites
                                {% endif %}
                            </a>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>
    <div class="kv-filters-items-count-container">
        <div class="kv-filters-items-count">{{ from }} to {{ to }} of {{ total }}</div>
    </div>
    <div class="kv-filters kv-mb-4">
        <form id="kv-property-filters-page" class="kv-property-filters crawlable-properties-page">
            <div class="kv-pagination kv-text-center">
                {% set max_pages_to_show = 5 %}
                {% set first_page = 1 %}

                {% set start = currentPage - max_pages_to_show %}
                {% if start < 1 %}
                    {% set start = 1 %}
                {% endif %}

                {% set end = start + (max_pages_to_show * 2) %}
                {% if end > last_page %}
                    {% set end = last_page %}
                {% endif %}

                {% set previous_page = currentPage - 1 %}
                {% if previous_page < 1 %}
                    {% set previous_page = 1 %}
                {% endif %}

                {% set next_page = currentPage + 1 %}
                {% if next_page > last_page %}
                    {% set next_page = last_page %}
                {% endif %}

                {% set previous = kvcoreidx.options.design == 'v1' ? 'Previous' : "<i class='fa fa-caret-left'></i>"  %}
                {% set next = kvcoreidx.options.design == 'v1' ? 'Next' : "<i class='fa fa-caret-right'></i>" %}

                {% set id = 'kv-filter-page-previous' %}
                <input type="radio"
                       name="page"
                       class="kv-form-hide crawlable-paginator"
                       id="{{ id }}"
                       value="{{ previous_page }}"
                       {% if currentPage == first_page %}disabled="disabled"{% endif %}
                >
                <label for="{{ id }}" class="kv-form-label-button">{{ previous|raw }}</label>

                {% if currentPage > max_pages_to_show + 1 %}
                    {% set id = "kv-filter-page-" ~ first_page %}
                    <input type="radio" name="page" class="kv-form-hide crawlable-paginator" id="{{ id }}" value="{{ first_page }}">
                    <label for="{{ id }}" class="kv-form-label-button">{{ first_page }}</label>
                    {% if currentPage > (max_pages_to_show + 2) %}
                        <span class="kv-form-label-button no-border">&hellip;</span>
                    {% endif %}
                {% endif %}

                {% for i in range(start, end) %}
                    {% set id = "kv-filter-page-" ~ i %}
                    <input type="radio"
                           name="page"
                           class="kv-form-hide crawlable-paginator"
                           id="{{ id }}"
                           value="{{ i }}"
                           {% if currentPage == i %}checked="checked"{% endif %}
                    >
                    <label for="{{ id }}" class="kv-form-label-button">{{ i }}</label>
                {% endfor %}

                {% if last_page - currentPage > max_pages_to_show %}
                    {% if last_page - currentPage > (max_pages_to_show + 1) %}
                        <span class="kv-form-label-button kv-form-label-button-ellip">&hellip;</span>
                    {% endif %}

                    {% set id = "kv-filter-page-" ~ last_page %}
                    <input type="radio" name="page" class="kv-form-hide crawlable-paginator" id="{{ id }}" value="{{ last_page }}">
                    <label for="{{ id }}" class="kv-form-label-button">{{ last_page }}</label>
                {% endif %}

                {% set id = 'kv-filter-page-next' %}
                <input type="radio"
                       name="page"
                       class="kv-form-hide crawlable-paginator"
                       id="{{ id }}"
                       value="{{ next_page }}"
                       {% if currentPage == last_page %}disabled="disabled"{% endif %}
                >
                <label for="{{ id }}" class="kv-form-label-button">{{ next|raw }}</label>
            </div>
        </form>
    </div>
{% endif %}