{% extends "Global/layout.html.twig" %}

{% if category != "all" %}
    {% set pagetitle = category.name %}
{% else %}
    {% set pagetitle = 'Events'|trans %}
{% endif %}

{% block title %}{{pagetitle}}{% endblock %}

{% block content %}

    {% if category != "all" %}
        {% set navigation = [{"events": ("Events"|trans), "current" : (pagetitle)}] %}
    {% else %}
        {% set navigation = [{"current" : (pagetitle)}] %}
    {% endif %}

    {% include "Global/navigation.html.twig" with navigation %}

    <section class="section-content bg-white padding-y">
        <div class="{{ envFileAccessor.getSetting("app_layout") }}">

            {% set eventsOnCalendar = [] %}
            {% set eventsOnMap = [] %}

            {% for event in events %}
                {% for eventDate in event.eventDates %}
                    {% if eventDate.isOnSale %}
                        {% if eventDate.venue and envFileAccessor.getSetting("show_map_button") == "1" %}
                            {% if eventDate.venue.lat and eventDate.venue.lng %}
                                {% if eventsOnMap|length == 0 %}
                                    {% set eventsOnMap = eventsOnMap|merge([{"name": event.name, "image": vich_uploader_asset(event, 'imageFile'), "address": (eventDate.venue.name ~ ": " ~eventDate.venue.stringifyAddress),"date": (eventDate.startDate|display_date), "price": (eventDate.isFree ? "Free"|trans : eventDate.getCheapestTicket.getSalePrice), "lat":eventDate.venue.lat, "lng":eventDate.venue.lng, "link": (path('event', { slug: event.slug })) }]) %}
                                {% else %}
                                    {% for eventOnMap in eventsOnMap %}
                                        {% if eventOnMap.lat != eventDate.venue.lat and eventOnMap.lng != eventDate.venue.lng %}
                                            {% set eventOnMap = eventsOnMap|merge([{"name": event.name, "image": vich_uploader_asset(event, 'imageFile'), "address": (eventDate.venue.name ~ ": " ~eventDate.venue.stringifyAddress),"date": (eventDate.startDate|display_date), "price": (eventDate.isFree ? "Free"|trans : eventDate.getCheapestTicket.getSalePrice), "lat":eventDate.venue.lat, "lng":eventDate.venue.lng, "link": (path('event', { slug: event.slug })) }]) %}
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        {% endif %}

                        {% if envFileAccessor.getSetting("show_calendar_button") == "1" %}
                            {% set eventsOnCalendar = eventsOnCalendar|merge([{"title": event.name, "start":eventDate.startDate|date('Y-m-d H:i'), "end": (eventDate.endDate ? eventDate.endDate|date('Y-m-d H:i') : ''), "url": (path('event', {slug : event.slug})) }]) %}
                        {% endif %}
                    {% endif %}
                {% endfor %}
            {% endfor %}

            {% if eventsOnMap|length > 0 and envFileAccessor.getSetting("show_map_button") == "1" and envFileAccessor.getSetting('google_maps_api_key') != "" %}
                <div id="events-map" data-pin-path="{{ asset('img/icons/pin.png') }}" data-events="{{ eventsOnMap|json_encode() }}" class="mb-4 collapse vh-90"></div>
            {% endif %}

            {% if eventsOnCalendar|length > 0 and envFileAccessor.getSetting("show_calendar_button") == "1" %}
                <div id="events-calendar-wrapper" class="mb-4 collapse">
                    <div id="events-calendar" data-default-date="{{ "now"|date('Y-m-d') }}" data-events="{{ eventsOnCalendar|json_encode() }}"></div>
                </div>
            {% endif %}

            <div class="box shadow-none bg-gray mb-4">
                <div class="row">
                    <div class="col-sm-12 col-lg-6 text-center text-lg-left mb-3 mb-lg-0">
                        <span class="center-lg-y text-muted">{{ "%resultsCount% event(s) found"|trans({'%resultsCount%': events.getTotalItemCount}) }}</span>
                    </div>
                    {% if events.getTotalItemCount > 0 %}
                        <div class="col-sm-12 col-lg-6 text-center text-lg-right">
                            {% if eventsOnMap|length > 0 and envFileAccessor.getSetting("show_map_button") == "1" and envFileAccessor.getSetting('google_maps_api_key') != "" %}
                                <a href="#events-map" class="btn btn-primary has-tooltip" data-toggle="collapse" title="{{"Show events on map"|trans}}" aria-expanded="false" aria-controls="events-map"><i class="fas fa-map-marked-alt fa-fw"></i></a>
                                {% endif %}
                                {% if eventsOnCalendar|length > 0 and envFileAccessor.getSetting("show_calendar_button") == "1" %}
                                <a href="#events-calendar-wrapper" class="btn btn-primary has-tooltip" data-toggle="collapse" title="{{"Show events calendar"|trans}}" aria-expanded="false" aria-controls="events-calendar-wrapper"><i class="far fa-calendar fa-fw"></i></a>
                                {% endif %}
                                {% if envFileAccessor.getSetting("show_rss_feed_button") == "1" %}
                                <a href="{{ envFileAccessor.getSetting("website_url")~"/rss" }}" class="btn btn-primary" data-toggle="tooltip" title="{{"Events RSS feed"|trans}}" target="_blank"><i class="fas fa-rss fa-fw"></i></a>
                                {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="row">
                <aside class="col-lg-3 order-2 order-lg-1">
                    <div class="card card-filter">
                        <form method="get">
                            <article class="card-group-item">
                                <header class="card-header">
                                    <a href="#" data-toggle="collapse" data-target="#filter-keyword">
                                        <i class="icon-action fa fa-chevron-down"></i>
                                        <h6 class="title">{{ "Keyword"|trans }}</h6>
                                    </a>
                                </header>
                                <div class="filter-content collapse show" id="filter-keyword">
                                    <div class="card-body">
                                        <input id="keyword" name="keyword" type="text" class="form-control" value="{{ app.request.query.get('keyword') }}">
                                    </div>
                                </div>
                            </article>
                            {% if envFileAccessor.getSetting("show_category_filter") == "1" %}
                                <article class="card-group-item">
                                    <header class="card-header">
                                        <a href="#" data-toggle="collapse" data-target="#filter-category">
                                            <i class="icon-action fa fa-chevron-down"></i>
                                            <h6 class="title">{{ "Category"|trans }}</h6>
                                        </a>
                                    </header>
                                    <div class="filter-content collapse show" id="filter-category">
                                        <div class="card-body">
                                            <select id="category" name="category" class="select2" data-sort-options="1">
                                                <option value="">&nbsp;</option>
                                                {% for category in repository.getCategories({}).getQuery().getResult() %}
                                                    <option value="{{ category.slug }}">{{ category.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </article>
                            {% endif %}
                            {% if envFileAccessor.getSetting("show_location_filter") == "1" %}
                                <article class="card-group-item">
                                    <header class="card-header">
                                        <a href="#" data-toggle="collapse" data-target="#filter-location">
                                            <i class="icon-action fa fa-chevron-down"></i>
                                            <h6 class="title">{{ "Location"|trans }}</h6>
                                        </a>
                                    </header>
                                    <div class="filter-content collapse show" id="filter-location">
                                        <div class="card-body">
                                            <div class="custom-control custom-checkbox form-check-input">
                                                <div class="form-check mb-4 filter-online-container">
                                                    <input type="checkbox" class="custom-control-input" id="filter-online-only" name="onlineonly" value="1">
                                                    <label class="custom-control-label" for="filter-online-only">{{ "Online events only"|trans }}</label>
                                                </div>
                                            </div>

                                            <div class="location-based-filters">
                                                {#{% set userLocation = services.locateUser() %}
                                                {% if userLocation %}
                                                    <div class="custom-control custom-checkbox form-check-input">
                                                        <div class="form-check mb-4">
                                                            <input type="checkbox" class="custom-control-input" id="filter-local-only" name="localonly" value="1">
                                                            <label class="custom-control-label" for="filter-local-only">{{ "Local events only"|trans }}</label>
                                                        </div>
                                                    </div>
                                                    <p id="user-country" class="text-muted">{{ "Events in %countryname%"|trans({"%countryname%" : userLocation['country'].name}) }} <span class="flag flag-{{userLocation['country'].code|lower}} ml-2"></span></p>
                                                    {% endif %}#}
                                                <div id="filter-country-container" class="mt-4">
                                                    <label for="country">{{ "Country"|trans }}</label>
                                                    <select id="country" class="select2" name="country" data-sort-options="1">
                                                        <option value="">&nbsp;</option>
                                                        {% for country in repository.getCountries({}).getQuery().getResult() %}
                                                            <option value="{{ country.slug }}">{{ country.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div id="filter-location-container" class="mt-4">
                                                    <label for="location">{{ "State / City"|trans }}</label>
                                                    <input id="location" name="location" type="text" class="form-control" value="{{ app.request.query.get('location') }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            {% endif %}
                            {% if envFileAccessor.getSetting("show_date_filter") == "1" %}
                                <article class="card-group-item">
                                    <header class="card-header">
                                        <a href="#" data-toggle="collapse" data-target="#filter-date">
                                            <i class="icon-action fa fa-chevron-down"></i>
                                            <h6 class="title">{{ "Date"|trans }}</h6>
                                        </a>
                                    </header>
                                    <div class="filter-content collapse show" id="filter-date">
                                        <div class="card-body">
                                            <div class="form-check">
                                                <div class="float-left custom-control custom-radio form-check-input">
                                                    <input type="radio" class="custom-control-input" id="date-today" name="startDate" value="today">
                                                    <label class="custom-control-label" for="date-today">{{ "Today"|trans }}</label>
                                                </div>
                                                <span class="float-right form-check-label">
                                                    <span class="badge badge-light round">{{ repository.getEvents({"count": true, "startDate" : ("now"|date("Y-m-d"))}).getQuery().getSingleScalarResult() }}</span>
                                                </span>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="form-check">
                                                <div class="float-left custom-control custom-radio form-check-input">
                                                    <input type="radio" class="custom-control-input" id="date-tomorrow" name="startDate" value="tomorrow">
                                                    <label class="custom-control-label" for="date-tomorrow">{{ "Tomorrow"|trans }}</label>
                                                </div>
                                                <span class="float-right form-check-label">
                                                    <span class="badge badge-light round">{{ repository.getEvents({"count": true, "startDate" : ("now"|date_modify("+1 day")|date("Y-m-d"))}).getQuery().getSingleScalarResult() }}</span>
                                                </span>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="form-check">
                                                <div class="float-left custom-control custom-radio form-check-input">
                                                    <input type="radio" class="custom-control-input" id="date-thisweekend" name="startDate" value="thisWeekend">
                                                    <label class="custom-control-label" for="date-thisweekend">
                                                        {{ "This weekend"|trans }}
                                                    </label>
                                                </div>
                                                <span class="float-right form-check-label">
                                                    <span class="badge badge-light round">{{ repository.getEvents({"count": true, "startDateMin" : ("now"|date_modify("saturday this week")|date("Y-m-d")), "startDateMax" : ("now"|date_modify("sunday this week")|date("Y-m-d"))}).getQuery().getSingleScalarResult() }}</span>
                                                </span>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="form-check">
                                                <div class="float-left custom-control custom-radio form-check-input">
                                                    <input type="radio" class="custom-control-input" id="date-thisweek" name="startDate" value="thisWeek">
                                                    <label class="custom-control-label" for="date-thisweek">
                                                        {{ "This week"|trans }}
                                                    </label>
                                                </div>
                                                <span class="float-right form-check-label">
                                                    <span class="badge badge-light round">{{ repository.getEvents({"count": true, "startDateMin" : ("now"|date_modify("monday this week")|date("Y-m-d")), "startDateMax" : ("now"|date_modify("sunday this week")|date("Y-m-d"))}).getQuery().getSingleScalarResult() }}</span>
                                                </span>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="form-check">
                                                <div class="float-left custom-control custom-radio form-check-input">
                                                    <input type="radio" class="custom-control-input" id="date-nextweek" name="startDate" value="nextWeek">
                                                    <label class="custom-control-label" for="date-nextweek">
                                                        {{ "Next week"|trans }}
                                                    </label>
                                                </div>
                                                <span class="float-right form-check-label">
                                                    <span class="badge badge-light round">{{ repository.getEvents({"count": true, "startDateMin" : ("now"|date_modify("monday next week")|date("Y-m-d")), "startDateMax" : ("now"|date_modify("sunday next week")|date("Y-m-d"))}).getQuery().getSingleScalarResult() }}</span>
                                                </span>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="form-check">
                                                <div class="float-left custom-control custom-radio form-check-input">
                                                    <input type="radio" class="custom-control-input" id="date-thismonth" name="startDate" value="thisMonth">
                                                    <label class="custom-control-label" for="date-thismonth">
                                                        {{ "This month"|trans }}
                                                    </label>
                                                </div>
                                                <span class="float-right form-check-label">
                                                    <span class="badge badge-light round">{{ repository.getEvents({"count": true, "startDateMin" : ("now"|date("Y-m-01")), "startDateMax" : ("now"|date("Y-m-t"))}).getQuery().getSingleScalarResult() }}</span>
                                                </span>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="form-check">
                                                <div class="float-left custom-control custom-radio form-check-input">
                                                    <input type="radio" class="custom-control-input" id="date-nextmonth" name="startDate" value="nextMonth">
                                                    <label class="custom-control-label" for="date-nextmonth">
                                                        {{ "Next month"|trans }}
                                                    </label>
                                                </div>
                                                <span class="float-right form-check-label">
                                                    <span class="badge badge-light round">{{ repository.getEvents({"count": true, "startDateMin" : ("now"|date_modify("+1 month")|date("Y-m-01")), "startDateMax" : ("now"|date_modify("+1 month")|date("Y-m-t"))}).getQuery().getSingleScalarResult() }}</span>
                                                </span>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="form-check">
                                                <div class="float-left custom-control custom-radio form-check-input">
                                                    <input type="radio" class="custom-control-input datepicker" id="date-pickadate" name="startDate" value="all">
                                                    <label class="custom-control-label" for="date-pickadate">
                                                        {{ "Pick a date"|trans }}
                                                    </label>
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            {% endif %}
                            {% if envFileAccessor.getSetting("show_ticket_price_filter") == "1" %}
                                <article class="card-group-item">
                                    <header class="card-header">
                                        <a href="#" data-toggle="collapse" data-target="#filter-price">
                                            <i class="icon-action fa fa-chevron-down"></i>
                                            <h6 class="title">{{ "Ticket price"|trans }}</h6>
                                        </a>
                                    </header>
                                    <div class="filter-content collapse show" id="filter-price">
                                        <div class="card-body">

                                            <div class="custom-control custom-checkbox form-check-input ml-0 mb-4">
                                                <input type="checkbox" class="custom-control-input" id="free-events-only" name="freeOnly" value="1">
                                                <label class="custom-control-label" for="free-events-only">
                                                    {{ "Free events only"|trans }}
                                                </label>
                                            </div>

                                            <div class="events-price-range-slider-wrapper">
                                                <div class="range-slider mb-3" data-min="0" data-max="10000" data-start-left="{{ app.request.get('priceMin') ?? "0" }}" data-start-right="{{ app.request.get('priceMax') ?? "1000000" }}"></div>
                                                <div class="row ranger-slider-inputs">
                                                    <div class="col-12 col-sm-6">
                                                        <label for="priceMin">{{"Min"|trans }}</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">{{ envFileAccessor.getSetting('currency_symbol') }}</span>
                                                            </div>
                                                            <input id="priceMin" name="priceMin" type="text" class="form-control range-slider-min-input" value="{{ app.request.query.get('priceMin') }}" placeholder="{{ "Min"|trans }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6">
                                                        <label for="priceMax">{{"Max"|trans }}</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">{{ envFileAccessor.getSetting('currency_symbol') }}</span>
                                                            </div>
                                                            <input id="priceMax" name="priceMax" type="text" class="form-control range-slider-max-input" value="{{ app.request.query.get('priceMax') }}" placeholder="{{ "Max"|trans }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            {% endif %}
                            {% if envFileAccessor.getSetting("show_audience_filter") == "1" %}
                                <article class="card-group-item">
                                    <header class="card-header">
                                        <a href="#" data-toggle="collapse" data-target="#filter-audience">
                                            <i class="icon-action fa fa-chevron-down"></i>
                                            <h6 class="title">{{"Audience"|trans }}</h6>
                                        </a>
                                    </header>
                                    <div class="filter-content collapse show" id="filter-audience">
                                        <div class="card-body">
                                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                                {% for audience in repository.getAudiences({}).getQuery().getResult() %}
                                                    <label class="btn btn-light btn-sm py-2 px-3" data-toggle="tooltip" title="{{ audience.name }}">
                                                        <input type="radio" name="audience" id="{{ audience.slug }}" value="{{ audience.slug }}">
                                                        <img src="{{ vich_uploader_asset(audience, 'imageFile') }}" class="img-15-15" alt="{{ audience.name }}">
                                                    </label>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            {% endif %}
                            <article class="card-group-item">
                                <div class="card-body">
                                    <button class="btn btn-block btn-outline-primary"><i class="fas fa-search"></i> {{ "Search"|trans }}</button>
                                </div>
                            </article>
                        </form>
                    </div>
                    {% if envFileAccessor.getSetting("newsletter_enabled") == "1" and envFileAccessor.getSetting("mailchimp_api_key") and envFileAccessor.getSetting("mailchimp_audience_id") %}
                        {% include "Global/newsletter-box.html.twig" %}
                    {% endif %}
                </aside>
                <div class="col-lg-9 order-1 order-lg-2">
                    {% if events.getTotalItemCount > 0 %}
                        <div class="row">
                            {% for event in events %}
                                <div class="col-12 col-sm-6 col-lg-6 mb-3">
                                    {% include "Global/event-card.html.twig" with {event: event} %}
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        {% include "Global/message.html.twig" with { type: "info", message: ('No events found'|trans), icon: "fas fa-exclamation-circle" } %}
                    {% endif %}
                    {{ knp_pagination_render(events, null, {}, {'align': 'center'}) }}
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block javascripts %}

    {% if envFileAccessor.getSetting("show_map_button") == "1" and envFileAccessor.getSetting('google_maps_api_key') != "" %}

        <script src="{{ asset('vendor/marker-clusterer/marker-clusterer.js') }}"></script>
        <script src="{{ asset('vendor/handlebars/dist/handlebars.min.js') }}"></script>
        {% include "Global/event-info-box.html.twig" %}

        <script>


            // snazzy-info-window must be loader after Google Maps is completely loader
            function initMap() {
                if ($('#events-map').length > 0) {
                    $.getScript('https://cdn.jsdelivr.net/npm/snazzy-info-window@1.1.1/dist/snazzy-info-window.min.js', function () {
                        drawMap($('#events-map').data('events'));
                    });
                }
            }

// Initializes Google Maps

            function drawMap(events) {

                var map = new google.maps.Map(document.getElementById('events-map'), {
                    zoom: 7,
                    center: {
                        lat: parseFloat(events[0].lat),
                        lng: parseFloat(events[0].lng)
                    }
                });

                var markers = events.map(function (event, i) {
                    var marker = new google.maps.Marker({
                        position: {
                            lat: parseFloat(event.lat),
                            lng: parseFloat(event.lng)
                        },
                        icon: $('#events-map').data('pin-path')
                    });

                    var template = Handlebars.compile($('#event-info-box').html());

                    var info = null;
                    var closeDelayed = false;
                    var closeDelayHandler = function () {
                        $(info.getWrapper()).removeClass('active');
                        setTimeout(function () {
                            closeDelayed = true;
                            info.close();
                        }, 300);
                    };
                    // Add a Snazzy Info Window to the marker
                    info = new SnazzyInfoWindow({
                        marker: marker,
                        wrapperClass: 'custom-window',
                        offset: {
                            top: '-72px'
                        },
                        edgeOffset: {
                            top: 50,
                            right: 60,
                            bottom: 50
                        },
                        border: false,
                        closeButtonMarkup: '<button type="button" class="custom-close">&#215;</button>',
                        content: template({
                            title: event.name,
                            link: event.link,
                            bgImg: event.image,
                            body:
                                    '<p class="text-muted"><small>' + event.address + '</small></p>' +
                                    '<p class="text-muted"><small>' + event.date + '</small></p>' +
                                    '<p class="text-muted"><small>' + ($('body').data('currency-position') == 'left' ? $('body').data('currency-symbol') : '') + event.price + ($('body').data('currency-position') == 'right' ? $('body').data('currency-symbol') : '') + '</small></p>'
                        }),
                        callbacks: {
                            open: function () {
                                $(this.getWrapper()).addClass('open');
                            },
                            afterOpen: function () {
                                var wrapper = $(this.getWrapper());
                                wrapper.addClass('active');
                                wrapper.find('.custom-close').on('click', closeDelayHandler);
                            },
                            beforeClose: function () {
                                if (!closeDelayed) {
                                    closeDelayHandler();
                                    return false;
                                }
                                return true;
                            },
                            afterClose: function () {
                                var wrapper = $(this.getWrapper());
                                wrapper.find('.custom-close').off();
                                wrapper.removeClass('open');
                                closeDelayed = false;
                            }
                        }
                    });

                    return marker;
                });
                new MarkerClusterer(map, markers,
                        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
            }


        </script>

        <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ envFileAccessor.getSetting('google_maps_api_key') }}&callback=initMap">
        </script>

    {% endif %}

    {% if envFileAccessor.getSetting('SHOW_CALENDAR_BUTTON') == "1" %}
        <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.20/index.global.min.js'></script>
    {% endif %}

    <script>

            document.addEventListener('DOMContentLoaded', function () {

                $(document).ready(function () {

                    // Search filters

                    $('#filter-local-only').on('change', function () {
                        if ($(this).is(':checked')) {
                            $('#user-country').show();
                            $('#filter-country-container').hide();
                            $('#country').select2('val', 'all');
                            $('.filter-online-container').hide();
                            $('#filter-online-only').prop("checked", false);
                            $('#filter-location-container').hide();
                            $('#location').val('');
                        } else {
                            $('#user-country').hide();
                            $('#filter-country-container').show();
                            $('.filter-online-container').show();
                        }
                    });
                    if (getURLParameter('localOnly') == "1") {
                        $('#filter-local-only').attr('checked', true);
                        $('#filter-local-only').trigger('change');
                    }
                    if (getURLParameter('category')) {
                        $('select#category option').each(function () {
                            if ($(this).val() == getURLParameter('category'))
                            {
                                $(this).prop('selected', true).trigger('change');
                            }
                        });
                    }
                    $('#filter-location-container').hide();
                    if (getURLParameter('country')) {
                        $('#country option').each(function () {
                            if ($(this).val() == getURLParameter('country'))
                            {
                                $(this).prop('selected', true).trigger('change');
                                $('#filter-location-container').show();
                            }
                        });
                        $('#country').trigger('change');
                    }
                    $('#country').change(function () {
                        if ($(this).val() != "all") {
                            $('#filter-location-container').show();
                        } else {
                            $('#filter-location-container').hide();
                            $('#location').val('');
                        }
                    });

                    if (getURLParameter('audience')) {
                        $('#' + getURLParameter('audience')).attr('checked', true);
                        $('#' + getURLParameter('audience')).closest('label').addClass('active');
                    }

                    if (getURLParameter('startDate')) {
                        if (getURLParameter('startDate') != "today" && getURLParameter('startDate') != "tomorrow" && getURLParameter('startDate') != "thisweekend" && getURLParameter('startDate') != "thisweek" && getURLParameter('startDate') != "nextweek" && getURLParameter('startDate') != "thismonth" && getURLParameter('startDate') != "nextmonth") {
                            $('#date-pickadate').val(getURLParameter('startDate'));
                            $('#date-pickadate').attr('checked', true);
                        } else {
                            $('input[name="startDate"][value="' + getURLParameter('startDate') + '"]').attr('checked', true);
                        }
                    }

                    $('#free-events-only').on('change', function () {
                        if ($(this).is(':checked')) {
                            $('.events-price-range-slider-wrapper').hide();
                            $('#pricemin').val('0');
                            $('#pricemin').trigger('change');
                            $('#pricemax').val('10000');
                            $('#pricemax').trigger('change');
                        } else {
                            $('.events-price-range-slider-wrapper').show();
                        }
                    });
                    if (getURLParameter('freeOnly') == "1") {
                        $('#free-events-only').attr('checked', true);
                        $('#free-events-only').trigger('change');
                    }

                    $('#filter-online-only').on('change', function () {
                        if ($(this).is(':checked')) {
                            $('.location-based-filters').hide();
                            $('#filter-local-only').prop("checked", false);
                            $('#country').select2('val', 'all');
                            $('#filter-location-container').hide();
                            $('#location').val('');
                        } else {
                            $('.location-based-filters').show();
                        }
                    });
                    if (getURLParameter('onlineOnly') == "1") {
                        $('#filter-online-only').attr('checked', true);
                        $('#filter-online-only').trigger('change');
                    }

                    // Initializes events calendar
                    if ($('#events-calendar').length) {
                        var calendarEl = document.getElementById('events-calendar');

                        var calendar = new FullCalendar.Calendar(calendarEl, {
                            schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                            initialView: 'dayGridMonth',
                            height: "auto",
                            locale: $('html').attr('lang'),
                            headerToolbar: {
                                left: 'prev,next today',
                                center: 'title',
                                right: 'dayGridMonth,timeGridWeek,timeGridDay'
                            },
                            buttonText: {
                                today: "{{ "Today"|trans }}",
                                day: "{{ "Day"|trans }}",
                                week: "{{ "Week"|trans }}",
                                month: "{{ "Month"|trans }}"
                            },
                            events: $('#events-calendar').data('events')
                        });

                        calendar.render();

                        $('#events-calendar-wrapper').on('shown.bs.collapse', function () {
                            calendar.updateSize();
                        });

                    }

                });

            });

    </script>

{% endblock %}