{% extends 'frontNEW.html.twig' %}
{% block title %} {{ 'page.event.detail.title' |trans }} {% endblock %}
{% block stytesheets %}

{% endblock %}

{% block css %}
    {{ parent() }}
    <link rel="stylesheet" href="http://gijsroge.github.io/owl-carousel2-thumbs/assets/normalize.css">
    <link rel="stylesheet" href="http://gijsroge.github.io/owl-carousel2-thumbs/assets/owl.carousel.css">
    <style>

        .owl-thumb-item > img {
            width: 150px !important;
            height: auto !important;
        }

        .owl-thumbs {
            position: absolute;
            bottom: 0;
            left: 0;
            display: table;
            width: 100%;
            text-align: center;
            padding: 5%;
        }

        .owl-thumb-item {
            display: table-cell;
            border: none;
            background: none;
            padding: 0;
            opacity: .4;
        }

        .owl-thumb-item.active {
            opacity: 1;
        }
    </style>
{% 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>{{ event.title }}</h2>
        </div>
    </div>
</div>

    <!-- event detail start -->
    <section class="events-details-area ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="events-details-header">
                        <a href="{% if type == 1 %}{{ path('front_events_list_to_come_up') }}
                                {% else %}{{ path('front_events_list_past') }}{% endif %}"
                           class="back-all-events"><i class="flaticon-left-chevron"></i> {{ 'event.back'|trans }}</a>
                        <h3>{{ event.title }}</h3>
                        <ul class="events-info-meta">
                            <li><i class="flaticon-calendar"></i>
                                {% set month = event.start|date('F') %}
                                {{ event.start|date('d') }} {{ month|trans }} {{ event.start|date('Y') }}
                            </li>
                            <li><i class="flaticon-calendar"></i>
                                {% set month_end = event.end|date('F') %}
                                {{ event.end|date('d') }} {{ month_end|trans }} {{ event.end|date('Y') }}
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-8 col-md-12">
                    <div class="events-details">
                        <div class="events-details-image">
                            {% if event.gallerie|length < 1 %}
                                <img src="{{ asset('uploads/galleries_events/emptyImage.png') }}" alt="event" />
                            {% 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 >1%}
                                        {% for gallery in event.gallerie %}
                                            <li data-target="#carouselExampleIndicators2" data-slide-to="{{ loop.index - 1 }}"
                                                class="active" style="width: 100px;height: auto;">
                                                <img class="d-block w-100 img-fluid" src="{{ asset('uploads/galleries_events/'~gallery.path) }}" style="height: 70px;">
                                            </li>
                                        {% endfor %}
                                    {% endif %}
                                </ol>
                                <!-- hero area end -->
                            {% endif %}
                        </div>
                        <div class="events-details-desc">
                            <p>
                                {{ event.description }}
                            </p>
                        </div>
{#                        {% if pagination_items.0.token is defined or pagination_items.1.token is defined %}#}
{#                        <div class="post-navigation">#}
{#                            <div class="navigation-links">#}
{#                                <div class="nav-previous">#}
{#                                    {% if pagination_items.1.token is defined %}#}
{#                                        <a href="{{ path('front_events_detail',{'token':pagination_items.1.token, 'type':  type}) }}"><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('front_events_detail',{'token':pagination_items.0.token, 'type':  type}) }}">{{ 'event.next'|trans }} <i class="flaticon-right-chevron"></i></a>#}
{#                                    {% endif %}#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                        {% endif %}#}
                            <div class="post-navigation">
                                <div class="navigation-links">
                                    <div class="nav-previous">
                                        {% if eventss_prev.0.token is defined %}
                                            <a href="{{ path('front_events_detail',{'token':eventss_prev.0.token, 'type':  type}) }}">
                                                <i class="flaticon-left-chevron"></i> {{ 'event.prev'|trans }}</a>
                                        {% endif %}
                                    </div>
                                    <div class="nav-next">
                                        {% if eventss_next.0.token is defined %}
                                            <a href="{{ path('front_events_detail',{'token':eventss_next.0.token, 'type':  type}) }}">
                                                {{ 'event.next'|trans }} <i class="flaticon-right-chevron"></i></a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
{#                        <div class="post-navigation">#}
{#                            {{ knp_pagination_render(pagination, '@FrontBundle/Pagination/sliding2.html.twig') }}#}
{#                        </div>#}
                    </div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <aside class="widget-area" id="secondary">
                        <section class="widget widget_events_details">
                            <h3 class="widget-title">{{ 'event.details'|trans }}</h3>
                            <ul>
                                <li><span>{{ 'event.start'|trans }}</span>
                                    {% set month = event.start|date('F') %}
                                    {{ event.start|date('d') }} {{ month|trans }} {{ event.start|date('Y') }}
                                </li>
                                <li><span>{{ 'event.end'|trans }}</span>
                                    {% set month_end = event.end|date('F') %}
                                    {{ event.end|date('d') }} {{ month_end|trans }} {{ event.end|date('Y') }}
                                </li>
                            </ul>
                        </section>
                        {% if event.registrationStatus == 1 and type == 1 %}
                            <section class="widget widget_events_details event-registration">
                                {% include '@App/Default/flashBag.html.twig' %}
                                {% include '@FrontBundle/Events/register.html.twig' %}
                                    <h4>{{ 'page.event.detail.title4' |trans }}</h4>
                                    <a data-toggle="modal" data-target="#exampleModal1"
                                       class="register-link">{{ 'page.event.detail.title5'|trans }} </a>
                            </section>
                        {% endif %}
                    </aside>
                </div>
            </div>
        </div>
    </section>
    <!-- event detail end -->
{% endblock %}
{% block javascripts %}
    {{ parent() }}
{#    {% include "@FrontBundle/Events/assets.html.twig" %}#}
    <script src="http://gijsroge.github.io/owl-carousel2-thumbs/assets/OwlCarousel2Thumbs.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.owl-carousel').owlCarousel({
                loop: true,
                nav: true,
                items: 1,
                dots: false,
                autoplayHoverPause: true,
                autoplay: true,
                animateOut: "slideOutLeft",
                animateIn: "slideInRight",
                navText: ["<i class='flaticon-left-chevron'></i>", "<i class='flaticon-right-chevron'></i>"],
                thumbs: true,
                thumbImage: true,
                // thumbsPrerendered: true,
                thumbContainerClass: 'owl-thumbs',
                thumbItemClass: 'owl-thumb-item'
            });
        });
    </script>
{% endblock %}