{% extends 'login.html.twig' %}
{% block content %}
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <h3>
                        Szukaj ofert z całej Polski
                    </h3>
                </div>

                <div class="body">
                    <div class="row clearfix">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="card">
                                <div class="body">
                                    <!-- Nav tabs -->
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li role="presentation" class="active">
                                            <a href="#home_with_icon_title" data-toggle="tab">
                                                <i class="material-icons">home</i> Wydarzenia
                                            </a>
                                        </li>
                                        <li role="presentation">
                                            <a href="#profile_with_icon_title" data-toggle="tab">
                                                <i class="material-icons">settings</i> Miejsce
                                            </a>
                                        </li>
                                        <li role="presentation">
                                            <a href="#messages_with_icon_title" data-toggle="tab">
                                                <i class="material-icons">email</i> Usługa
                                            </a>
                                        </li>
                                        <li role="presentation">
                                            <a href="#settings_with_icon_title" data-toggle="tab">
                                                <i class="material-icons">face</i>
                                                Osoba
                                            </a>
                                        </li>
                                    </ul>

                                    <!-- Tab panes -->
                                    <div class="tab-content">
                                        <div role="tabpanel" class="tab-pane fade in active" id="home_with_icon_title">
                                            <b>Szukaj wydarzenia</b>
                                            <p>
                                            <div class="row clearfix">
                                                <div class="col-md-2 col-md-offset-1">
                                                    <div class="info-box-2 bg-deep-purple" id="categoryOne">
                                                        <div class="icon">
                                                            <i class="material-icons">face</i>
                                                        </div>
                                                        <div class="content">
                                                            <div class="text">Medytacja</div>
                                                            <div class="number count-to" data-from="0" data-to="125" data-speed="1000" data-fresh-interval="20">125</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="info-box-2 bg-indigo" id="categoryTwo">
                                                        <div class="icon">
                                                            <i class="material-icons">face</i>
                                                        </div>
                                                        <div class="content">
                                                            <div class="text">Psychologia</div>
                                                            <div class="number count-to" data-from="0" data-to="56" data-speed="1000" data-fresh-interval="20">125</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="info-box-2 bg-light-blue">
                                                        <div class="icon">
                                                            <i class="material-icons">accessibility</i>
                                                        </div>
                                                        <div class="content">
                                                            <div class="text">Zdrowie</div>
                                                            <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="info-box-2 bg-green">
                                                        <div class="icon ">
                                                            <i class="material-icons">face</i>
                                                        </div>
                                                        <div class="content">
                                                            <div class="text">Styl życia</div>
                                                            <div class="number count-to" data-from="0" data-to="140" data-speed="1000" data-fresh-interval="20">125</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="info-box-2 bg-orange">
                                                        <div class="icon">
                                                            <i class="material-icons">face</i>
                                                        </div>
                                                        <div class="content">
                                                            <div class="text">Twórczość</div>
                                                            <div class="number count-to" data-from="0" data-to="190" data-speed="1000" data-fresh-interval="20">125</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row carousel-row" id="carousel-row-one">
                                                <div class="col-md-12">

                                                    <div class="well">
                                                        <div id="myCarousel" class="carousel slide">




                                                            <!-- Carousel items -->
                                                            <div class="carousel-inner">
                                                                <div class="item active">
                                                                    <div class="row">
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-3 bg-deep-purple">
                                                                                <div class="icon navigator-help" data-topic="inteo">
                                                                                    <i class="material-icons">help_outline</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Inteo</div>
                                                                                    <div class="number count-to" data-from="0" data-to="125" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Joga</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">12</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Medytacja w innej tradycji</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">15</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Mindfulness</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!--/row-->
                                                                </div>
                                                                <!--/item-->
                                                                <div class="item">
                                                                    <div class="row">
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Osho</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">15</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Qigong</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Rebirthing</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Tai chi</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!--/row-->
                                                                </div>
                                                                <!--/item-->
                                                                <!--/item-->
                                                                <div class="item">
                                                                    <div class="row">
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Tantra</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">15</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Tao</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Transcendentalna medytacja</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Vipassana</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!--/row-->
                                                                </div>
                                                                <!--/item-->
                                                                <!--/item-->
                                                                <div class="item">
                                                                    <div class="row">
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Zen</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">15</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-deep-purple">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Zen Coaching</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!--/row-->
                                                                </div>
                                                                <!--/item-->
                                                            </div>
                                                            <!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

                                                            <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
                                                        </div>
                                                        <!--/myCarousel-->
                                                    </div>
                                                    <!--/well-->
                                                </div>
                                            </div>
                                            <!-- Druga karuzela -->
                                            <div class="row carousel-row" id="carousel-row-two" style="display: none;">
                                                <div class="col-md-12">

                                                    <div class="well">
                                                        <div id="myCarouselTwo" class="carousel slide">

                                                            <!-- Carousel items -->
                                                            <div class="carousel-inner">
                                                                <div class="item active">
                                                                    <div class="row">
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Coaching</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">11</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Focusing</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">12</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Grupa wsparcia</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">15</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Mediacje</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!--/row-->
                                                                </div>
                                                                <!--/item-->
                                                                <div class="item">
                                                                    <div class="row">
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Mentoring</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">15</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Metoda Lowena</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">NVC</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Pomoc psychologiczna</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!--/row-->
                                                                </div>
                                                                <div class="item">
                                                                    <div class="row">
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Psychoedukacja</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">15</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Psychoterapia</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Somatic Experiencing</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="info-box-2 bg-indigo">
                                                                                <div class="icon">
                                                                                    <i class="material-icons">accessibility</i>
                                                                                </div>
                                                                                <div class="content">
                                                                                    <div class="text">Ustawienia rodzinne BH</div>
                                                                                    <div class="number count-to" data-from="0" data-to="89" data-speed="1000" data-fresh-interval="20">125</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!--/row-->
                                                                </div>
                                                                <!--/item-->
                                                            </div>
                                                            <!--/carousel-inner--> <a class="left carousel-control" href="#myCarouselTwo" data-slide="prev">‹</a>

                                                            <a class="right carousel-control" href="#myCarouselTwo" data-slide="next">›</a>
                                                        </div>
                                                        <!--/myCarousel-->
                                                    </div>
                                                    <!--/well-->
                                                </div>
                                            </div>
                                            <div class="row clearfix">
                                                <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12 col-md-offset-2 col-lg-offset-2">
                                                    <div class="card" id="navigator-panel">
                                                        <div class="header">
                                                            <h2>
                                                                Wybierz ? aby dowiedzieć się więcej o konkretnym dziale
                                                            </h2>
                                                        </div>
                                                        <div class="body" id="navigator-panel-body">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row clearfix">
                                                    <div class="col-md-10 col-md-offset-1">
                                                        <form class="form-inline">
                                                            <div class="row clearfix">
                                                                <div class="col-md-12">
                                                                    <div class="form-group">
                                                                        <div class="form-line">
                                                                            <input type="text" class="form-control" id="main-localization" placeholder="Szukaj lokalizacji">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                                <div class="row clearfix">
                                                    <div class="col-md-10 col-md-offset-1">
                                                        <div class="card main-search-box bg-deep-orange"">
                                                            <div class="content">Szukaj</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                </p>
                                            </div>
                                        </div>
                                            <div role="tabpanel" class="tab-pane fade" id="profile_with_icon_title">
                                                <b>Szukaj miejsca</b>
                                                <p>
                                                    Lorem ipsum dolor sit amet, ut duo atqui exerci dicunt, ius impedit mediocritatem an. Pri ut tation electram moderatius.
                                                    Per te suavitate democritum. Duis nemore probatus ne quo, ad liber essent aliquid
                                                    pro. Et eos nusquam accumsan, vide mentitum fabellas ne est, eu munere gubergren
                                                    sadipscing mel.
                                                </p>
                                            </div>
                                            <div role="tabpanel" class="tab-pane fade" id="messages_with_icon_title">
                                                <b>Szukaj usługi</b>
                                                <p>
                                                    Lorem ipsum dolor sit amet, ut duo atqui exerci dicunt, ius impedit mediocritatem an. Pri ut tation electram moderatius.
                                                    Per te suavitate democritum. Duis nemore probatus ne quo, ad liber essent aliquid
                                                    pro. Et eos nusquam accumsan, vide mentitum fabellas ne est, eu munere gubergren
                                                    sadipscing mel.
                                                </p>
                                            </div>
                                            <div role="tabpanel" class="tab-pane fade" id="settings_with_icon_title">
                                                <b>Szukaj osoby</b>
                                                <p>
                                                    Lorem ipsum dolor sit amet, ut duo atqui exerci dicunt, ius impedit mediocritatem an. Pri ut tation electram moderatius.
                                                    Per te suavitate democritum. Duis nemore probatus ne quo, ad liber essent aliquid
                                                    pro. Et eos nusquam accumsan, vide mentitum fabellas ne est, eu munere gubergren
                                                    sadipscing mel.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- #END# Tabs With Icon Title -->

                    </div>
                </div>
            </div>
        </div>
    {% endblock content %}
    {% block javascript %}
        {{ parent() }}
        <script type="text/javascript">
            $(function () {
                $('#categoryOne').click(function () {
                    $('.carousel-row').hide();
                    $('#carousel-row-one').show();
                });
                $('#categoryTwo').click(function () {
                    $('.carousel-row').hide();
                    $('#carousel-row-two').show();
                });
                $('.navigator-help').click(function () {
                    var topic = $(this).data('topic');
                    $('#navigator-panel-body').html('Quis pharetra a pharetra fames blandit. Risus faucibus velit Risus imperdiet mattis neque volutpat, etiam lacinia netus dictum magnis per facilisi sociosqu. Volutpat. Ridiculus nostra.');
                });
            });
        </script>
    {% endblock %}