@extends('layouts.master', ['header_info' => true])

@section('title', '- Startseite')

@section('description', 'Alle Veranstaltungen auf einen Blick! Hier finden Sie das neue Angebot der Haspa Filialen der Zukunft. Bequem online anmelden!')

@section('content')
    <div class="row justify-content-center search_options_area">
        <div class="col-xl-2 col-sm-11">
            <div class="search_option">
                <input id="search_text" type="text" placeholder="Suchbegriff eingeben" />
            </div>
        </div>
        <div class="col-xl-2 col-sm-11">
            <div class="search_option dropdown_option district_option">
                <span>Stadtteil(e) wählen</span>
                <div class="dropdown_control">
                    <i class="fas fa-angle-down"></i>
                </div>
                <div class="clear_dropdown">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-sm-11">
            <div class="search_option dropdown_option zipcode_option">
                <span>PLZ wählen</span>
                <i class="fas fa-angle-down"></i>
                <div class="clear_dropdown">
                    <i class="fas fa-times"></i>
                </div>
            </div>
            <div class="zipcode_select_area">
                <input type="text" id="zipcode" />
                <p>Im Umkreis von:</p>
                <div class="distance_options">
                    <span distance="1">1 km</span>
                    <span class="active" distance="5">5 km</span>
                    <span distance="10">10 km</span>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-11">
            <div class="search_option dropdown_option calendar_option">
                <div id="datepicker" placeholder="Datum wählen"></div>
                <i class="far fa-calendar-alt"></i>
                <div class="clear_dropdown">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-sm-11">
            <div class="search_option dropdown_option category_option">
                <span>Kategorie(n) wählen</span>
                <div class="dropdown_control">
                    <i class="fas fa-angle-down"></i>
                </div>
                <div class="clear_dropdown">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-sm-11 ">
            <div class="search_option event_search">
                <div class="btn btn-danger btn_event_search">
                    Suchen <i class="fas fa-chevron-circle-right"></i>
                </div>
            </div>
        </div>
        <div class="col-xl-9 col-sm-11"></div>
    </div>
    <div class="row event_list"></div>
@stop