{% extends 'frontNEW.html.twig' %}
{% block title %}{{ 'page.new.detail.title' |trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}

{% block css %}
{% endblock %}
{% block body %}
    <div class="page-title-area item-bg4 jarallax" data-jarallax='{"speed": 0.3}'>
        <div class="container">
            <div class="page-title-content text-center">
                <h2>{{ new.title }}</h2>
            </div>
        </div>
    </div>

    <!-- new start -->
    <section class="blog-details-area ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-12">
                    <div class="blog-details-desc">
                        <div class="article-image">
                            <section class="testimonial-area">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12">
                                            {% if new.gallerie|length < 1 %}
                                                <div>
                                                    <p>
                                                        <img src="{{ asset('uploads/galleries/emptyImage.png') }}" alt="image" />
                                                    </p>
                                                </div>
                                            {% elseif new.gallerie|length == 1 %}
                                                <section style="margin-top: 50px;" id="home">
                                                    {% for gallery in new.gallerie %}
                                                        {% if loop.index == 1 %}
                                                        <div>
                                                            <p>
                                                                <img src="{{ asset('uploads/galleries_events/'~gallery.path) }}" alt="event"
                                                                 style="width: 100%; height: 540px; object-fit: cover;"/>
                                                            </p>
                                                        </div>
                                                        {% endif %}
                                                    {% endfor %}
                                                </section>
                                            {% else %}
                                                <!-- hero area start -->
                                                <section style="margin-top: 50px;" id="home">
                                                    <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
                                                        <div class="carousel-inner">
                                                            {% for gallery in new.gallerie %}
                                                                <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                                                                    <img class="d-block w-100"
                                                                         src="{{ asset('uploads/galleries/'~gallery.path) }}"
                                                                         alt="First slide"
                                                                         style="width: 100%; height: 540px; object-fit: cover;">
                                                                </div>
                                                            {% endfor %}
                                                        </div>
                                                        <a class="carousel-control-prev" href="#carouselExampleIndicators2"
                                                           role="button" data-slide="prev">
                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                            <span class="sr-only">Previous</span>
                                                        </a>
                                                        <a class="carousel-control-next" href="#carouselExampleIndicators2"
                                                           role="button" data-slide="next">
                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                            <span class="sr-only">Next</span>
                                                        </a>
                                                    </div>
                                                </section>
                                                <ol class="carousel-indicators" style="margin-top: 10px;position: unset;">
                                                    {% if galleries >0%}
                                                        {% for gallery in new.gallerie %}
                                                            <li data-target="#carouselExampleIndicators2" data-slide-to="{{ loop.index - 1 }}"
                                                                class="active" style="width: 100px;height: 70px;">
                                                                <img class="d-block" src="{{ asset('uploads/galleries/'~gallery.path) }}"
                                                                     style="width: 100px;height: 70px;">
                                                            </li>
                                                        {% endfor %}
                                                    {% endif %}
                                                </ol>
                                                <!-- hero area end -->
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="article-content">
                            <div class="entry-meta">
                                <ul>
                                    <li>
                                        <i class="flaticon-calendar"></i>
                                        <a href="#">
                                            {% set month = new.createdAt|date("F") %}
                                            {{ new.createdAt|date('d') }} {{ month|trans }} {{ new.createdAt|date('Y') }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
{#                            <h3>{{ new.title }}</h3>#}
                            <p>{{ new.content|raw }}</p>
                        </div>
                        <div class="article-footer">
                            <div class="article-tags">
                                <span><i class="fas fa-bookmark"></i></span>
                                <a href="#">{{ new.category.name }}</a>
                            </div>
                            <div class="article-share">
                                <ul class="social">
                                    <li><span>{{'social.media.partager' | trans}} :</span></li>
                                    <li>
                                        <a href="#" class="share_facebook"
                                           data-url="{{ app.request.schemeAndHttpHost ~ app.request.requestUri }}">
                                            <i class="fab fa-facebook-f"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="share_twitter"
                                           data-url="{{ app.request.schemeAndHttpHost ~ app.request.requestUri }}">
                                            <i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="share_linkedin"
                                           data-url="{{ app.request.schemeAndHttpHost ~ app.request.requestUri }}">
                                            <i class="fab fa-linkedin-in"></i></a>
                                    </li>
                                    <li>
                                        <a id="copy-link" href="javascript:void(0)" class=""
                                           data-url="{{ app.request.schemeAndHttpHost ~ app.request.requestUri }}">
                                            <i class="fas fa-link"></i></a>
                                        <input id="to-copy" type="hidden" value="{{ app.request.schemeAndHttpHost ~ app.request.requestUri }}">
                                    </li>
                                </ul>
                            </div>
                        </div>
{#                        {% if pagination_items.0.token is defined or pagination_items.1.token is defined %}#}
{#                        <div class="post-navigation mb-0">#}
{#                            <div class="navigation-links">#}
{#                                <div class="nav-previous">#}
{#                                    {% if pagination_items.1.token is defined %}#}
{#                                        <a href="{{ path('news_front_detail',{'token':pagination_items.1.token}) }}"><i class="flaticon-left-chevron"></i> {{ 'event.prev'|trans }}</a>#}
{#                                    {% endif %}#}
{#                                </div>#}
{#                                <div class="nav-next">#}
{#                                    {% if pagination_items.0.token is defined %}#}
{#                                        <a href="{{ path('news_front_detail',{'token':pagination_items.0.token}) }}">{{ 'event.next'|trans }} <i class="flaticon-right-chevron"></i></a>#}
{#                                    {% endif %}#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                        {% endif %}#}
                            <div class="post-navigation mb-0">
                                <div class="navigation-links">
                                    <div class="nav-previous">
                                        {% if newss_prev.0.token is defined %}
                                            <a href="{{ path('news_front_detail',{'token':newss_prev.0.token}) }}">
                                                <i class="flaticon-left-chevron"></i> {{ 'event.prev'|trans }}</a>
                                        {% endif %}
                                    </div>
                                    <div class="nav-next">
                                        {% if newss_next.0.token is defined %}
                                            <a href="{{ path('news_front_detail',{'token':newss_next.0.token}) }}">
                                                {{ 'event.next'|trans }} <i class="flaticon-right-chevron"></i></a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <aside class="widget-area" id="secondary">
                        <section class="widget widget_poxo_posts_thumb">
                            <h3 class="widget-title" style="text-transform: none;">
                                {{ 'page.index.new1' |trans }} {{ 'page.index.new2' | trans }}
                            </h3>
                            {% for new in news %}
                                <article class="item">
                                    <a href="#" class="thumb">
                                        <span class="fullimage cover"
                                            {% if new.gallerie|length <1 %}
                                                style="background-image: url('{{ asset('uploads/galleries/emptyImage.png') }}');"
                                            {% else %}
                                                {% for gallery in new.gallerie %}
                                                    {% if loop.index == 1 %}
                                                        style="background-image: url('{{ asset('uploads/galleries/'~gallery.path) }}');"
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                              role="img"></span>
                                    </a>
                                    <div class="info">
                                        <time datetime="{{ new.createdAt|date('d-m-Y') }}">
                                            {% set month_o = new.createdAt|date("F") %}
                                            {{ new.createdAt|date('d') }} {{ month_o|trans }} {{ new.createdAt|date('Y') }}
                                        </time>
                                        <h4 class="title usmall"><a href="{{ path('news_front_detail',{'token':new.token}) }}">{{ new.title }}</a></h4>
                                    </div>
                                    <div class="clear"></div>
                                </article>
                            {% endfor %}
                        </section>
                        <section class="widget widget_categories">
                            <h3 class="widget-title">{{ 'news.categories' |trans }}</h3>
                            <ul>
                                {% for categorie in all_categories %}
                                    <li><a href="{{ path('news_front_category',{'token':categorie.token}) }}">{{ categorie.name }}</a></li>
                                {% endfor %}
                            </ul>
                        </section>
                    </aside>
                </div>
            </div>
        </div>
    </section>
    <!-- new end -->

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <!-- Social media JS -->
    <script src="{{ asset('js/social_media.js') }}"></script>
{% endblock %}