{% extends 'base.html' %}
{% block title %} Home{% endblock title %} 
{% block body %}

        <!-- Banner Section One Start -->
        <section class="banner-one two">
            <div class="banner-two__bg-slide">
                <div class="thm-swiper__slider swiper-container" data-swiper-options='{"spaceBetween": 0, "loop": true, "effect": "fade", "slidesPerView": 1, "autoplay": { "delay": 5000 }, "pagination": {
                    "el": "#banner-two__bg-slide-pagination",
                    "type": "bullets",
                    "clickable": true
                }}'>
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="image-layer"
                                style="background-image: url({{url_for('static', filename='assets/images/main-slider/slider-2-1.jpg') }});"></div>
                            <!-- /.image-layer -->
                        </div><!-- /.swiper-slide -->
                        <div class="swiper-slide">
                            <div class="image-layer"
                                style="background-image: url({{url_for('static', filename='assets/images/main-slider/slider-2-2.jpg') }});"></div>
                            <!-- /.image-layer -->
                        </div><!-- /.swiper-slide -->
                        <div class="swiper-slide">
                            <div class="image-layer"
                                style="background-image: url({{url_for('static', filename='assets/images/main-slider/slider-2-1.jpg') }});"></div>
                            <!-- /.image-layer -->
                        </div><!-- /.swiper-slide -->
                    </div><!-- /.swiper-wrapper -->
                </div><!-- /.thm-swiper__slider -->
                <div class="swiper-pagination" id="banner-two__bg-slide-pagination"></div>
            </div><!-- /.banner-two__bg-slide -->
            <div class="container">
                <div class="content-box">
                    <div class="top-title">
                        <div class="banner_two_shape"><img src="{{ url_for('static', filename='assets/images/shapes/banner_two_shape.png') }}" alt=""></div>
                        <h2>Luxury Downtown <br> Apartments</h2>
                    </div>

                    <div class="product-tab-box tabs-box">
                        <ul class="tab-btns tab-buttons clearfix list-unstyled">
                            <li data-tab="#desc" class="tab-btn active-btn"><span>Buy</span></li>
                            <!-- <li data-tab="#addi__info" class="tab-btn"><span>Sale</span></li> -->
                            <li data-tab="#review" class="tab-btn"><span>Rent</span></li>
                        </ul>
                        <div class="tabs-content">
                            <div class="tab active-tab" id="desc">
                                <form class="banner_one_search_form" action="/search" method="post">
                                    <div class="banner_one_search_form_input_box">
                                        <input type="text" name="district" required placeholder="Search for City ">
                                        <input type="hidden" name="type" value="buy">
                                        <button type="submit" class="thm-btn banner_one_search_btn">Search
                                            Property</button>
                                        <div class="banner_one_search_icon">
                                            <a href="#"><span class="icon-magnifying-glass"></span></a>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!-- <div class="tab" id="addi__info">
                                <form class="banner_one_search_form" action="/listing-2.html">
                                    <div class="banner_one_search_form_input_box">
                                        <input type="text" placeholder="Search for city, property, agent and more...">
                                        <button type="submit" class="thm-btn banner_one_search_btn">Search
                                            Property</button>
                                        <div class="banner_one_search_icon">
                                            <a href="#"><span class="icon-magnifying-glass"></span></a>
                                        </div>
                                    </div>
                                </form>
                            </div> -->

                            <div class="tab" id="review">
                                <form class="banner_one_search_form" action="/search" method="post">
                                    <div class="banner_one_search_form_input_box">
                                        <input type="text" name="district" required placeholder="Search for city">
                                        <input type="hidden" name="type" value="Rent">
                                        <button type="submit" class="thm-btn banner_one_search_btn">Search
                                            Property</button>
                                        <div class="banner_one_search_icon">
                                            <a href="#"><span class="icon-magnifying-glass"></span></a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Banner Section One End -->

        <!--Cities One Start-->
        <section class="cities_one">
            <div class="container">

                 <div class="block-title text-center">
                    <!-- <h4>Find Property Near by City</h4> -->
                    <h2>Top Cities</h2>
                </div>

                <div class="row justify-content-center">

                    {% if topcities|length > 0 %}
                    <ul class="d-flex">
                        {% for tc in topcities %}
                        <li class="p-1" style="list-style: none;">
                            <div class="cities_one_single">
                                <div class="cities_one_properties">
                                    <div class="cities_one_properties_content">
                                        <h4>
                                        <a href="{{tc.url}}">
                                            <img class="pl-4 pr-4" src="{{ url_for('static', filename=tc.icon) }}" alt="">
                                            <span>Property in <br/>{{tc.name}}</span> 
                                        </a>
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        </li> 
                        {% endfor %}                        
                    </ul>
                    {% endif %}
 

                </div>
            </div>
        </section>
        <!--Cities One End-->

  
        <!--Latest Properties Two Start-->
        <section class="latest_properties two">
            <div class="container">
                <div class="latest_properties_two_inner">
                    <div class="block-title text-left">
                        <h2>Latest Properties</h2>
                    </div>
                    <div class="swiper-pagination" id="latest_properties_pagination"></div>
                    <div class="row">
                        <div class="col-xl-12">
                    <div class="thm-swiper__slider swiper-container" data-swiper-options='{"spaceBetween": 100, "slidesPerView": 4, "autoplay": { "delay": 5000 }, "pagination": {
                        "el": "#latest_properties_pagination",
                        "type": "bullets",
                        "clickable": true
                    },
                    "navigation": {
                        "nextEl": ".latest_properties_next",
                        "prevEl": ".latest_properties_prev",
                        "clickable": true
                    },
                    "breakpoints": {
                        "0": {
                            "spaceBetween": 30,
                            "slidesPerView": 1
                        },
                        "425": {
                            "spaceBetween": 30,
                            "slidesPerView": 1
                        },
                        "575": {
                            "spaceBetween": 30,
                            "slidesPerView": 2
                        },
                        "767": {
                            "spaceBetween": 30,
                            "slidesPerView": 2
                        },
                        "991": {
                            "spaceBetween": 20,
                            "slidesPerView": 3
                        },
                        "1289": {
                            "spaceBetween": 30,
                            "slidesPerView": 3
                        },
                        "1440": {
                            "spaceBetween": 30,
                            "slidesPerView": 4
                        }
                    }}'>
                                <div class="swiper-wrapper">

                                    {% if getlist|length == 0 %}
                                    <p>No Record Found!</p>
                                    {% else %} 
                                    {% for list in getlist %}

                                    <div class="swiper-slide">
                                        <div class="latest_properties_single">
                                            <div class="latest_properties_img_carousel owl-theme owl-carousel">
                                                {% if  list.pic1: %}
                                                <div class="latest_properties_img">
                                                    <img src="/static/assets/uploadfile/{{list.pic1}}"
                                                        alt="">
                                                    <div class="latest_properties_icon">
                                                        <i class="fa fa-heart"></i>
                                                    </div>
                                                    <div class="featured_and_sale_btn">

                                                        <a href="#" class="sale_btn">For {%if list.listtype%} {{list.listtype}} {%endif%}</a>
                                                    </div>
                                                </div>
                                                {% endif %}

                                                {% if  list.pic2: %}
                                                <div class="latest_properties_img">
                                                    <img src="/static/assets/uploadfile/{{list.pic2}}"
                                                        alt="">
                                                    <div class="latest_properties_icon">
                                                        <i class="fa fa-heart"></i>
                                                    </div>
                                                    <div class="featured_and_sale_btn">

                                                        <a href="#" class="sale_btn">For Sale</a>
                                                    </div>
                                                </div>
                                                {% endif %}

                                                {% if  list.pic3: %}
                                                <div class="latest_properties_img">
                                                    <img src="/static/assets/uploadfile/{{list.pic3}}"
                                                        alt="">
                                                    <div class="latest_properties_icon">
                                                        <i class="fa fa-heart"></i>
                                                    </div>
                                                    <div class="featured_and_sale_btn">

                                                        <a href="#" class="sale_btn">For Sale</a>
                                                    </div>
                                                </div>
                                                {% endif %}

                                                {% if  list.pic4: %}
                                                <div class="latest_properties_img">
                                                    <img src="/static/assets/uploadfile/{{list.pic4}}"
                                                        alt="">
                                                    <div class="latest_properties_icon">
                                                        <i class="fa fa-heart"></i>
                                                    </div>
                                                    <div class="featured_and_sale_btn">

                                                        <a href="#" class="sale_btn">For Sale</a>
                                                    </div>
                                                </div>
                                                {% endif %}
                                            </div>
                                            <div class="latest_properties_content">
                                                <div class="latest_properties_top_content">
                                                    <h4><a href="{{list.listtype | lower}}/{{list.url}}">

                                                        {% if  list.bhk == None:  %}  
                                                            {{ list.requiretype }}
                                                        {% else :%}
                                                            {{   list.bhk }}
                                                        {% endif %}

                                                        {{list.proptype}}
                                                       <small>for {{ list.listtype}}</small> 
                                                    </a></h4>
                                                    <p>
                                                
                                                    {% if list.district: %}
                                                    {{  list.district+","}}
                                                    {% endif %}

                                                    {% if list.city is not none: %}
                                                    {{  list.city+","}}
                                                    {% endif %} 

                                                    {% if list.locality is not none: %}
                                                    {{  list.locality}}
                                                    {% endif %}

                                                     </p>
                                                        {% if  list.listtype == 'Sell' and list.proptype == 'Plot' :  %}  
                                                        <h3>&#8377;
                                                        {% if  list.amount_text == '':  %}  
                                                        {{   list.price }} <span>Price</span>
                                                            {% else :%}
                                                        {{   list.amount_text}}  
                                                        {% endif %}
                                                        </h3>
                                                        {% endif %}
                                                        {% if  list.listtype == 'Sell' and list.proptype != 'Plot' :  %}  
                                                        <h3>
                                                        &#8377;

                                                        {% if  list.amount_text == '':  %}  
                                                        {{   list.cost }} <span>Price</span>
                                                            {% else :%}
                                                        {{   list.amount_text}}  
                                                        {% endif %}
                                                        </h3>
                                                        {% endif %}
                                                        {% if  list.listtype == 'Rent':  %}  
                                                        <h3>&#8377;


                                                        {% if  list.amount_text == '':  %}  
                                                        {{   list.monthly_rent }} <span>Monthly Rent</span>
                                                            {% else :%}
                                                        {{   list.monthly_rent}}  
                                                        {% endif %} 
                                                        </h3>
                                                        {% endif %}
                                                </div>
                                                <div class="latest_properties_bottom_content">
                                                    <ul class="list-unstyled">
                                                        <!-- <li><span class="icon-bed"></span>4</li>
                                                        <li><span class="icon-shower"></span>2</li> -->
                                                         
                                                        <li><a href="#" class="btn btn-primary" onclick="getpid('{{list.id}}')" data-toggle="modal" data-target="#basicModal">Enquire Now</a></li>
                                                        <li><span class="icon-square-measument"></span>{% if list.built_area: %}   {{list.built_area+"sqft"}} {%endif %} </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--Latest Properties Two End-->

         

       
       

 

        <!--Are You Ready Start-->
        <section class="are_you_ready jarallax" data-jarallax data-speed="0.2" data-imgPosition="50% 0%"
            style="background-image: url(/static/assets/images/backgrounds/are_you_ready_bg.jpg)">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="are_you_ready_content">
                            <div class="are_you_ready_shape"><img src="/static/assets/images/shapes/are_you_ready_shape.png"
                                    alt=""></div>
                            <h2>Are You Ready to Buy <br> Dream House?</h2>
                            <a href="#" class="thm-btn">Search Property</a>
 
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--Are You Ready End-->

        <!--Blog Two Start-->
        {% if blogs|length > 0 %}
        <section class="blog_one two" id="articles">
            <div class="container">
                <div class="block-title text-center">
                    <h4>Our Blog Posts</h4>
                    <h2>News & Articles</h2>
                </div>
                <div class="row">
                    {% for blog in blogs %}
                    <div class="col-xl-4 col-lg-4">
                        <div class="blog_one_single wow fadeInUp" data-wow-delay="00ms">
                            <div class="blog_one_image_box">
                                <div class="blog_one_img">
                                    <img src="/static/assets/uploadfile/blog/{{blog.image}}" alt="">
                                </div>
                            </div>
                            <div class="blog_one_content_box">
                                <h3><a href="articles/{{blog.url}}">{{blog.title}}</a></h3>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>


        
       
        


        {% endif%}
        <!--Blog Two End-->
 
       
    {% endblock body %}