{% extends 'front/base/base.html' %}
{% block content %}
{% load static %}
<!-- START SECTION INFO -->
<section id="home" class="parallax-searchs section welcome-area overlay">
    <div class="hero-main">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="banner-inner" data-aos="zoom-in">
                        <h1 class="title text-center">Find Your Dream Home</h1>
                        <h5 class="sub-title text-center">We Have Over Million Properties For You</h5>
                    </div>
                </div>
                <!-- Search Form -->
                <div class="col-12">
                    <div class="banner-search-wrap" data-aos="zoom-in">
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="tabs_1">
                                <div class="rld-main-search">
                                    <form action="{% url 'frontend:search' %}" method="POST">
                                        {% csrf_token %}
                                        <div class="row">
                                            <div class="rld-single-select">
                                                <select class="select single-select mr-0">
                                                    <option value="1">Gurgaon</option>
                                                </select>
                                            </div>
                                            <div class="rld-single-input" style="padding-left: 10px !important;">
                                                <input type="text" name="name" id="query" placeholder="Enter Keyword...">
                                            </div>
                                            <div class="col-xl-2 col-lg-2 col-md-4 pl-0">
                                                <a class="btn btn-yellow" href="#">Search Now</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ End Search Form -->
            </div>
        </div>
    </div>
</section>
<!-- END HEADER SEARCH -->

<!-- START SECTION PROPERTIES FOR SALE -->
<section class="featured portfolio bg-white">
    <div class="container">
        <div class="row">
            <div class="section-title col-md-5">
                <h3>Properties</h3>
                <h2>For Sale</h2>
            </div>
        </div>
        <div class="row portfolio-items">
            {% for category_project in project %}
            <div class="item col-lg-4 col-md-6 col-xs-12 landscapes sale">
                <div class="project-single" data-aos="zoom-in" data-aos-delay="150">
                    <div class="listing-item compact">
                        <a href="{{category_project.slug}}" class="listing-img-container">
                            <div class="listing-badges">
                                {% if category_project.isFeatured %}
                                <span class="featured" style="width:120px">Featured</span>
                                {% else %}
                                {% endif %}
                                {% if category_project.premium %}
                                <span>Premium</span>
                                {% else %}
                                {% endif %}
                            </div>
                            <div class="listing-img-content">
                                <span class="listing-compact-title">{{category_project.name}} <i>{{category_project.location.name}}, {{category_project.city.name}}</i></span>
                                <ul class="listing-hidden-content blue">
                                    <li>Units <span>{{category_project.project_details.unites}}</span></li>
                                    <li>Floors <span>{{category_project.project_details.floors}}</span></li>
                                    <li>Area <span>{{category_project.project_details.minarea}} - {{category_project.project_details.maxarea}} {{category_project.project_details.get_areaselect_display}} </span></li>
                                    <!-- <li>Baths <span>3</span></li> -->
                                </ul>
                            </div>
                            <img src="/media/{{category_project.project_thumb}}" alt="{{category_project.name}}">
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>



<!-- END SECTION PROPERTIES FOR SALE -->

<!-- START SECTION INFO-HELP -->
<section class="info-help">
<div class="container">
<div class="row info-head">
    <div class="col-lg-6 col-md-8 col-xs-8" data-aos="fade-right">
        <div class="info-text mt-5">
            <h3>We help you find your new place</h3>
            <p>Jaguar Landbase welcomes you to our comprehensive Real Estate Industry. Our website will help you to find most suitable properties</p>
            <!-- <div class="inf-btn pro">
                <a href="about-us" class="btn btn-pro btn-secondary btn-lg">Get Started</a>
            </div> -->
        </div>
    </div>
    <div class="col-md-6 col-sm-3"></div>
</div>
</div>
</section>
<!-- END SECTION INFO-HELP -->

<section class="popular-places bg-white">
    <div class="container">
        <div class="sec-title">
            <h2><span>Popular </span>Localities</h2>
            <p>In Gurgaon</p>
        </div>
        <div class="row">
            <div class="col-sm-6 col-lg-4 col-xl-4 aos-init aos-animate" data-aos="zoom-in" data-aos-delay="150">
                <!-- Image Box -->
                <a href="locality/projects-on-golf-course-road-gurgaon" class="img-box hover-effect">
                    <img src="{% static 'frontend/images/locality/golf-course-road.jpg' %}" class="img-responsive" alt="Golf Course Road">
                    <!-- Badge -->
                    <div class="img-box-content visible">
                        <h4>Golf Course Road</h4>
                        <span>Gurgaon</span>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-lg-4 col-xl-4 aos-init aos-animate" data-aos="zoom-in" data-aos-delay="250">
                <!-- Image Box -->
                <a href="locality/projects-on-golf-course-extension-road-gurgaon" class="img-box hover-effect">
                    <img src="{% static 'frontend/images/locality/golf-course-extension.jpg' %}" class="img-responsive" alt="Golf Course Extension Road">
                    <div class="img-box-content visible">
                        <h4>Golf Course Extension Road</h4>
                        <span>Gurgaon</span>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-lg-4 col-xl-4 aos-init aos-animate" data-aos="zoom-in" data-aos-delay="350">
                <!-- Image Box -->
                <a href="locality/projects-on-sohna-road-gurgaon" class="img-box hover-effect no-mb">
                    <img src="{% static 'frontend/images/locality/sohna-road.jpg' %}" class="img-responsive" alt="Sohna Road">
                    <div class="img-box-content visible">
                        <h4>Sohna Road</h4>
                        <span>Gurgaon</span>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-lg-4 col-xl-4 aos-init aos-animate" data-aos="zoom-in" data-aos-delay="150">
                <!-- Image Box -->
                <a href="locality/projects-on-southern-peripheral-road-gurgaon" class="img-box hover-effect no-mb x3">
                    <img src="{% static 'frontend/images/locality/spr-road.jpg' %}" class="img-responsive" alt="SPR Road">
                    <!-- Badge -->
                    <div class="img-box-content visible">
                        <h4>SPR Road</h4>
                        <span>Gurgaon</span>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-lg-4 col-xl-4 aos-init aos-animate" data-aos="zoom-in" data-aos-delay="250">
                <!-- Image Box -->
                <a href="locality/projects-in-new-gurgaon" class="img-box hover-effect no-mb x3">
                    <img src="{% static 'frontend/images/locality/new-gurgaon.jpg' %}" class="img-responsive" alt="New Gurgaon">
                    <!-- Badge -->
                    <div class="img-box-content visible">
                        <h4>New Gurgaon</h4>
                        <span>Gurgaon</span>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-lg-4 col-xl-4 aos-init aos-animate" data-aos="zoom-in" data-aos-delay="350">
                <!-- Image Box -->
                <a href="locality/projects-on-dwarka-expressway-gurgaon" class="img-box hover-effect no-mb x3">
                    <img src="{% static 'frontend/images/locality/dwarka-expressway-gurgaon.jpg' %}" class="img-responsive" alt="Dwarka Expressway Gurgaon">
                    <!-- Badge -->
                    <div class="img-box-content visible">
                        <h4>Dwarka Expressway</h4>
                        <span>Gurgaon</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- START SECTION BLOG -->
<section class="blog-section bg-white">
    <div class="container">
       <div class="sec-title">
          <h2><span>Articles &amp; </span>Tips</h2>
          <p>Read the latest news from our blog.</p>
       </div>
       <div class="news-wrap">
          <div class="row">
            {% for items in blog %}
            <div class="col-lg-4 col-md-12 col-xs-12">
                <div class="news-item">
                    <a href="{{items.slug}}" class="news-img-link">
                        <div class="news-item-img">
                            <img class="img-responsive" src="/media/{{items.blog_thumbnail}}" alt="blog image">
                        </div>
                    </a>
                    <div class="news-item-text">
                        <a href="/blog/{{items.slug}}"><h3>{{items.name}}</h3></a>
                        <div class="dates">
                            <span class="date">{{items.created_at|date}} &nbsp; | {{items.category.name}}</span>
                        </div>
                        <!-- <div class="news-item-descr big-news">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ipsum dolor sit amet, consectetur.</p>
                        </div> -->
                        <div class="news-item-bottom">
                            <a href="{{items.slug}}" class="news-link">Read more...</a>
                            <div class="admin">
                                <p>By, {{request.user.username}}</p>
                                <img src="/media/{{items.blog_thumbnail}}" alt="{{items.name}}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
          </div>
       </div>
    </div>
 </section>
<!-- END SECTION BLOG -->
{% endblock %}