{% form_theme search_form 'default/form/theme.html.twig' %}

<section class="section fullscreen background start-slider">
    <div class="absolute-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <div class="home-message text-center">
                        <div class="home-info-box">
                           <div id="eKomiSeal_default" class="eKomi-header" style="padding-top: 5px;padding-left: 2px;">
                                    <img border="0" src="/bundles/app/images/logo-qualitaet.png" alt="Top Kundenservice" height="78">
                                </div>
                            <ul class="c4">
                                <li>Spezialist für Kulturreisen </li>
                                <li>Reiseexperte seit 1998</li>
                                <li>Beratung für individuelle Reisen</li>
                            </ul>
                        </div>
                    </div><!-- end homemessage -->
                </div><!-- end col -->
            </div><!-- end row -->
        </div><!-- end container -->
    </div>
    <div id="myCarousel" class="carousel slide">
        <!-- Indicators -->

        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('/bundles/app/images/travel/slider_aegypten.jpg');"></div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('/bundles/app/images/travel/slider_felsendom.jpg');"></div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('/bundles/app/images/travel/slider_petra.jpg');"></div>
            </div>
              <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('/bundles/app/images/travel/slider_strandkorb.jpg');"></div>
            </div>
              <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('/bundles/app/images/travel/slider_usedom.jpg');"></div>
            </div>

        </div>
    </div>
</section><!-- end section -->



<section class="nopadding absolute-sectionss">
    <div class="container-full absolute">
        <div class="container container-form">
            <div class="home-form">
                <!-- Nav tabs
                    Hier bitte die Tabs über Parameter Steuer, wenn JS aus.
                    Paramter an URL hängen und dann den jeweiligen Tab auf active setzen.
                -->
                <ul class="nav nav-tabs nav-justified" role="tablist">
                    <li class="active"><a href="#tab_01" aria-controls="tab_01" role="tab" data-toggle="tab">Kulturreisen</a></li>
                    <li><a href="/tt-suche">Pauschalreisen weltweit</a></li>
                </ul>

                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="tab_01">
                        <form class="bookform form-inline row st-search-form" action="/suche" method="get">
                            <div class="form-group col-md-3 col-sm-6 col-xs-12">
                                {{ form_field_pho(search_form.c) }}
                            </div>

                            <div class="form-group col-md-2 col-sm-6 col-xs-12">
                                {{ form_field_pho(search_form.b, 'Anreise') }}
                            </div>
                            <div class="form-group col-md-2 col-sm-6 col-xs-12">
                                {{ form_field_pho(search_form.e, 'Abreise') }}
                            </div>

                            <div class="form-group col-md-3 col-sm-6 col-xs-12">
                                <label class="sr-only" for="departure">Abfahrtsort</label>
                                <div class="dropdown form-bottom">
                                    <select id="departure" class="selectpicker" data-style="btn-white" data-dropup-auto="false">
                                        <option>beliebiger Abfahrtsort</option>
                                        <option>Basel</option>
                                        <option>Berlin</option>
                                        <option>Berlin Schönefeld</option>
                                        <option>Berlin Tegel</option>
                                        <option>Bonn</option>
                                        <option>Bremen</option>
                                        <option>Dresden</option>
                                        <option>Düsseldorf</option>
                                        <option>Eigenanreise</option>
                                        <option>Erfurt</option>
                                        <option>Frankfurt</option>
                                        <option>Friedrichshafen</option>
                                        <option>Genf</option>
                                        <option>Graz</option>
                                        <option>Hamburg</option>
                                        <option>Hannover</option>
                                        <option>Köln</option>
                                        <option>Leipzig</option>
                                        <option>Linz</option>
                                        <option>München</option>
                                        <option>Nürnberg</option>
                                        <option>Saarbrücken</option>
                                        <option>Salzburg</option>
                                        <option>Stuttgart</option>
                                        <option>Wien</option>
                                        <option>Zürich</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group col-md-2 col-sm-6 col-xs-12">
                                <button type="submit" class="btn btn-primary btn-block">suchen</button>
                            </div>
                        </form>
                    </div><!-- end tab-pane -->

                    <div role="tabpanel" class="tab-pane" id="tab_02">
                        {% include 'default/components/ttBodySearchForm.html.twig' %}
                    </div><!-- end tab-pane -->

                </div><!-- end tab-content -->
            </div><!-- end homeform -->
        </div>
    </div><!-- end container -->
</section><!-- end section -->