{% extends "frontend/base.html" %}
{% load static %}
{% load i18n %}
{% load testimonials %}
{% load dbsetting %}
{% load offeroptions %}
{% block "content" %}
        <!--========================= FLEX SLIDER =====================-->
        <section class="flexslider-container" id="flexslider-container-1">
        
            <div class="flexslider slider" id="slider-1">
                <ul class="slides">
                    
                    <li class="item-1" style="background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url({% static "frontend/images/stgilgen.jpg" %}) 50% 0%;background-size:cover;
                        height:100%;">
                        <div class=" meta">         
                            <div class="container">
                                <h2>{% trans "Willkommen bei JourneyJoker" %}</h2>
                                <h1>{% trans "Mein Urlaub nach Maß" %}</h1>
                                <a href="#" class="btn btn-default">{% trans "Wie geht das?" %}</a>
                            </div><!-- end container -->  
                        </div><!-- end meta -->
                    </li><!-- end item-1 -->
                    
                    <!--<li class="item-2" style="background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url({% static "frontend/images/homepage-slider-1.jpg" %}) 50% 0%;background-size:cover;
                        height:100%;">
                        <div class=" meta">         
                            <div class="container">
                                <h2>Discover</h2>
                                <h1>Australia</h1>
                                <a href="#" class="btn btn-default">View More</a>
                            </div>
                        </div>
                    </li>-->
                   
                </ul>
            </div><!-- end slider -->
            
            <div class="search-tabs" id="search-tabs-1">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <ul class="nav nav-tabs justify-content-center">
                                <li class="nav-item active"><div style="background-color: white;" class="nav-link" onclick="return false;" href="#"><span><i class="fa fa-building"></i></span><span class="d-md-inline-flex d-none st-text">Angebote einholen</span></div></li>
                           </ul>
                            <div class="tab-content">
        
                                <div id="flights" class="tab-pane in active">
                                    <form method="POST" action="{% url "auction:create_inquiry" %}">
                                        {% csrf_token %}
                                        <div class="row">
        
                                            <div class="col-12 col-md-12 col-lg-5 col-xl-4">
                                                <div class="row">
                                                
                                                    <div class="col-12 col-md-6 col-lg-6">
                                                        <div class="form-group left-icon">
                                                            <input id="id_destination_name" name="destination_name" type="text" class="form-control" placeholder="{% trans "Zielort" %}" >
                                                            <input id="id_destination_lat" name="destination_lat" type="text" style="display: none;">
                                                            <input id="id_destination_lon" name="destination_lon" type="text" style="display: none;">
                                                            <i class="fa fa-map-marker"></i>
                                                        </div>
                                                    </div><!-- end columns -->
                                                    
                                                    <div class="col-12 col-md-6 col-lg-6">
                                                        <div class="form-group left-icon">
                                                            <input id="id_amount" name="amount" type="number" step="1" class="form-control" placeholder="{% trans "Budget" %}" >
                                                            <i class="fa fa-euro-sign"></i>
                                                        </div>
                                                    </div><!-- end columns -->
        
                                                </div><!-- end row -->                                
                                            </div><!-- end columns -->
                                            
                                            <div class="col-12 col-md-12 col-lg-5 col-xl-4">
                                                <div class="row">
                                                
                                                    <div class="col-6 col-md-6 col-lg-6">
                                                        <div class="form-group left-icon">
                                                            <input id="id_first_date" name="first_date" type="text" class="form-control dpd1" placeholder="{% trans "Anreise" %}" >
                                                            <i class="fa fa-calendar"></i>
                                                        </div>
                                                    </div><!-- end columns -->
                                                    
                                                    <div class="col-6 col-md-6 col-lg-6">
                                                        <div class="form-group right-icon">
                                                            <select id="id_adults" name="adults" class="form-control">
                                                                <option value="0" selected>{% trans "Mindestdauer" %}</option>
                                                                <option value="0">Egal!</option>
                                                                <option value="1">1 Nacht</option>
                                                                <option value="2">2 Nächte</option>
                                                                <option value="3">3 Nächte</option>
                                                                <option value="4">4 Nächte</option>
                                                                <option value="5">5 Nächte</option>
                                                                <option value="6">6 Nächte</option>
                                                                <option value="7">7 Nächte</option>
                                                                <option value="8">8 Nächte</option>
                                                                <option value="9">9 Nächte</option>
                                                                <option value="10">10 Nächte</option>
                                                            </select>
                                                            <i class="fa fa-angle-down"></i>
                                                        </div>
                                                    </div><!-- end columns -->
        
                                                </div><!-- end row -->                                
                                            </div><!-- end columns -->
                                            
                                            <div class="col-12 col-md-12 col-lg-2 col-xl-2">
                                                <div class="row">
                                                    <div class="col-6 col-md-6 col-lg-6">
                                                        <div class="form-group right-icon">
                                                            <select id="id_adults" name="adults" class="form-control">
                                                                <option value="1" selected>{% trans "Erwachsene" %}</option>
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                            </select>
                                                            <i class="fa fa-angle-down"></i>
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-md-6 col-lg-6">
                                                        <div class="form-group right-icon">
                                                            <select id="id_children" name="children" class="form-control">
                                                                <option value="0" selected>{% trans "Kinder" %}</option>
                                                                <option value="0">0</option>
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                            </select>
                                                            <i class="fa fa-angle-down"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div><!-- end columns -->
                                            
                                            <div class="col-12 col-md-12 col-lg-12 col-xl-2 search-btn">
                                                <button class="btn btn-orange">{% trans "Los!" %}</button>
                                            </div><!-- end columns -->
                                            
                                        </div><!-- end row -->
                                    </form>
                                </div><!-- end flights -->
                                
                            </div><!-- end tab-content -->
                            
                        </div><!-- end columns -->
                    </div><!-- end row -->
                </div><!-- end container -->
            </div><!-- end search-tabs -->
            
        </section><!-- end flexslider-container -->
        
        
        <!--=============== HOTEL OFFERS ===============-->
        <section id="hotel-offers" class="section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="page-heading">
                            <h2>Teilnehmende Hotels</h2>
                            <hr class="heading-line" />
                        </div><!-- end page-heading -->
                        
                        <div class="owl-carousel owl-theme owl-custom-arrow" id="owl-hotel-offers">
                            
                            <div class="item">
                                <div class="main-block hotel-block">
                                    <div class="main-img">
                                        <a href="#">
						                    <img src="{% static "frontend/images/hotel-1.jpg" %}" class="img-fluid" alt="hotel-img" />
                                        </a>
                                        <div class="main-mask">
                                            <ul class="list-unstyled list-inline offer-price-1">
						<li class="list-inline-item price">12<span class="divider">|</span><span class="pkg">Buchungen diese Woche</span></li>
                                                <li class="list-inline-item rating">
                                                    {% autoescape off %}{% stars 5 "orange" %}{% endautoescape %}
                                                    {% autoescape off %}{% hearts 5 "red" %}{% endautoescape %}
                                                </li>
                                            </ul>
                                        </div><!-- end main-mask -->
                                    </div><!-- end offer-img -->
                                    
                                    <div class="main-info hotel-info">
                                        <div class="arrow">
                                            <a href="#"><span><i class="fa fa-angle-right"></i></span></a>
                                        </div><!-- end arrow -->
                                        
                                        <div class="main-title hotel-title">
                                            <a href="#">Herta Berlin Hotel</a>
                                            <p>1020 Wien</p>
                                        </div><!-- end hotel-title -->
                                    </div><!-- end hotel-info -->
                                </div><!-- end hotel-block -->
                            </div><!-- end item -->

                        </div><!-- end owl-hotel-offers -->
                        
                        <div class="view-all text-center">
                            <a href="#" class="btn btn-orange">{% trans "Alle anzeigen" %}</a>
                        </div><!-- end view-all -->
                    </div><!-- end columns -->
                </div><!-- end row -->
            </div><!-- end container -->
        </section><!-- end hotel-offers -->                           
        
        <!--==================== HIGHLIGHTS ====================-->
        <section id="highlights" class="section-padding back-size"> 
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                        <div class="row">
                            
                            <div class="col-12 col-md-4 col-lg-4 col-xl-4 d-flex justify-content-center">
                                <div class="highlight-box">
                                    <div class="h-icon">
                                        <span><i class="fa fa-user-astronaut"></i></span>
                                    </div><!-- end h-icon -->
                                    
                                    <div class="h-text">
                                        <span class="numbers">2496</span>
                                        <p>{% trans "zufriedene Kunden" %}</p>
                                    </div><!-- end h-text -->                           
                                </div><!-- end highlight-box -->                       
                            </div><!-- end columns -->
                            
                            <div class="col-12 col-md-4 col-lg-4 col-xl-4 d-flex justify-content-center">
                                <div class="highlight-box">
                                    <div class="h-icon">
                                        <span><i class="fa fa-concierge-bell"></i></span>
                                    </div><!-- end h-icon -->
                                    
                                    <div class="h-text cruise">
                                        <span class="numbers">1906</span>
                                        <p>{% trans "teilnehmende Unterkünfte" %}</p> 
                                    </div><!-- end h-text -->                           
                                </div><!-- end highlight-box -->                       
                            </div><!-- end columns -->
                            
                            <div class="col-12 col-md-4 col-lg-4 col-xl-4 d-flex justify-content-center">
                                <div class="highlight-box">
                                    <div class="h-icon">
                                        <span><i class="fa fa-compass"></i></span>
                                    </div><!-- end h-icon -->
                                    
                                    <div class="h-text taxi">
                                        <span class="numbers">2033</span>
                                        <p>{% trans "gebuchte Reisen" %}</p>   
                                    </div><!-- end h-text -->                           
                                </div><!-- end highlight-box -->                       
                            </div><!-- end columns -->
                                
                        </div><!-- end row -->
                    </div><!-- end columns -->
                </div><!-- end row -->
            </div><!-- end container -->
        </section><!-- end highlights -->       
        
        <!--==================== TESTIMONIALS ====================-->
        <section id="testimonials" class="section-padding back-size">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="page-heading white-heading">
                            <h2>{% trans "Kundenmeinungen" %}</h2>
                            <hr class="heading-line" />
                        </div><!-- end page-heading -->
        
                        <div class="carousel slide" data-ride="carousel" id="quote-carousel">
                            <div class="carousel-inner text-center">
                                {% testimonials as test %}
                                {% for t in test %}
                            
                                <div class="carousel-item {% if forloop.first %}active{% endif %}">
                                    <blockquote>{{ t.text }}</blockquote>
                                    <div class="rating">
                                        {% autoescape off %}{% stars t.stars %}{% endautoescape %}
                                        {% autoescape off %}{% hearts t.hearts %}{% endautoescape %}
                                    </div>
                                    <small>{{ t.name }}</small>
                                </div><!-- end item -->
                                {% endfor %}
                                
                            </div><!-- end carousel-inner -->
                            
                            <ol class="carousel-indicators mx-auto">
                                {% for t in test %}
                                <li data-target="#quote-carousel" data-slide-to="{{ forloop.counter0 }}" class="active"><img src="{{ t.image.url }}" class="img-fluid d-block"  alt="client-img"></li>
                                {% endfor %}
                            </ol>
        
                        </div><!-- end quote-carousel -->
                    </div><!-- end columns -->
                </div><!-- end row -->
            </div><!-- end container -->
        </section><!-- end testimonials --> 
                
{% endblock %}
{% block "scripts" %}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={% dbsetting "google.api.key" %}&libraries=places"></script>
<script src="{% static "frontend/js/custom-autocomplete.js" %}"></script>
{% endblock %}