{% extends 'front.html.twig' %}
{% block title %} Media {% endblock %}
{% block stytesheets %}

    {{ parent() }}

{% endblock %}
{% block body %}

    <div class="main-content">
        <!-- Section: inner-header -->
        <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">{{ media.title }}</h2>
                            <ol class="breadcrumb text-center text-black mt-10">
                                <li><a href="{{ path('home') }}">Accueil</a></li>
                                <li class="bg-text-new">Media</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Section: Service details -->
        <section>
            <div class="container">
                <div class="section-content">
                    <div class="row">
                        <div class="col-xs-12 col-sm-8 col-md-8 pull-left flip">
                            <div class="row">
                                <div class="col-md-12">
                                    {% if media.picture != null %}
                                        <img style="border: 2px solid #B7B5B4;" alt="" id="img-detail-event"
                                             src="{{ asset('uploads/images/'~media.picture) }}"/>
                                    {% else %}
                                        <iframe width="100" height="65"
                                                src="https://www.youtube.com/embed/{{ media.url|slice(32, 50) }}"
                                                frameborder="0"
                                                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                                allowfullscreen></iframe>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h2 class="bg-text-new">{{ media.title }}</h2>
                                    <h5>
                                        <span class="fa fa-calendar"> {{ media.date |date('d/m/Y') }} </span>
                                    </h5>

                                    <p class="lead">{{ media.description | raw }} <span
                                                class="text-theme-colored2 font-weight-600"></span>.</p>


                                </div>

                                <div class="col-md-12">

                                </div>
                            </div>

                        </div>
                        <div class="col-sx-12 col-sm-4 col-md-4 sidebar pull-right flip">

                            <div class="widget">
                                <h4 class="widget-title">Dernièrs Médias</h4>
                                {% for lastMedia in lastMedia %}

                                    <div class="latest-posts">
                                        <article class="post media-post clearfix pb-0 mb-10">
                                            {% if lastMedia.picture != null %}
                                                <a class="post-thumb"
                                                   href="{{ path('media_detail', {'id': lastMedia.id}) }}">

                                                    <img class="" style="width: 90px; height: 75px;"
                                                         src="{{ asset('uploads/images/' ~ lastMedia.picture) }}">

                                                </a>
                                            {% else %}

                                                {#<img class="" style="width: 90px; height: 75px;"#}
                                                {#src="{{ asset('uploads/images/' ~ lastMedia.picture) }}">#}
                                                <div class="pull-left" style="width: 90px; height: 75px;">
                                                    <iframe width="90" height="75"
                                                            src="https://www.youtube.com/embed/{{ media.url|slice(32, 50) }}"
                                                            frameborder="0"
                                                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                                            allowfullscreen></iframe>
                                                </div>

                                            {% endif %}


                                            <div class="pull-right" style="margin-right: 157px;">
                                                <h5 class="post-title mt-0"><a class=""
                                                            href="{{ path('media_detail', {'id': lastMedia.id}) }}">{{ lastMedia.title }}</a>
                                                </h5>
                                                <p>
                                                    <i class="fa fa-calendar"></i> {{ lastMedia.date | date("d/m/Y") }}
                                                </p>
                                            </div>
                                        </article>

                                    </div>

                                {% endfor %}

                                <a class="text-theme-colored font-weight-600" href="{{ path('media_list') }}">
                                    <span class="fa fa-angle-double-left"></span>
                                    Tous Medias </a>

                            </div>


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

    </div>


{% endblock %}

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