{% extends 'frontNEW.html.twig' %}
{% block title %} {{ 'page.event.title' | trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('animated-event-calendar/docs/simple-calendar.css') }}">
    <link rel="stylesheet" href="{{ asset('animated-event-calendar/docs/demo.css') }}">
{% endblock %}
{% block css %}
    <link rel="stylesheet" type="text/css"
          href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

    <link href="{{ asset('packages/core/main.css') }}" rel='stylesheet'/>
    <link href="{{ asset('packages/daygrid/main.css') }}" rel='stylesheet'/>
    <link href="{{ asset('packages/timegrid/main.css') }}" rel='stylesheet'/>
    <link href="{{ asset('packages/list/main.css') }}" rel='stylesheet'/>

    <style>
        #top {
            background: #eee;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            line-height: 40px;
            font-size: 12px;
        }
        #calendar {
            margin: 40px auto;
            padding: 0 10px;
        }
        span.fc-title {
            color: white !important;
        }
        span.fc-time {
            color: white !important;
        }
        .fc-event, .fc-event-dot {
            background-color: #1a468d !important;
        }
        .fc-button-primary {
            color: #fff !important;
            background-color: #f58020 !important;
            border-color: #f58020 !important;
        }
        .fc-toolbar h2 {
            text-transform: capitalize;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="page-title-area item-bg5 jarallax" data-jarallax='{"speed": 0.3}'>
        <div class="container">
            <div class="page-title-content text-center">
                <h2>{% if type == 1 %}{{ 'menu.nav.nav3.sounav1' |trans }}{% else %}{{ 'page.event.title3' | trans }} {{ 'page.event.title2' |trans }}{% endif %}</h2>
            </div>
        </div>
    </div>

    <!-- events start -->
    {% if events != null %}
    <section class="upcoming-events-area ptb-100 pb-70">
        <div class="container">
            {% for event in events %}
            <div class="single-upcoming-events-box">
                <div class="events-box">
                    <div class="events-image">
                        {% if event.gallerie|length < 1 %}
                            <div class="image" style="background-image: url('{{ asset('uploads/galleries_events/emptyImage.png') }}')">
                                <img src="{{ asset('uploads/galleries_events/emptyImage.png') }}" alt="event" />
                            </div>
                        {% else %}
                            {% for gallery in event.gallerie %}
                                {% if loop.index == 1 %}
                                    <div class="image" style="background-image: url('{{ asset('uploads/galleries_events/'~gallery.path) }}');">
                                        <img src="{{ asset('uploads/galleries_events/'~gallery.path) }}" alt="event">
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </div>
                    <div class="events-content">
                        <div class="content">
                            <h3><a href="{{ path('front_events_detail',{'token':event.token, 'type':  type}) }}">{{ event.title }}</a></h3>
                            <p>{{ event.description[:100] }}</p>
                            <a href="{{ path('front_events_detail',{'token':event.token, 'type':  type}) }}" class="join-now-btn">{{ 'ensp' | trans }}</a>
                        </div>
                    </div>
                    <div class="events-date">
                        <div class="date">
                            <div class="d-table">
                                <div class="d-table-cell">
                                    <p><h4 style="color: white;">
                                        {% set month_start = event.start|date("F") %}
                                        {{ event.start|date('d') }} {{ month_start|trans }} {{ event.start|date('Y') }}</h4>
                                    </p>
                                    <br><i class="fas fa-arrows-alt-v" style="font-size: 20px;opacity: 1;"></i>
                                    <p><h4 style="color: white;">
                                        {% set month_end = event.end|date("F") %}
                                        {{ event.end|date('d') }} {{ month_end|trans }} {{ event.end|date('Y') }}</h4></p>
                                    <i class="flaticon-calendar"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% else %}
        <div><h2></h2>
        </div>
    {% endif %}

    <div class="col-lg-12 col-md-12 ptb-100 pt-0">
        {{ knp_pagination_render(events) }}
    </div>
    <!-- events end -->
{% endblock %}
{% block javascripts %}
    {{ parent() }}

    <script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@4"></script>
    <script type="text/javascript" src="{{ asset('js/vendors/jquery/jquery-ui.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                locale: 'fr',
                plugins: ['interaction', 'dayGrid'],
                defaultDate: new Date(),
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                header: {
                    left: "prev,next today",
                    right: "title",
                },
                events: Routing.generate('load_calendar', {'lang': '{{ app.request.locale }}'}),
                selectable: true,
                selectHelper: true,

                eventClick: function (event) {
                    console.log(event.event.extendedProps);
                    window.location.href = Routing.generate('front_events_detail', {
                        'token': event.event.extendedProps.token,
                        'lang': '{{ app.request.locale }}',
                        '_locale': '{{ app.request.locale }}'
                    });
                }
            });
            {% if app.request.locale =='ar' %}
            calendar.setOption('locale', '{{ app.request.locale }}-tn');
            {% else %}
            calendar.setOption('locale', '{{ app.request.locale }}');
            {% endif %}

            calendar.render();
        });
    </script>

    <script src="{{ asset('packages/core/main.js') }}"></script>
    <script src="{{ asset('packages/core/locales-all.js') }}"></script>
    <script src="{{ asset('packages/interaction/main.js') }}"></script>
    <script src="{{ asset('packages/daygrid/main.js') }}"></script>
    <script src="{{ asset('packages/timegrid/main.js') }}"></script>
    <script src="{{ asset('packages/list/main.js') }}"></script>
{% endblock %}