{% extends 'base.html' %}

{% block title %} | Home {% endblock %}
{% block content %}

{% load humanize %}
{% load static %}
<!-- Banner start -->
<!-- Log on to codeastro.com for more projects -->
<div class="banner" id="banner">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner banner-slider-inner text-center">
            <div class="carousel-item banner-max-height active item-bg">
                <img class="d-block w-100 h-100" src="{% static 'img/car-6.jpg' %}" alt="banner">
                <div class="carousel-content container banner-info-2 bi-2 text-left">
                
                    <h3>Drive Your Own Dreams</h3>
                    <h5>Allow us to guide you through the innovative stress<br>
                        free approach in finding your dream car.</h5>
                    <a href="{% url 'services' %}" class="btn btn-lg btn-theme">Read More</a>
                </div>
            </div>
            <div class="carousel-item banner-max-height item-bg">
                <img class="d-block w-100 h-100" src="{% static 'img/car-7.jpg' %}" alt="banner">
                <div class="carousel-content container banner-info-2 bi-2 text-left">
                    <h3>Fuel for Soul</h3>
                    <h5>Allow us to guide you through the innovative stress<br>
                        free approach in finding your dream car.</h5>
                    <a href="{% url 'services' %}" class="btn btn-lg btn-theme">Read More</a>
                </div>
            </div>
            <div class="carousel-item banner-max-height item-bg">
                <img class="d-block w-100 h-100" src="{% static 'img/carslider2.jpg' %}" alt="banner">
                <div class="carousel-content container banner-info-2 bi-2 text-left">
                    <h3>Car for Everyone</h3>
                    <h5>Allow us to guide you through the innovative stress<br>
                        free approach in finding your dream car.</h5>
                    <a href="{% url 'services' %}" class="btn btn-lg btn-theme">Read More</a>
                </div>
            </div>
        </div>
        <!-- Search box 3 start -->
        <div class="search-box-4 sb-8">
            <form action="{% url 'search' %}" method="">
                <div class="form-group">
                    <input type="text" name="keyword" placeholder="Search by Car Name" class="form-control">
                </div>

                <div class="form-group">
                    <select class="form-control search-fields" name="model">
                        <option selected="true" disabled="disabled">Model</option>
                        {% for model in model_search %}
                          <option value="{{model}}">{{model}}</option>
                        {% endfor %}
                    </select>
                </div>
				<!-- Log on to codeastro.com for more projects -->
                <div class="form-group">
                    <select class="form-control search-fields" name="city">
                        <option selected="true" disabled="disabled">Location</option>
                        {% for city in city_search %}
                          <option value="{{city}}">{{city}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control search-fields" name="year">
                        <option selected="true" disabled="disabled">Year</option>
                        {% for year in year_search %}
                          <option value="{{year}}">{{year}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control search-fields" name="body_style">
                        <option selected="true" disabled="disabled">Select Type Of Car</option>
                        {% for body_style in body_style_search %}
                          <option value="{{body_style}}">{{body_style}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="range-slider clearfix">
                                <label>Price</label>
                                <div data-min="0" data-max="150000"  data-min-name="min_price" data-max-name="max_price" data-unit="USD" class="range-slider-ui ui-slider" aria-disabled="false"></div>
                                <div class="clearfix"></div>
                            </div>
                <div class="form-group">
                    <button class="btn btn-block button-theme btn-md">
                        <i class="fa fa-filter"></i> Filter
                    </button>
                </div>
            </form>
        </div>
        <!-- Search box 3 end -->
        <a class="carousel-control-prev none-580" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="slider-mover-left" aria-hidden="true">
                <i class="fa fa-angle-left"></i>
            </span>
        </a>
        <a class="carousel-control-next none-580" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="slider-mover-right" aria-hidden="true">
                <i class="fa fa-angle-right"></i>
            </span>
        </a>
		<!-- Log on to codeastro.com for more projects -->
    </div>
</div>
<!-- Banner end -->

<!-- Search box 2 end -->

<!-- Featured car start -->
<div class="featured-car content-area-5">
    <div class="container">
        <!-- Main title -->
        <div class="main-title">
            <h1>Featured <span>Cars</span></h1>
            <p>Amongst many of our available cars, here are some few picks that you might have an interest in.</p>
        </div>
        <!-- Slick slider area start -->
        <div class="slick-slider-area clearfix">
            <div class="row slick-carousel" data-slick='{"slidesToShow": 3, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 2}}, {"breakpoint": 768,"settings":{"slidesToShow": 1}}]}'>
              {% for car in featured_cars %}
                <div class="slick-slide-item">
                    <div class="car-box-3">
                        <div class="car-thumbnail">
                            <a href="{% url 'car_detail' car.id %}" class="car-img">
                                <div class="tag-2">Featured</div>
                                <div class="price-box">
                                    <span>${{car.price | intcomma}}</span>
                                </div>
                                <img class="d-block w-100" src="{{car.car_photo.url}}" alt="car" style="min-height: 262px; max-height: 262px;">
                            </a>
                            <div class="carbox-overlap-wrapper">
                                <div class="overlap-box">
                                    <div class="overlap-btns-area">
                                        <div class="car-magnify-gallery">
                                            <a href="{{car.car_photo.url}}" class="overlap-btn">
                                                <i class="fa fa-expand"></i>
                                                <img class="hidden" src="{{car.car_photo.url}}">
                                            </a>
                                            {% if car.car_photo_1 %}
                                            <a href="{{car.car_photo_1.url}}" class="hidden">
                                                <img class="hidden" src="{{car.car_photo_1.url}}">
                                            </a>
                                            {% endif %}
                                            {% if car.car_photo_2 %}
                                            <a href="{{car.car_photo_2.url}}" class="hidden">
                                                <img class="hidden" src="{{car.car_photo_2.url}}">
                                            </a>
                                            {% endif %}
                                            {% if car.car_photo_3 %}
                                            <a href="{{car.car_photo_3.url}}" class="hidden">
                                                <img class="hidden" src="{{car.car_photo_3.url}}">
                                            </a>
                                            {% endif %}
                                            {% if car.car_photo_4 %}
                                            <a href="{{car.car_photo_4.url}}" class="hidden">
                                                <img class="hidden" src="{{car.car_photo_4.url}}">
                                            </a>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
						<!-- Log on to codeastro.com for more projects -->
                        <div class="detail">
                            <h1 class="title">
                                <a href="{% url 'car_detail' car.id %}">{{ car.car_title }}</a>
                            </h1>
                            <div class="location">
                                <a href="{% url 'car_detail' car.id %}">
                                    <i class="flaticon-pin"></i>{{car.state}}, {{car.city}}
                                </a>
                            </div>
                            <ul class="facilities-list clearfix">
                                <li>{{car.fuel_type}}</li>
                                <li>{{car.miles | intcomma}} km</li>
                                <li>{{car.transmission}}</li>
                                <li>{{car.body_style}}</li>
                                <li>{{car.color}}</li>
                                <li>{{car.year}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            {% endfor %}

            </div>
            <div class="slick-btn">
                <div class="slick-prev slick-arrow-buton sab-4">
                    <i class="fa fa-angle-left"></i>
                </div>
                <div class="slick-next slick-arrow-buton sab-3">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Featured car end -->

<!-- Rent car start -->
<div class="featured-car content-area">
    <div class="container">
        <!-- Main title -->
        <div class="main-title">
            <h1>Latest <span>Cars</span></h1>
            <p></p>
        </div>
        <div class="row">
          {% for car in all_cars|slice:":6" %}
            <div class="col-lg-4 col-md-6">
                <div class="car-box">
                    <div class="car-thumbnail">
                        <a href="{% url 'car_detail' car.id %}" class="car-img">
                            <div class="tag">For Sale</div>
                            <img class="d-block w-100" src="{{car.car_photo.url}}" alt="car" style="min-height: 262px; max-height: 262px;">
                            <div class="facilities-list clearfix">
                                <ul>
                                    <li>
                                        <span><i class="flaticon-way"></i></span>{{car.miles | intcomma}} mi
                                    </li>
                                    <li>
                                        <span><i class="flaticon-calendar-1"></i></span>{{car.year}}
                                    </li>
                                    <li>
                                        <span><i class="flaticon-manual-transmission"></i></span>{{car.transmission}}
                                    </li>
                                </ul>
                            </div>
                        </a>
						<!-- Log on to codeastro.com for more projects -->
                        <div class="carbox-overlap-wrapper">
                            <div class="overlap-box">
                                <div class="overlap-btns-area">
                                    <div class="car-magnify-gallery">
                                        <a href="{{car.car_photo.url}}" class="overlap-btn">
                                            <i class="fa fa-expand"></i>
                                            <img class="hidden" src="{{car.car_photo.url}}">
                                        </a>
                                        {% if car.car_photo_1 %}
                                        <a href="{{car.car_photo_1.url}}" class="hidden">
                                            <img class="hidden" src="{{car.car_photo_1.url}}">
                                        </a>
                                        {% endif %}
                                        {% if car.car_photo_2 %}
                                        <a href="{{car.car_photo_2.url}}" class="hidden">
                                            <img class="hidden" src="{{car.car_photo_2.url}}">
                                        </a>
                                        {% endif %}
                                        {% if car.car_photo_3 %}
                                        <a href="{{car.car_photo_3.url}}" class="hidden">
                                            <img class="hidden" src="{{car.car_photo_3.url}}">
                                        </a>
                                        {% endif %}
                                        {% if car.car_photo_4 %}
                                        <a href="{{car.car_photo_4.url}}" class="hidden">
                                            <img class="hidden" src="{{car.car_photo_4.url}}">
                                        </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="detail">
                        <h1 class="title">
                            <a href="{% url 'car_detail' car.id %}">{{car.car_title}}</a>
                        </h1>
                        <div class="location">
                            <a href="{% url 'car_detail' car.id %}">
                                <i class="flaticon-pin"></i>{{car.state}}, {{car.city}}
                            </a>
                        </div>
                    </div>
                    <div class="footer clearfix">
                        <div class="pull-left ratings days">
                            <p class="cartype">{{car.body_style}}</p>
                        </div>
                        <div class="pull-right">
                            <p class="price">$ {{car.price | intcomma}}</p>
                        </div>
                    </div>
                </div>
            </div>
			<!-- Log on to codeastro.com for more projects -->
          {% endfor %}

        </div>
    </div>
</div>
<!-- Rent car end -->


<!-- Our team start -->
<div class="our-team content-area bg-grea-3">
    <div class="container">
        <!-- Main title -->
        <div class="main-title">
            <h1>Executive <span>Team</span></h1>
            <p>Team working behind maintaining the quality of our Car Dealership Website.</p>
        </div>
        <!-- Slick slider area start -->
        <div class="slick-slider-area clearfix">
            <div class="row slick-carousel" data-slick='{"slidesToShow": 4, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 2}}, {"breakpoint": 768,"settings":{"slidesToShow": 1}}]}'>
              {% for team in teams %}
                <div class="slick-slide-item">
                    <div class="team-1">
                        <div class="photo">
                            <a href="#">
                                <img src="{{ team.photo.url }}" alt="team-1" class="img-fluid">
                            </a>
                            <div class="social-list clearfix">
                                <a href="{{team.facebook_link}}" target="_blank" class="facebook-bg"><i class="fa fa-facebook"></i></a>
                                <a href="{{team.twitter_link}}" target="_blank" class="twitter-bg"><i class="fa fa-twitter"></i></a>
                                <a href="{{team.google_plus_link}}" target="_blank" class="google-bg"><i class="fa fa-google"></i></a>
                            </div>
                        </div>
                        <div class="details">
                            <h4><a href="#">{{team.first_name}} {{team.last_name}}</a></h4>
                            <h5>{{team.designation}}</h5>
                        </div>
                    </div>
                </div>
              {% endfor %}
            </div>
        </div>
    </div>
</div>
<!-- Our team end -->

<!-- Intro section start -->
<div class="intro-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-md-8 col-sm-12">
                <div class="intro-text">
                    <h3>Do You Have Questions ?</h3>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-12">
                <a href="{% url 'contact' %}" class="btn btn-md">Get in Touch</a>
            </div>
        </div>
    </div>
</div>
<!-- Log on to codeastro.com for more projects -->
<!-- Intro section end -->







{% endblock %}