{% extends 'base.html' %}
{% block title %} | Search{% endblock  %}
{% block content %}
{% load humanize %}
<!-- Banner start -->
<div class="sub-banner overview-bgi">
    <div class="container breadcrumb-area">
        <div class="breadcrumb-areas">
            <h1>Search Results</h1>
            <ul class="breadcrumbs">
                <li><a href="index.html">Home</a></li>
                <li class="active">Search</li>
            </ul>
        </div>
    </div>
</div>
<!-- Banner end -->

<!-- Search box 3 start -->
<div class="search-box-3 sb-7 bg-active">
    <div class="container">
        <div class="search-area-inner">
            <div class="search-contents">
                <form method="GET" action="{% url 'cars:search' %}">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <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>
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <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>
                        <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <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>
                    </div>
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <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>
                        <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <div class="form-group">
                            <select class="form-control search-fields" name="transmission">
                                <option selected="true" disabled="disabled">Transmission</option>
                                {% for  transmission in transmission_search %}
                                <option value="{{transmission}}">{{transmission}}</option>
                                {% endfor %}
                            </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <div class="form-group">
                                <div class="range-slider">
                                    <div data-min="0" data-max="150000" data-unit="USD" data-min-name="min_price" data-max-name="max_price" class="range-slider-ui ui-slider" aria-disabled="false"></div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <div class="form-group">
                                <button class="btn btn-block button-theme btn-md">
                                    <i class="fa fa-search"></i>Find
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Search box 3 end -->

<!-- Featured car start -->
<div class="featured-car content-area">
    <div class="container">
        <!-- Main title -->
        <div class="main-title">
            <h1>Here's your <span>Cars</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="row">
                    {% for car in cars %}
                    <div class="col-lg-4 col-md-6">
                        <div class="car-box-3">
                            <div class="car-thumbnail">
                                <a href="car-details.html" class="car-img">
                                    <div class="tag">For Rent</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">
                                                {% if car.car_photo_1 %}
                                                <a href="{{car.car_photo_1.url}}" class="overlap-btn">
                                                    <i class="fa fa-expand"></i>
                                                    <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 'cars:car_details' car.id %}">{{car.car_title}}</a>
                                </h1>
                                <div class="location">
                                    <a href="{% url 'cars:car_details' 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.model}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
    </div>
</div>
<!-- Featured car end -->

{% endblock content %}