{% extends 'front.html.twig' %}
{% block title %} Médias {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block body %}


    <div class="main-content">
        <section class="inner-header divider parallax layer-overlay overlay-white-8">
            <div class="container pt-60 pb-60">
                <!-- Section Content -->
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-12 text-center" style="margin-top: -45px;">
                            <h2 class="title bg-text-new">Média</h2>
                            <ol class="breadcrumb text-center text-black mt-10">
                                <li><a href="{{ path('home') }}">Accueil</a></li>
                                <li class="bg-text-new">Média</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {% if nbrMedias == 0 %}
        <section>
            <div class="container pb-0 pt-110">
                <div class="row equal-height-inner">
                    <section class="noData">
                        <div class="section-title text-center">
                            <div class="row">
                                <div class="col-md-8 col-md-offset-2">
                                    <h3 class="text-uppercase mt-0 bg-text-new line-height-1">Aucune <span
                                                class="">donnée disponible</span>
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>

        {% else %}
        <div class="container">
            <div class="row" id="searchconf">
                <div class="col-md-6 col-md-offset-3">
                    <!-- Mailchimp Subscription Form-->
                    <form id="" class="newsletter-form mt-40" method="get" autocomplete="off"
                          action="{{ path('media_search') }}">
                        <div class="row">

                        </div>
                        <div class="">

                        </div>
                        <div class="col-sm-5">
                            <div id="basicExample" class="input-group ">
                                <input type="text" class="form-control input-search date " name="date" value="">
                                <div class="input-group-addon" style="background-color: #118d8c; color: white;">
                                    <span class="glyphicon glyphicon-calendar "></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-7">
                            <div class="input-group">
                                <input type="text" id="search" data-path="" data-height="45px"
                                       class="form-control input-search input-lg" placeholder="Recherche"
                                       name="search" value="">
                                <span class="input-group-btn">
                                                          <button type="submit"
                                                                  id="btn-search"
                                                                  class="btn   btn-lg m-0"
                                                                  data-height="45px"><i
                                                                      class="fa fa-search"></i> </button>
                                                     </span>
                            </div>
                        </div>

                    </form>
                </div>

            </div>
        </div>

        <!-- Content media Start -->
        <section>
            <div class="container">
                <div class="row multi-row-clearfix">
                    <div class="blog-posts">

                        {% for media in medias %}


                            <div class="col-md-6">
                                <article class="post clearfix mb-30 bg-lighter">

                                    <div class="entry-header"
                                         style="max-width: 100% ; min-height: 385px; object-fit: cover;">
                                        <div class="post-thumb thumb">
                                            {% if media.picture == null %}

                                                <iframe
                                                        style="min-height: 385px !important; min-width: 100% !important;"

                                                        src="https://www.youtube.com/embed/{{ media.url|slice(32, 50) }}"
                                                        frameborder="0"
                                                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                                        allowfullscreen class="img-responsive "></iframe>



                                            {% else %}
                                                <a href="" target="_blank">
                                                    {#385#}
                                                    <img src="{{ asset('uploads/images/'~ media.picture) }}" alt=""
                                                         style="min-width: 100% ; min-height: 385px;"
                                                         class="img-responsive  img-media">

                                                </a>
                                            {% endif %}
                                        </div>
                                    </div>

                                    <div class="entry-content border-1px p-20 pr-10">
                                        <div class="entry-meta media mt-0 no-bg no-border">
                                            <div class="entry-date media-left text-center flip  pt-5 pr-15 pb-5 pl-15 colorpremiere" >
                                                <ul>
                                                    <li class="font-16 text-white font-weight-600">{{ media.date | date('d') }}</li>
                                                    <li class="font-12 text-white text-uppercase">{{ media.date |localizeddate('none', 'none', 'fr', null, ' MMM ') }}</li>
                                                </ul>
                                            </div>
                                            <div class="media-body pl-15" style="height: 190px;">
                                                <div class="event-content pull-left flip">
                                                    <h4 class="entry-title text-white text-uppercase m-0 mt-5">
                                                        <a href="{{ media.url }}" target="_blank" class="bg-text-new">
                                                            {{ media.title }}
                                                        </a>
                                                    </h4>
                                                    <div class="">
                                                        <h5>
                                                            <span class="fa fa-calendar"></span>{{ media.date | date ('d/m/y') }}
                                                        </h5>
                                                    </div>


                                                    <div class="desc_media_list"> {{ media.description[:150] | raw }}...
                                                    </div>

                                                    <div class="pull-left brnsavoirplusMedia">
                                                        <a class="pull-left"
                                                           href="{{ path('media_detail', {'id' : media.id}) }}"
                                                           role="button"><b>En savoir plus <span
                                                                        class="fa fa-angle-double-right"></span></b></a>

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


                                        </div>

                                    </div>
                                </article>
                            </div>


                        {% endfor %}
                        {% endif %}


                    </div>
                </div>
            </div>
        </section>
        <section class="container">
            <div class="row price_padng pull-down-20 pull-right">
                <div class="col-md-12 col-xs-12">
                    <nav class="pdg-tp-20 " aria-label="Page navigation">
                        {{ knp_pagination_render(medias) }}
                    </nav>
                </div>
            </div>
        </section>
    </div>

    <!-- Content Section End -->

{% endblock %}

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