{% extends 'front.html.twig' %}
{% block title %}  STEDIAM  {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}

{% block slider %}
    {% include 'contents/slider/slider.html.twig' %}
{% endblock %}

{% block body %}

    <!-- Section: home-boxes -->
    <section>
        <div class="container pb-0">
            <div class="section-content">
                <div class="row equal-height-inner">
                    <div class="col-sm-12 col-md-4 pr-0 pr-sm-15 sm-height-auto mt-sm-0" data-margin-top="-150px">
                        <div class="sm-height-auto bg-theme-colored-darker2">
                            <div class="p-30">
                                <h3 class="text-uppercase text-white mt-0" >Revue Magrébine</h3>
                                <div class="text-white descRevue" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
                                    odit unde dolor inventore autem quod vero incidunt labore sunt reprehenderit
                                    consectetur inventore autem quod vero incidunt</div>
                            </div>
                            <a  href="{{ path('revue_list') }}" class="btn btn-flat btn-theme-colored2" style="margin-left: 20px;"> En savoir plus  <span class="fa fa-angle-double-right"></span></a>

                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4 pl-0 pl-sm-15 pr-0 pr-sm-15 sm-height-auto mt-sm-0"
                         data-margin-top="-150px">
                        <div class="box-hover-effect play-button">
                            <div class="effect-wrapper">
                                <div class="thumb">
                                    <img class="img-fullwidth" src="{{ asset('assets/images/about/p1.jpg') }}" alt="project">
                                </div>
                                <div class="overlay-shade bg-theme-colored2-transparent-9"></div>
                                <div class="text-holder text-holder-middle">
                                    <a href="https://www.youtube.com/watch?v=F3QpgXBtDeo" data-lightbox-gallery="youtube-video" title="Youtube Video"><img alt="" src="{{ asset('assets/images/play-button/s8.png') }}"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4 pl-0 pl-sm-15 sm-height-auto mt-sm-0" data-margin-top="-150px">
                        <div class="sm-height-auto bg-theme-colored-darker2">
                            <div class="p-30">
                                <h3 class="text-uppercase text-white mt-0">Collége Endocrino</h3>
                                <div class="text-white descRevue"  style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
                                    odit unde dolor inventore autem quod vero incidunt labore sunt reprehenderit
                                    consectetur inventore autem quod vero incidunt</div>
                            </div>
                            <a  href="{{ path('college_list') }}" class="btn btn-flat btn-theme-colored2" style="margin-left: 20px;" >En savoir plus   <span class="fa fa-angle-double-right"></span></a>

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

    <!-- Section: about -->
    <section id="about">
        <div class="container pb-70">
            <div class="row">
                <div class="col-md-8 wow fadeInLeft animation-delay1">
                    <h2 class="mt-0">Qui somme nous ? <span class="text-theme-colored2"></span></h2>
                    <div class="descApropos">{{ apropos.description [:650]| raw }}...</div>
                    <a class="btn btn-flat btn-theme-colored2"
                       href="{{ path('about') }}">

                        En savoir plus <span class="fa fa-angle-double-right"></span></a>
                    <br>
                </div>
                <div class="col-md-4 wow fadeInRight animation-delay4">
                    <img src="{{ asset('uploads/images/'~apropos.file) }}" alt="" style="padding-top: 61px;">
                </div>
            </div>
        </div>
    </section>



    <!--start blog Section-->
    <section id="blog" class="bg-lighter">
        <div class=" container pt-70 pb-70">
            <div class="section-title text-center mt-0">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h2 class="mt-0 line-height-1 text-uppercase">Dernièrs
                            <span
                                    class="text-theme-colored2">Evénements</span></h2>
                        <div class="title-icon">
                            <img class="mb-10" src="{{ asset('assets/images/title-icon.png') }}" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-content">
                <div class="row">
                    {% for events in events %}
                        <div class="col-sm-6 col-md-4">
                            <article class="post clearfix maxwidth500 mb-sm-30">
                                <div class="entry-header">
                                    <div class="post-thumb">
                                        <img src="{{ asset('uploads/images/'~events.picture) }}" alt=""
                                             class=" imgEvent img-responsive">
                                    </div>
                                    <div class="entry-date media-left text-center flip bg-theme-colored2 pt-5 pr-15 pb-5 pl-15">
                                        <ul>
                                            <li class="font-16 text-white font-weight-600">{{ events.startDate | date('d') }}</li>
                                            <li class="font-12 text-white text-uppercase">{{ events.startDate | localizeddate('none', 'none', 'fr', null, 'MMMM') }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="entry-content bg-white p-30">
                                    <h3 class="  entry-title mt-0"><a
                                                href="{{ path('event_detail', {'id': events.id}) }}">{{ events.title }}</a>
                                    </h3>
                                    <h5>
                                        <span class="fa fa-calendar"> {{ events.startDate |date('d/m/Y') }} - {{ events.endDate| date('d/m/Y') }} - <span
                                                    class="fa fa-map-marker"></span>  {{ events.place }}</span>
                                    </h5>
                                    <div class="des_event" style="text-align: justify;">{{ events.description[:100] | raw }}...</div>

                                    <div class="">
                                        <a class="btn btn-theme-colored2 mt-10 mb-0 pull-right flip"
                                           href="{{ path('event_detail', {'id': events.id}) }}">Détails
                                            <span class="fa fa-angle-double-right"></span></a>
                                    </div>

                                    <div class="clearfix"></div>
                                </div>
                            </article>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>


    <section id="team">

        <div class="container pt-70 pb-70">
            <div class="section-title text-center  mt-0">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h2 class="mt-0 line-height-1 text-uppercase">Notre <span
                                    class="text-theme-colored2">Bureau</span></h2>
                        <div class="title-icon">
                            <img class="mb-10 " src="{{ asset('assets/images/title-icon.png') }}" alt="">
                        </div>

                    </div>
                </div>
            </div>
            <div class="row mtli-row-clearfix">
                <div class="col-md-12">
                    <div class="owl-carousel-4col">
                        {% for teams in teams %}
                            <div class="item bg-lighter">
                                <div class="team-block maxwidth500 mb-sm-30">
                                    <div class="team-upper-block">
                                        <img class="img-responsive img_team_home" src="{{ asset('uploads/images/'~teams.picture) }}" alt="" >
                                        <ul class="styled-icons icon-bordered icon-circled icon-theme-colored pt-5">
                                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                            <li><a href="#"><i class="fa fa-skype"></i></a></li>
                                        </ul>
                                    </div>
                                    <div class="team-lower-block text-center border-bottom-2px border-theme-colored2 mt-0 pt-0 p-20">
                                        <h3><a href="#">Dr. {{ teams.fullName }}</a></h3>
                                        <div class="donneBureau">
                                            <p><i class="fa fa-envelope" style="color:  #20529c"></i> {{ teams.email }}</p>
                                            <p><i class="fa fa-briefcase" style="color:  #20529c"></i> {{ teams.function }}</p>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Section: News -->
    <section id="services" class="bg-silver-light">
        <div class="container pb-40">
            <div class="section-title text-center">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h2 class="text-uppercase mt-0 line-height-1">Dernières
                            <span
                                    class="text-theme-colored2">Actualités</span></h2>
                        {#<div class="title-icon">#}
                        {#<img class="mb-10" src="{{ asset('assets/images/title-icon.png') }}" alt="">#}
                        {#</div>#}
                        {#<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!#}
                        {#</p>#}
                    </div>
                </div>
            </div>
            <div class="section-content">
                <div class="row">
                    {% for news in news %}
                        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                            <div class="icon-box text-center bg-white bg-hover-theme-colored2 mb-30 p-30">
                                <i class="fa fa-globe font-weight-600 text-theme-colored2 font-38"></i>
                                <h3 class="mt-20">{{ news.title }}</h3>
                                <div class="desc_new" style="text-align: justify;">{{ news.description[:100] | raw }}...
                                </div>
                                <span>
                                        <br/>
                                            <a class="  mt-10 mb-0 pull-right flip"
                                               href="{{ path('actualite_detail', {'id': news.id}) }}">
                                                <b>En savoir plus </b><span class="fa fa-angle-double-right"></span></a>
                                        <br/>
                                    </span>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>



{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}