{% 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">Média</h2>
                        <ol class="breadcrumb text-center text-black mt-10">
                            <li><a href="{{ path('home') }}">Accueil</a></li>
                            <li class="active text-theme-colored">Média</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="container">
        <div class="row" id="searchconfMedia">
            <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 class="form-group">
                            <div class="input-group  date " data-provide="datepicker" id="">
                                <input type="text" class="form-control datepicker input-search" name="date">

                                <div class="input-group-addon" style="background-color: #20529c; color: white;">
                                    <span class="glyphicon glyphicon-calendar "></span>
                                </div>
                            </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 -->

    {% 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 line-height-1">Aucune <span class="text-theme-colored2">donnée disponible</span>
                                </h3>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        {% else %}
        <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 %}

                                            {#<div class="" style="height: 385px">#}
                                            <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>

                                            {#</div>#}


                                        {% else %}
                                            <a href="" target="_blank">
                                                {#385#}
                                                <img src="{{ asset('uploads/images/'~ media.picture) }}" alt=""
                                                     style="min-width: 100% ; max-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 bg-theme-colored pt-5 pr-15 pb-5 pl-15">
                                            <ul>
                                                <li class="font-16 text-white font-weight-600">{{ media.createdAt | date('d') }}</li>
                                                <li class="font-12 text-white text-uppercase">{{ media.createdAt |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">
                                                        {{ media.title }}
                                                    </a>
                                                </h4>
                                                <div class="">
                                                    <h5>
                                                        <span class="fa fa-calendar"></span>{{ media.createdAt | 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 class="row">#}
                    {#<div class="col-sm-12">#}
                    {#<nav>#}
                    {#<ul class="pagination theme-colored pull-right xs-pull-center mb-xs-40">#}
                    {#{{ knp_pagination_render(medias) }}#}

                    {#</ul>#}
                    {#</nav>#}
                    {#</div>#}
                    {#</div>#}
                </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>


    <!-- Content Section End -->

    {% endblock %}

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