{% extends 'front.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') }}">

    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@4/themes/light-border.css"/>

    <link rel="stylesheet" href="https://unpkg.com/tippy.js@4/themes/translucent.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>

        /*body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }*/

        #top {
            background: #eee;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            line-height: 40px;
            font-size: 12px;
        }

        #calendar {
            /* max-width: 900px;*/
            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 %}
    <!-- 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>{{ 'page.event.title2' |trans }}</h2>
                        <ul>
                            <li><a href="{{ path('front_home') }}">{{ 'title.Ac' | trans }}</a></li>
                            <li class="active"><a href="#">{{ 'page.event.title2' |trans }}</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- career section start -->
    <section class="pt-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title mb-20">
                        {% if app.request.locale == 'ar' %}
                        <h2>{{ 'page.event.title2' | trans }} <span class="title-span"></span>
                            {% else %}
                            <h2>{{ 'page.event.title3' | trans }} <span
                                        class="title-span">{{ 'page.event.title2' |trans }}</span>
                                {% endif %}
                                <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                            </h2>
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- calendar -->
    <section class="pb-5">

        <div id='calendar' style="margin-top: 50px; max-width: 700px; padding: 30px; background-color: #ffffff; "></div>
    </section>

    <section class="pb-75">
        <div class="container">
            <div class="row">
                {% if events != null %}

                {% for event in events %}
                {% if app.request.locale == 'ar' %}
                 <div class="col-xl-6 col-lg-12">
                    <div class="single-post">
                        <div class="row flexbox-center">
                            <div class="col-sm-5">
                                <div class="post-thumbnail">
                                    <a href="{{ path('front_events_detail',{'token':event.token, 'lang':  locale}) }}">
                                        <img class="listNewstImg"
                                             src="{{ asset('uploads/events/'~event.picture) }}"
                                             alt="Events"></a>
                                </div>
                            </div>
                            <div class="col-sm-7">
                                <div class="post-details blogNewDetail">
                                    <a href="{{ path('front_events_detail',{'token':event.token, 'lang':  locale}) }}">
                                        <h4 class="styleLinkEvent widget-rtl post-title">{{ event.title }}</h4>
                                    </a>
                                    <p class="styleTextEvent widget-rtl">{{ event.description[:100] }}</p>
                                </div>
                                <div class="btnSAvoirplus"></div>
                                <a href="{{ path('front_events_detail',{'token':event.token,  'lang':locale}) }}"
                                   class="marBTnDetailNews theme-btn theme-btn5 ">{{ 'ensp' | trans }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="col-xl-6 col-lg-12">
                    <div class="single-post">
                        <div class="row flexbox-center">
                            <div class="col-sm-5">
                                <div class="post-thumbnail">
                                    <a href="{{ path('front_events_detail',{'token':event.token, 'lang':  locale}) }}">
                                        <img class="listEventImg" src="{{ asset('uploads/events/'~event.picture) }}"
                                             alt="Events"></a>
                                </div>
                            </div>
                            <div class="col-sm-7">
                                <div class="post-details blogNewDetail">
                                    <a href="{{ path('front_events_detail',{'token':event.token, 'lang':  locale}) }}">
                                        <h4 class="  post-title">{{ event.title }}</h4></a>
                                    <p class="">{{ event.description[:100] }}</p>
                                </div>

                                <div class="btnSAvoirplus">
                                    <a href="{{ path('front_events_detail',{'token':event.token,  'lang':locale}) }}"
                                       class="theme-btn theme-btn5">{{ 'ensp' | trans }}</a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
            </div>
                {% else %}
                    <div><h2>Acunne Donne</h2>
                    </div>
                {% endif %}
        </div>
    </section>
    <section class="pb-75">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    {{ knp_pagination_render(events) }}
                </div>
            </div>
        </div>
    </section><!-- career section end -->
    <!-- footer section start -->
    <!-- breadcrumb area 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 () {
            {#console.log('{{ app.request.locale }}');#}


            var calendarEl = document.getElementById('calendar');
            {#console.log('{{ app.request.locale }}');#}
            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",
                },
                // header: {
                //     locale: 'en',
                //     left: "prev,next today",
                //     center: "title",
                //     right: "month,agendaWeek,agendaDay,listWeek"
                // },


                /*buttonIcons: {
                 prev: "fa fa-angle-left",
                 next: "fa fa-angle-right",
                 prevYear: "fa fa-angle-left",
                 nextYear: "fa fa-angle-right"
                 },*/
                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 }}'
                    });

                }


                /*[
                 {
                 title: 'All Day Event',
                 start: '2019-06-01'
                 },
                 {
                 title: 'Long Event',
                 start: '2019-06-07',
                 end: '2019-06-10'
                 },
                 {
                 groupId: 999,
                 title: 'Repeating Event',
                 start: '2019-06-09T16:00:00'
                 },
                 {
                 groupId: 999,
                 title: 'Repeating Event',
                 start: '2019-06-16T16:00:00'
                 },
                 {
                 title: 'Conference',
                 start: '2019-06-11',
                 end: '2019-06-13'
                 },
                 {
                 title: 'Meeting',
                 start: '2019-06-12T10:30:00',
                 end: '2019-06-12T12:30:00'
                 },
                 {
                 title: 'Lunch',
                 start: '2019-06-12T12:00:00'
                 },
                 {
                 title: 'Meeting',
                 start: '2019-06-12T14:30:00'
                 },
                 {
                 title: 'Happy Hour',
                 start: '2019-06-12T17:30:00'
                 },
                 {
                 title: 'Dinner',
                 start: '2019-06-12T20:00:00'
                 },
                 {
                 title: 'Birthday Party',
                 start: '2019-06-13T07:00:00'
                 },
                 {
                 title: 'Click for Google',
                 url: 'http://google.com/',
                 start: '2019-06-28'
                 }
                 ]*/
            });
            {% 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 %}