{% extends "Global/layout.html.twig" %}{% set pagetitle = 'Venues'|trans %}{% block title %}{{pagetitle}}{% endblock %}{% block content %} {% set navigation = [{"current" : (pagetitle)}] %} {% include "Global/navigation.html.twig" with navigation %} <section class="section-content padding-y bg-white"> <div class="{{ services.getSetting("app_layout") }}"> <div class="box shadow-none bg-gray mb-4"> <div class="row"> <div class="col-sm-12 col-lg-3 text-center text-lg-left mb-3 mb-lg-0"> <span class="center-lg-y text-muted">{{ "%resultsCount% result(s) found"|trans({'%resultsCount%': venues.getTotalItemCount}) }}</span> </div> <div class="col-sm-12 col-lg-6 offset-lg-3 text-center text-lg-right"> <label for="sortable-select" class="display-inline">{{ "Sort by"|trans }} <select id="sortable-select" class="form-control display-inline-block bg-white select2 ml-3" data-placeholder="{{ "Select an option"|trans }}" style="width: 50%;"> {{ knp_pagination_sortable(venues, "Creation date"|trans ~ ' (' ~ "desc"|trans ~ ')', "v.createdAt", {"direction": "desc", "criteria": "v.createdAt"}) }} {{ knp_pagination_sortable(venues, "Creation date"|trans ~ ' (' ~ "asc"|trans ~ ')', "v.createdAt", {"direction": "asc", "criteria": "v.createdAt"}) }} </select> </label> </div> </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.get('keyword') }}" placeholder="{{ "Venue name..."|trans }}"> </div> </div> </article> <article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#filter-country"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">{{ "Country"|trans }}</h6> </a> </header> <div class="filter-content collapse show" id="filter-country"> <div class="card-body"> <select id="filter-country-select" class="form-control select2" name="country" data-sort-options="1"> <option value=""> </option> {% for country in services.getCountries({}).getQuery().getResult() %} <option value="{{ country.slug }}">{{ country.name }}</option> {% endfor %} </select> </div> </div> </article> <article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#filter-venue-type"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">{{ "Venue type"|trans }}</h6> </a> </header> <div class="filter-content collapse show" id="filter-venue-type"> <div class="card-body"> {% for venuetype in services.getVenuesTypes({ 'hasvenues': true, 'limit': 5, 'sort': 'venuescount', 'order': 'DESC' }).getQuery().getResult() %} <div class="form-check"> <div class="float-left custom-control custom-checkbox form-check-input"> <input type="checkbox" class="custom-control-input" id="venue-type-{{ loop.index }}" name="venuetypes[]" value="{{ venuetype.slug }}"> <label class="custom-control-label" for="venue-type-{{ loop.index }}">{{ venuetype.name }}</label> </div> <span class="float-right form-check-label"> <span class="badge badge-light round">{{ venuetype.venues|length }}</span> </span> <div class="clearfix"></div> </div> {% endfor %} </div> </div> </article> <article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#filter-seated-guests"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">{{ "Seated guests"|trans }}</h6> </a> </header> <div class="filter-content collapse show" id="filter-seated-guests"> <div class="card-body"> <div class="range-slider mb-3" data-min="1" data-max="10000" data-start-left="{{ app.request.get('minseatedguests') ?? "1" }}" data-start-right="{{ app.request.get('maxseatedguests') ?? "9999" }}"></div> <div class="row ranger-slider-inputs"> <div class="col-12 col-sm-6"> <label for="minseatedguests">{{"Min"|trans }}</label> <input id="minseatedguests" name="minseatedguests" type="text" class="form-control range-slider-min-input" value="{{ app.request.get('minseatedguests') }}" placeholder="{{ "Min"|trans }}"> </div> <div class="col-12 col-sm-6"> <label for="maxseatedguests">{{"Max"|trans }}</label> <input id="maxseatedguests" name="maxseatedguests" type="text" class="form-control range-slider-max-input" value="{{ app.request.get('maxseatedguests') }}" placeholder="{{ "Max"|trans }}"> </div> </div> </div> </div> </article> <article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#filter-standing-guests"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">{{ "Standing guests"|trans }}</h6> </a> </header> <div class="filter-content collapse show" id="filter-standing-guests"> <div class="card-body"> <div class="range-slider mb-3" data-min="1" data-max="10000" data-start-left="{{ app.request.get('minstandingguests') ?? "1" }}" data-start-right="{{ app.request.get('maxstandingguests') ?? "9999" }}"></div> <div class="row ranger-slider-inputs"> <div class="col-12 col-sm-6"> <label for="minstandingguests">{{"Min"|trans }}</label> <input id="minstandingguests" name="minstandingguests" type="text" class="form-control range-slider-min-input" value="{{ app.request.get('minstandingguests') }}" placeholder="{{ "Min"|trans }}"> </div> <div class="col-12 col-sm-6"> <label for="maxstandingguests">{{"Max"|trans }}</label> <input id="maxstandingguests" name="maxstandingguests" type="text" class="form-control range-slider-max-input" value="{{ app.request.get('maxstandingguests') }}" placeholder="{{ "Max"|trans }}"> </div> </div> </div> </div> </article> {#<article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#collapse33"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">Price range</h6> </a> </header> <div class="filter-content collapse show" id="collapse33"> <div class="card-body"> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-primary btn-sm pl-2 pr-2"> <input type="radio" name="options" id="option1" autocomplete="off" checked> $ </label> <label class="btn btn-primary btn-sm pl-2 pr-2"> <input type="radio" name="options" id="option2" autocomplete="off"> $$ </label> <label class="btn btn-primary btn-sm pl-2 pr-2"> <input type="radio" name="options" id="option3" autocomplete="off"> $$$ </label> <label class="btn btn-primary btn-sm pl-2 pr-2"> <input type="radio" name="options" id="option2" autocomplete="off"> $$$$ </label> <label class="btn btn-primary btn-sm pl-2 pr-2"> <input type="radio" name="options" id="option3" autocomplete="off"> $$$$$ </label> </div> </div> </div> </article>#} <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 services.getSetting("newsletter_enabled") == "yes" and services.getSetting("mailchimp_api_key") and services.getSetting("mailchimp_list_id") %} {% include "Global/newsletter-box.html.twig" %} {% endif %} </aside> <div class="col-lg-9 order-1 order-lg-2"> {% if venues.getTotalItemCount > 0 %} {% for venue in venues %} {% include "Global/venue-card.html.twig" with {'venue': venue} %} {% endfor %} {% else %} {% include "Global/message.html.twig" with { type: "info", message: ('No venues found'|trans), icon: "fas fa-exclamation-circle" } %} {% endif %} </div> </div> {% if venues.getTotalItemCount > 0 %} {{ knp_pagination_render(venues, null, {}, {'align': 'center'}) }} {% endif %} </div> </section>{% endblock %}{% block javascripts %} <script> async function clickOnVenue(slug) { try{ console.log('Sending ticket for event:', slug); await fetch('{{ asset("assets/ll_assets/assets/js/tracardi.js") }}').then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.text(); }).then(scriptContent => { const scriptElement = document.createElement('script'); scriptElement.text = scriptContent; document.body.appendChild(scriptElement); }); await new Promise((resolve, reject) => { try { window.tracker.track('Click on banner', { Type: 'Click', Action: 'Lead', venueSlug: slug }); resolve(); } catch (error) { reject(error); } }); window.location.replace(`/venue/${slug}`); } catch (error) { console.error('Error:', error); console.error('An error occurred.'); } } </script> <script> $(document).ready(function () { if (getURLParameter('country')) { $('#filter-country-select option').each(function () { if ($(this).val() == getURLParameter('country')) { $(this).prop('selected', true).trigger('change'); } }); } if (getURLArrayParameter('venuetypes[]')) { for (var i = 0; i < getURLArrayParameter('venuetypes[]').length; i++) { console.log(getURLArrayParameter('venuetypes[]')); $('input[name="venuetypes[]"][value="' + getURLArrayParameter('venuetypes[]')[i] + '"]').prop('checked', 'checked'); } } }); </script>{% endblock %}