{% extends 'base.html.twig' %}

{% block body %}
    <div id="top_menu" class="trans_head">
        <div class="container">
            <div class="row ">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                    <div class="img_center"><img src="http://www.blueskycarrentals.com/images/carrentallogo.png"
                                                 style="height:45px"></div>
                </div>
                <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                    <div id='cssmenu'>
                        <ul id="menu">
                            <li class='active'><a href='#'>Products <span class="ngo">&#9660;</span></a>
                                <ul>
                                    <li><a href='#'>Product 1 <span class="ngo">&#9658;</span></a>
                                        <ul>
                                            <li><a href='#'>Sub Product</a></li>
                                            <li><a href='#'>Sub Product</a></li>
                                        </ul>
                                    </li>
                                    <li><a href='#'>Product 2 <span class="ngo">&#9658;</span></a>
                                        <ul>
                                            <li><a href='#'>Sub Product</a></li>
                                            <li><a href='#'>Sub Product</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href='#'>My reservations</a></li>
                            <li><a href='#'>Login</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <header id="header" class="city_new_york relative banner">
        <a id="bgndVideo" class="player"
           data-property="{videoURL:'https://www.youtube.com/watch?v=ZffDWBc7kT4', opacity:1, autoPlay:true, containment:'header', startAt:39, stopAt:168, mute:true, vol:50, optimizeDisplay:true, showControls:false, printUrl:false, loop:true, addRaster:true, quality:'hd720',	showYTLogo:false, realfullscreen:true, ratio:'auto', gaTrack:false, stopMovieOnBlur:true}"></a>
        <div class="pattern">
            <div class="container">
                <div class="row-block block block-margin">
                    <div class="row" style="height:375px;padding-top:30px">
                        <div class="col-lg-3 col-md-4 col-sm-5 col-xs-12 ">

                            <div id="search_box" class="filter-cars block block-shadow blue"><!--   Search form    -->
                                <div class="block-inner">
                                    <div class="block-title white_txt">
                                        <h3><i class="fa fa-search" style="padding: 0 10px 0 3px"></i>Search for Car
                                            Rent</h3>
                                    </div>
                                    <div class="form-group">
                                        <input id='first_search' onfocus='setCurrentFocus(this)' class="form-control"
                                               name="search_city" autocomplete="off"
                                               placeholder="Type city or airport name" value="{{ pickup }}"/>
                                        <input type="hidden" id='first_code' value="{{ pcity }}"/>
                                        <div class="relative fluid place1">
                                        </div>
                                    </div>

                                    <div class="block-header white_txt">
                                    </div>
                                    <div class="form-group  white_txt">
                                        <label class="nice_checkbox"> <input type='checkbox' id="checkbox_add"
                                                                             onclick="checkbox();" {{ checked }} />
                                            <span>Return car to the same location</span></label>
                                    </div>
                                    <div class="form-group" style="display:none" id="add_append">
                                        <input id='search2' onfocus='setCurrentFocus(this)' class="form-control"
                                               name="search_city" autocomplete="off"
                                               placeholder="Type city or airport name" value="{{ pickoff }}"/>
                                        <input type="hidden" id='second_code' value="{{ dcity }}"/>
                                        <div class="relative fluid place2">
                                        </div>
                                    </div>
                                    <div class="block-header white_txt">
                                    </div>
                                    <div class="form-group col-lg-7 col-md-7 col-sm-7 col-xs-7 no-padding-left">
                                        <input id="from" class="date_input" value="{{ date1 }}">
                                    </div><!-- /.form-group -->

                                    <div class="form-group col-lg-5 col-md-5 col-sm-5 col-xs-5 no-padding-right time_pick">
                                        <select name="fromtime" id="fromtime" class="form-control select time_pickers ">
                                            <option  {{ a0030 }} value="00:30">00:30</option>
                                            <option  {{ a0100 }} value="01:00">01:00</option>
                                            <option  {{ a0130 }} value="01:30">01:30</option>
                                            <option  {{ a0200 }} value="02:00">02:00</option>
                                            <option  {{ a0230 }} value="02:30">02:30</option>
                                            <option  {{ a0300 }} value="03:00">03:00</option>
                                            <option  {{ a0330 }} value="03:30">03:30</option>
                                            <option  {{ a0400 }} value="04:00">04:00</option>
                                            <option  {{ a0430 }} value="04:30">04:30</option>
                                            <option  {{ a0500 }} value="05:00">05:00</option>
                                            <option  {{ a0530 }} value="05:30">05:30</option>
                                            <option  {{ a0600 }} value="06:00">06:00</option>
                                            <option  {{ a0630 }} value="06:30">06:30</option>
                                            <option  {{ a0700 }} value="07:00">07:00</option>
                                            <option  {{ a0730 }} value="07:30">07:30</option>
                                            <option  {{ a0800 }} value="08:00">08:00</option>
                                            <option  {{ a0830 }} value="08:30">08:30</option>
                                            <option  {{ a0900 }} value="09:00">09:00</option>
                                            <option  {{ a0930 }} value="09:30">09:30</option>
                                            <option  {{ a1000 }} value="10:00">10:00</option>
                                            <option  {{ a1030 }} value="10:30">10:30</option>
                                            <option  {{ a1100 }} value="11:00">11:00</option>
                                            <option  {{ a1130 }} value="11:30">11:30</option>
                                            <option  {{ a1200 }} value="12:00">12:00</option>
                                            <option  {{ a1230 }} value="12:30">12:30</option>
                                            <option  {{ a1300 }} value="13:00">13:00</option>
                                            <option  {{ a1330 }} value="13:30">13:30</option>
                                            <option  {{ a1400 }} value="14:00">14:00</option>
                                            <option  {{ a1430 }} value="14:30">14:30</option>
                                            <option  {{ a1500 }} value="15:00">15:00</option>
                                            <option  {{ a1530 }} value="15:30">15:30</option>
                                            <option  {{ a1600 }} value="16:00">16:00</option>
                                            <option  {{ a1630 }} value="16:30">16:30</option>
                                            <option  {{ a1700 }} value="17:00">17:00</option>
                                            <option  {{ a1730 }} value="17:30">17:30</option>
                                            <option  {{ a1800 }} value="18:00">18:00</option>
                                            <option  {{ a1830 }} value="18:30">18:30</option>
                                            <option  {{ a1900 }} value="19:00">19:00</option>
                                            <option  {{ a1930 }} value="19:30">19:30</option>
                                            <option  {{ a2000 }} value="20:00">20:00</option>
                                            <option  {{ a2030 }} value="20:30">20:30</option>
                                            <option  {{ a2100 }} value="21:00">21:00</option>
                                            <option  {{ a2130 }} value="21:30">21:30</option>
                                            <option  {{ a2200 }} value="22:00">22:00</option>
                                            <option  {{ a2230 }} value="22:30">22:30</option>
                                            <option  {{ a2300 }} value="23:00">23:00</option>
                                            <option  {{ a2330 }} value="23:30">23:30</option>
                                        </select>
                                    </div><!-- /.form-group -->
                                    <div class="block-header white_txt">
                                    </div>
                                    <div class="form-group">
                                        <div class="form-group col-lg-7 col-md-7 col-sm-7 col-xs-7 no-padding-left">
                                            <input id="to" class="date_input" value="{{ date2 }}">
                                        </div><!-- /.form-group -->

                                        <div class="form-group col-lg-5 col-md-5 col-sm-5 col-xs-5 no-padding-right time_pick">
                                            <select name="year-to" id="totime" class="form-control select time_pickers ">
                                                <option  {{ b0001 }} value="00:01">00:01</option>
                                                <option  {{ b0030 }} value="00:30">00:30</option>
                                                <option  {{ b0100 }} value="01:00">01:00</option>
                                                <option  {{ b0130 }} value="01:30">01:30</option>
                                                <option  {{ b0200 }} value="02:00">02:00</option>
                                                <option  {{ b0230 }} value="02:30">02:30</option>
                                                <option  {{ b0300 }} value="03:00">03:00</option>
                                                <option  {{ b0330 }} value="03:30">03:30</option>
                                                <option  {{ b0400 }} value="04:00">04:00</option>
                                                <option  {{ b0430 }} value="04:30">04:30</option>
                                                <option  {{ b0500 }} value="05:00">05:00</option>
                                                <option  {{ b0530 }} value="05:30">05:30</option>
                                                <option  {{ b0600 }} value="06:00">06:00</option>
                                                <option  {{ b0630 }} value="06:30">06:30</option>
                                                <option  {{ b0700 }} value="07:00">07:00</option>
                                                <option  {{ b0730 }} value="07:30">07:30</option>
                                                <option  {{ b0800 }} value="08:00">08:00</option>
                                                <option  {{ b0830 }} value="08:30">08:30</option>
                                                <option  {{ b0900 }} value="09:00">09:00</option>
                                                <option  {{ b0930 }} value="09:30">09:30</option>
                                                <option  {{ b1000 }} value="10:00">10:00</option>
                                                <option  {{ b1030 }} value="10:30">10:30</option>
                                                <option  {{ b1100 }} value="11:00">11:00</option>
                                                <option  {{ b1130 }} value="11:30">11:30</option>
                                                <option  {{ b1200 }} value="12:00">12:00</option>
                                                <option  {{ b1230 }} value="12:30">12:30</option>
                                                <option  {{ b1300 }} value="13:00">13:00</option>
                                                <option  {{ b1330 }} value="13:30">13:30</option>
                                                <option  {{ b1400 }} value="14:00">14:00</option>
                                                <option  {{ b1430 }} value="14:30">14:30</option>
                                                <option  {{ b1500 }} value="15:00">15:00</option>
                                                <option  {{ b1530 }} value="15:30">15:30</option>
                                                <option  {{ b1600 }} value="16:00">16:00</option>
                                                <option  {{ b1630 }} value="16:30">16:30</option>
                                                <option  {{ b1700 }} value="17:00">17:00</option>
                                                <option  {{ b1730 }} value="17:30">17:30</option>
                                                <option  {{ b1800 }} value="18:00">18:00</option>
                                                <option  {{ b1830 }} value="18:30">18:30</option>
                                                <option  {{ b1900 }} value="19:00">19:00</option>
                                                <option  {{ b1930 }} value="19:30">19:30</option>
                                                <option  {{ b2000 }} value="20:00">20:00</option>
                                                <option  {{ b2030 }} value="20:30">20:30</option>
                                                <option  {{ b2100 }} value="21:00">21:00</option>
                                                <option  {{ b2130 }} value="21:30">21:30</option>
                                                <option  {{ b2200 }} value="22:00">22:00</option>
                                                <option  {{ b2230 }} value="22:30">22:30</option>
                                                <option  {{ b2300 }} value="23:00">23:00</option>
                                                <option  {{ b2330 }} value="23:30">23:30</option>                                                <option  {{ a0001 }} value="00:01">00:01</option>
                                            </select>
                                        </div><!-- /.form-group -->
                                        <div class="form-group">
                                            <button class="spinning btn-primary1 btn-primary-color uppercase"
                                                    onclick="submit_request(1);">Search now
                                            </button>
                                        </div>


                                    </div>
                                </div>

                            </div><!-- /#searcbox -->

                        </div>

                        <div class="col-lg-9 col-md-8 col-sm-7 hidden-xs white_txt center">
                            <div><h1>Car Rent – Search, Compare & Save</h1></div>
                            <div><h2>Compare 783 companies at over 46000 locations</h2></div>
                            <div class="cars">
                                <img src="images/1.png">
                                <img src="images/2.png">
                                <img src="images/3.png">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </header><!-- /#header -->


    <div class="infobar">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="contact pull-left">
                        <ol class="breadcrumb">
                            <li><a href="filter.html#">Home</a></li>
                        </ol>
                    </div><!-- /.contact -->
                    <div class="contact pull-right">
                        <ol class="social_icons">
                            <li><a href="filter.html#"><img class="img_sn" src="images/social_icons/Xing_256x256x32.png"
                                                            title="Xing"/></a></li>
                            <li><a href="filter.html#"><img class="img_sn"
                                                            src="images/social_icons/Instagram_64x64x32.png"
                                                            title="Instagram"/></a></li>
                            <li><a href="filter.html#"><img class="img_sn"
                                                            src="images/social_icons/GooglePlus_32x32x32.png"
                                                            title="Google+"/></a></li>
                            <li><a href="filter.html#"><img class="img_sn"
                                                            src="images/social_icons/Twitter_32x32x32.png"
                                                            title="Twitter"/></a></li>
                            <li><a href="filter.html#"><img class="img_sn"
                                                            src="images/social_icons/Facebook_64x64x32.png"
                                                            title="Facebook"/></a></li>
                        </ol>
                    </div>
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div><!-- /.infobar -->
    <div id="content" class="page-filter">
        <div class="section gray-light">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 sidebar">

                    {{ filter_html |raw }}

                    </div>
                    <div class="col-md-9">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="block block-margin sort">
                                    <div class="block-inner gray">
                                        <div class="pull-left">
                                            <p>
                                                {{ offer |raw }}
                                            </p>
                                        </div>
                                        <div class="pull-right">
                                            <ul class="select_display">
                                                <li><a href="{{ view_list |raw }}"><i class="list fa fa-align-justify"></i></a></li>
                                                <li><a href="{{ view_row |raw }}"><i class="rows fa fa-th-large"></i></a></li>
                                                <li><a href="{{ view_compact |raw }}"><i class="compact fa fa-th"></i></a></li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="main">
                            {{ cars_results|raw }}
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div id="filter-pager" class="block">
                                    <div class="block-inner">
                                        {{ page_list|raw }}

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /#main -->
                    </div>


                </div>
            </div>
        </div>
    </div>
    <!-- /#content -->
    <footer id="footer">
        <div class="container">
            <div class="footer-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 clearfix">
                            <div class="center">
                                © RentCar<span class="separator">/</span> <a href="#">Onspire</a> <span
                                        class="separator">/</span> All rights reserved
                            </div><!-- /.pull-left -->
                        </div><!-- /.col-md-12 -->
                    </div><!-- /.row -->
                </div><!-- /.container -->
            </div><!-- /.footer-bottom -->
    </footer><!-- /#footer -->

{% endblock %}
    {% block javascripts %}
        <script src="/js/rent_custom.js"></script>
    {% endblock %}