
<div id="listing-header" class="clearfix">
  <!--   <div class="form-control">
        <select id="sort_by" name="sort_by" data-placeholder="Sort by" class="form-select form-select-sm" aria-label=".form-select-sm example">
            <option value=""> </option>
            <option value="data">Sort by Date</option>
            <option value="area">Sort by Area</option>
        </select>
    </div>

   <div class="sort">
        <ul>
            <li class="active"><i data-toggle="tooltip" data-placement="top" title="Sort Descending" class="fa fa-chevron-down"></i></li>
            <li><i data-toggle="tooltip" data-placement="top" title="Sort Ascending" class="fa fa-chevron-up"></i></li>
        </ul>
    </div>

    <div class="view-mode">
        <span>View Mode:</span>
        <ul>
            <li data-view="grid-style1" data-target="property-listing"><i class="fa fa-th"></i></li>
            <li data-view="list-style" data-target="property-listing" class="active"><i class="fa fa-th-list"></i></li>
        </ul>
    </div> -->
</div>

<!-- BEGIN PROPERTY LISTING -->
<section id="values" class="values">

    <div id="property-listing" class=" container list-style clearfix"> <!-- Inject "grid-style1" for grid view-->
    <% if $Results %>
            <h2>Showing $Results.PageLength results ($Results.getTotalItems total)</h2>
        
        <div class="row">
        <% loop $Results %>
                        <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
                            <div class="box pricing">
                                <img src="$PrimaryPhoto.URL" class="img-fluid" alt="">
                                <h2><a href="$Link">$Title</a></h2>
                                <h4>$Region.Title</h4>
                                <p>$Description.LimitSentences(3)</p>
                                <div class="bg-dark pt-3 pb-2">
                                    <div class="price text-white">
                                        $PricePerNight.Nice<span> /per night</span>
                                    </div>
                                    <div class="social-links">
                                        
                                            <a href="#"><i class="bi bi-house"></i> $Bedrooms Bedroom</a>
                                            <a href="#"><i class="bi bi-droplet"></i> $Bathrooms Bathroom</a>
                                    
                                    </div>
                                </div>
                            </div>
                        </div>
        
        <% end_loop %>
        </div>
    <% end_if %>
    </div>
</section>
<!-- END PROPERTY LISTING -->


<!-- BEGIN PAGINATION -->
<% if $Results.MoreThanOnePage %>
    <div class="pagination">
      <% if $Results.NotFirstPage %>
          <ul id="previous col-xs-6">
              <li><a href="$Results.PrevLink"><i class="fa fa-chevron-left"></i></a></li>
          </ul>
      <% end_if %>
        <ul class="hidden-xs">
          <% loop $Results.PaginationSummary %>
            <% if $Link %>
                <li <% if $CurrentBool %>class="active"<% end_if %>><a href="$Link">$PageNum</a></li>
            <% else %>
                <li>...</li>
            <% end_if %>
          <% end_loop %>
        </ul>
      <% if $Results.NotLastPage %>
          <ul id="next col-xs-6">
              <li><a href="$Results.NextLink"><i class="fa fa-chevron-right"></i></a></li>
          </ul>
      <% end_if %>
    </div>
<% end_if %>
<!-- END PAGINATION -->

