{% extends 'front.html.twig' %}
{% block title %} {{ 'page.event.detail.title' |trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block body %}
    <!-- breadcrumb area start -->
    <section class="breadcrumb-area" id="home">
        <div class="container" >
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-area-content">
                        <h2>{{ event.title }}</h2>
                        <ul>
                            <li><a href="{{ path('front_home') }}">{{ 'title.Ac'|trans }}</a></li>
                            <li><a href="{{ path('front_events') }}">{{ 'page.event.title2' | trans }}</a></li>
                            <li class="active"><a href="#">{{ 'title.detail' |trans }}</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="blog-details">
                        {% if app.request.locale == 'ar' %}
                            <img class="floatImage pull-right" src="{{ asset('uploads/events/'~event.picture) }}"
                                 alt="blog-detail" width="100%">
                            <br>
                            <br>
                            <br>
                            <a href="#">
                                <h4 class="margin-label widget-rtl post-title">{{ event.title }}</h4></a>
                            <div class="post-author widget-rtl">
                                {#<a href="#"><i class="icofont icofont-user"></i>By Admin</a>#}
                                <i class="icofont icofont-calendar"></i> <a
                                        href="#">{{ event.start|date('d-m-Y') }} </a>
                                <a href="#">{{ event.end|date('d-m-Y') }}</a><i
                                        class="icofont icofont-calendar"></i>
                            </div>
                            <p class="widget-rtl">{{ event.description }}</p>
                        {% else %}
                            <!-- hero area start -->
                            <section style="margin-top: 50px;" id="home">
                                <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
                                    <div class="carousel-inner">

                                        {% if galleries < 1 %}
                                            <img class="d-block w-100"
                                                 src="{{ asset('uploads/galleries_events/emptyImage.png') }}"
                                                 alt="First slide"
                                                 style="width: 100%; height: 540px; object-fit: cover;">
                                        {% else %}
                                            {% for gallery in event.gallerie %}
                                                <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                                                    {#                                                    {% if new.gallerie|length <1 %}#}
                                                    {% if galleries <1 %}
                                                        <img class="d-block w-100"
                                                             src="{{ asset('uploads/galleries_events/emptyImage.png') }}"
                                                             alt="First slide"
                                                             style="width: 100%; height: 540px; object-fit: cover;">
                                                    {% else %}

                                                        <img class="d-block w-100"
                                                             src="{{ asset('uploads/galleries_events/'~gallery.path) }}"
                                                             alt="First slide"
                                                             style="width: 100%; height: 540px; object-fit: cover;">


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

                                    </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 event.gallerie %}
                                        <li data-target="#carouselExampleIndicators2" data-slide-to="{{ loop.index - 1 }}"
                                            {% if loop.index == 1 %}class="active"{% endif %} style="width: 70px;height: auto;">
                                            <img class="d-block w-100 img-fluid" src="{{ asset('uploads/galleries_events/'~gallery.path) }}" style="height: 39px;">
                                        </li>
                                    {% endfor %}
                                {% endif %}
                            </ol>
                            <!-- hero area end -->
                            <a href="#"><h4 class="post-title">{{ event.title }}</h4></a>
                            <div class="post-author">
                                {#<a href="#"><i class="icofont icofont-user"></i>By Admin</a>#}
                                <a href="#"><i class="icofont icofont-calendar"></i>{{ event.start|date('d-m-Y') }}
                                </a>
                                <a href="#"><i class="icofont icofont-calendar"></i>{{ event.end|date('d-m-Y') }}
                                </a>
                            </div>
                            <p>{{ event.description }}</p>
                        {% endif %}
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="sidebar">
                        <div class="sidebar-widget">
                            {% include '@App/Default/flashBag.html.twig' %}
                            {#<button type="button" class="btn theme-btn theme-btn8 btn-block" data-toggle="modal" data-target="#exampleModal1"><i class="icofont icofont-calendar"></i> Inscription Evénement </button>#}
                            <!-- modal inscription -->
                            {% include '@FrontBundle/Events/register.html.twig' %}
                            <!-- end modal inscription -->
                        </div>
                        <div class="sidebar-widget">
                            {% if app.request.locale == 'ar' %}

                            <h4 class=" widget-rtl">{{ 'page.event.detail.title3' | trans }}</h4>
                            {% else  %}
                                <h4 class="">{{ 'page.event.detail.title3' | trans }}</h4>


                            {% endif %}


                            {% for event in events %}
                                {% if app.request.locale == 'ar' %}
                                    <div class="widget-post">

                                        <div class="widget-post-img">
                                            <img src="{{ asset('uploads/events/'~event.picture) }}" alt="widget" style="width: 100%; object-fit: cover; height: 75px;">
                                        </div>
                                        <div class="widget-post-info  ">
                                            <p class="widget-rtl padding-right"><a href="{{ path('front_events_detail',{'token':event.token,  'lang':locale}) }}">{{ event.title }}</a></p>
                                            <span class="styleDAte"><i class=" icofont icofont-calendar"></i>  {{ event.start|date('d-m-Y') }}  </span>
                                        </div>
                                    </div>

                                {% else %}

                                    <div class="widget-post">
                                        <div class="widget-post-img">
                                            <img src="{{ asset('uploads/events/'~event.picture) }}" alt="widget" style="width: 100%; object-fit: cover; height: 75px;">
                                        </div>
                                        <div class="widget-post-info">
                                            <p><a href="{{ path('front_events_detail',{'token':event.token,  'lang':locale}) }}">{{ event.title }}</a></p>
                                            <span><i class="icofont icofont-calendar"></i> {{ event.start|date('d M Y') }}</span>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>

                        {% if event.registrationStatus == 1 %}
                        {% if app.request.locale == 'ar' %}
                        <div class="sidebar-widget widget-quote" style="height: 135px;">
                                <h4 class="widget-rtl">{{ 'page.event.detail.title4' |trans }}</h4>
                                    <a data-toggle="modal" data-target="#exampleModal1" style="float: right"
                                       class="theme-btn theme-btn6 ">{{ 'page.event.detail.title5'|trans }} </a>
                        {% else %}
                        <div class="sidebar-widget widget-quote">
                            <h4>{{ 'page.event.detail.title4' |trans }}</h4>
                            <a data-toggle="modal" data-target="#exampleModal1"
                               class="theme-btn theme-btn6">{{ 'page.event.detail.title5'|trans }} </a>
                        {% endif %}
                        </div>
                        {% endif %}

                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    {% include "@FrontBundle/Events/assets.html.twig" %}
{% endblock %}