{% extends 'layouts/_main' %}



{% block content %}

  <div class="section mt-5">
    <div class="container mt-4">
      <div class="row mb-5 align-items-center">
        <div class="col-lg-6 text-center mx-auto">
          <h2 class="font-weight-bold text-primary heading">
            Featured Properties
          </h2>
          <h5>Non Next Gen Webp Optimized</h5>



        </div>
      </div>
      <form>
      <div class="row my-4">
        <div class="col">
          {% set req = craft.app.request %}
          {% set suburb = req.getQueryParam("suburb") %}
            Suburb (2 Field Basic Search)
            <input type="text" class="form-control form-control-sm" placeholder="Search" name='suburb' aria-label="Text Search" value="{{ suburb }}">
          
        </div>
        {% set price_low = req.getQueryParam('price_low') %}


        <div class="col-2">
          Price From ('000)
          {% set price_low = req.getQueryParam('price_low') %}
          <input type="text" class="form-control form-control-sm" name="price_low" value='{{price_low}}'>
        </div>
        <div class='col-2'>  
          Price To
          {% set price_high = req.getQueryParam('price_high') %}
          <input type="type" class="form-control form-control-sm" name="price_high" value='{{price_high}}'>
        </div>
        <div class="col"><br>
            <button class='btn btn-primary'>Search</button>    
        </div>
        
      </div>
      </form>

        <div class="row">
          <div class="col-12" >
            <div class="property-slider-wrap">
              <div class="property-slider">
                
                <!-- .item -->
                {% set query = craft.entries.section('property') %}

                {% if suburb %}
                  {% set query = query.suburb('*'~ suburb ~'*') %}
                {% endif %}


                {% if price_low %}
                  {% set query = query.price('>= '~ price_low) %}
                {% endif %}

                {% if price_high %}
                  {% set query = query.price('<= '~ price_high) %}
                {% endif %}

                {% if price_low and price_high %} 
                  {% set query = query.price(['and','>='~ price_low, '<='~ price_high]) %}
                {% endif %}


                {% set array = query.all() %}
                
                {% set transform = false %}
                
                {% for item in array  %}
                  {% include 'property/_single' with {
                    item: item,
                    transform: transform
                  } %}
                {% endfor %}
                <!-- .item -->
              </div>

              <div
                id="property-nav"
                class="controls"
                tabindex="0"
                aria-label="Carousel Navigation"
              >
                <span
                  class="prev"
                  data-controls="prev"
                  aria-controls="property"
                  tabindex="-1"
                  >Prev</span
                >
                <span
                  class="next"
                  data-controls="next"
                  aria-controls="property"
                  tabindex="-1"
                  >Next</span
                >
              </div>
            </div>
          </div>
        </div>


    </div>
  </div>

{% endblock %}