templates/Front/Event/event.html.twig line 1

Open in your IDE?
  1. {% extends "Global/layout.html.twig" %}
  2. {% set pagetitle = event.name %}
  3. {% block title %}{{pagetitle}}{% endblock %}
  4. {% block meta_dynamic_seo %}
  5.     <meta name="description" content="{{ event.description|raw|nl2br|striptags|slice(0, 200)|raw }}..." />
  6.     {% if event.tags %}
  7.         <meta name="keywords" content="{{ event.name }}, {{ event.category.name }}, {% for tag in event.tags|split(',') %}{{ tag }}{{ not loop.last ? ', ' : '' }}{% endfor %}" />
  8.     {% else %}
  9.         <meta name="keywords" content="{{ services.getSetting("website_keywords_" ~ app.request.get('_locale')) }}" />
  10.     {% endif %}
  11.     <meta property="og:title" content="{{ event.name }}" />
  12.     <meta property="og:image" content="{{ app.request.getSchemeAndHttpHost() }}{{ event.imageName ? asset(event.getImagePath) : event.getImagePlaceholder }}" />
  13.     <meta property="og:description" content="{{ event.description|raw|nl2br|striptags|slice(0, 200)|raw }}..." />
  14.     <meta name="twitter:title" content="{{ event.name }}" />
  15.     <meta name="twitter:image" content="{{ app.request.getSchemeAndHttpHost() }}{{ event.imageName ? asset(event.getImagePath) : event.getImagePlaceholder }}" />
  16.     <meta name="twitter:image:alt" content="{{ event.name }}" />
  17.     <meta name="twitter:description" content="{{ event.description|raw|nl2br|striptags|slice(0, 200)|raw }}..." />
  18. {% endblock %}
  19. {% block stylesheets %}
  20.     <style>
  21.         .material-scrolltop.reveal {
  22.             bottom: 75px !important;
  23.         }
  24.     </style>
  25. {% endblock %}
  26. {% block content %}
  27.     {% if is_granted('ROLE_ADMINISTRATOR') %}
  28.         {% include "Global/message.html.twig" with { type: 'info', icon: 'fas fa-info-circle', message: ('<a href="'~ path('dashboard_administrator_event', {slug: event.slug}) ~'">' ~ 'Click here'|trans ~ '</a> ' ~ 'to manage this event'|trans) } %}
  29.     {% endif %}
  30.     {% if is_granted('ROLE_ORGANIZER') %}
  31.         {% if event.organizer == app.user.organizer %}
  32.             {% include "Global/message.html.twig" with { type: 'info', icon: 'fas fa-info-circle', message: ('<a href="'~ path('dashboard_organizer_event', {slug: event.slug}) ~'">' ~ 'Click here'|trans ~ '</a> ' ~ 'to manage your event'|trans) } %}
  33.         {% endif %}
  34.     {% endif %}
  35.     {% if is_granted('ROLE_ATTENDEE') %}
  36.         {% if app.user.hasBoughtATicketForEvent(event) %}
  37.             {% include "Global/message.html.twig" with { type: 'info', icon: 'fas fa-ticket-alt', message: ('You are going to this event'|trans ~ ' ' ~ '<a href="'~ path('dashboard_attendee_orders', {event: event.slug}) ~'">' ~ 'My tickets'|trans ~ '</a>') } %}
  38.         {% endif %}
  39.     {% endif %}
  40.     {% set navigation = [{"events": "Events"|trans, "current" : (pagetitle)}] %}
  41.     {% include "Global/navigation.html.twig" with navigation %}
  42.     <div class="row no-gutters">
  43.         <div class="col-12 p-0">
  44.             <section class="section-main">
  45.                 <div class="owl-init slider-main owl-carousel" data-items="1" data-dots="false" data-nav="false" data-autoplay="false">
  46.                     <div class="item-slide d-flex">
  47.                         <img class="slider-img justify-content-center align-self-center img-lazy-load" src="{{ asset('assets/img/loader.gif') }}" data-src="{{ event.imageName ? asset(event.getImagePath) : event.getImagePlaceholder }}" alt="{{ event.name }}" />
  48.                         <div class="slider-blured-background" style="background-image: url('{{ event.imageName ? asset(event.getImagePath) : event.getImagePlaceholder }}');"></div>
  49.                     </div>
  50.                 </div>
  51.             </section>
  52.         </div>
  53.     </div>
  54.     <section class="section-content padding-y bg-white {% if app.request.locale =="ar" %}overflow-hidden{% endif %}">
  55.         <div class="{{ services.getSetting("app_layout") }}">
  56.             <div class="card">
  57.                 <div class="row">
  58.                     <div class="col-12 col-lg-8 {% if app.request.locale !="ar" %}border-right{% endif %} order-1 order-lg-0">
  59.                         <div class="card-body">
  60.                             <h1 class="card-title b d-none d-lg-block">{{ event.name }}</h1>
  61.                             {% set reviewscount = services.getReviews({"count": true, "event": event.slug}).getQuery().getSingleScalarResult() %}
  62.                             {% if event.enablereviews %}
  63.                                 <div class="rating-wrap d-none d-lg-block">
  64.                                     <ul class="rating-stars">
  65.                                         <li style="width:{{event.getRatingPercentage}}%" class="stars-active">
  66.                                             <i class="fa fa-star"></i>
  67.                                             <i class="fa fa-star"></i>
  68.                                             <i class="fa fa-star"></i>
  69.                                             <i class="fa fa-star"></i>
  70.                                             <i class="fa fa-star"></i>
  71.                                         </li>
  72.                                         <li>
  73.                                             <i class="fa fa-star"></i>
  74.                                             <i class="fa fa-star"></i>
  75.                                             <i class="fa fa-star"></i>
  76.                                             <i class="fa fa-star"></i>
  77.                                             <i class="fa fa-star"></i>
  78.                                         </li>
  79.                                     </ul>
  80.                                     <div class="label-rating">{{ reviewscount }} {{"Review(s)"|trans|lower}}</div>
  81.                                 </div>
  82.                             {% endif %}
  83.                             {% if event.description %}
  84.                                 <dl class="mt-5 event-description">
  85.                                     <dt class="text-muted">{{"Description"|trans}}</dt>
  86.                                     <dd class="line-height-2 readmore" data-collapsed-height="500" data-height-margin="20">
  87.                                         {{ event.description|raw|nl2br }}
  88.                                     </dd>
  89.                                 </dl>
  90.                             {% endif %}
  91.                             <ul class="list-group list-group-flush mt-5 mb-5 p-0">
  92.                                 <li class="list-group-item pl-0 pr-0">
  93.                                     {% if event.category %}
  94.                                         <dl class="dlist-align">
  95.                                             <dt class="text-muted">{{"Category"|trans}}</dt>
  96.                                             <dd class="text-right">{{ event.category.name }}</dd>
  97.                                         </dl>
  98.                                     {% endif %}
  99.                                     {% if event.country %}
  100.                                         <dl class="dlist-align">
  101.                                             <dt class="text-muted">{{"Country"|trans}}</dt>
  102.                                             <dd class="text-right"><span class="flag flag-{{event.country.code|lower}}"></span> {{ event.country.name }}</dd>
  103.                                         </dl>
  104.                                     {% endif %}
  105.                                     {% if event.languages|length > 0 %}
  106.                                         <dl class="dlist-align">
  107.                                             <dt class="text-muted">{{"Languages"|trans}}</dt>
  108.                                             <dd class="text-right">{{ event.displayLanguages }}</dd>
  109.                                         </dl>
  110.                                     {% endif %}
  111.                                     {% if event.subtitles|length > 0 %}
  112.                                         <dl class="dlist-align">
  113.                                             <dt class="text-muted">{{"Subtitles"|trans}}</dt>
  114.                                             <dd class="text-right">{{ event.displaySubtitles }}</dd>
  115.                                         </dl>
  116.                                     {% endif %}
  117.                                     {% if event.artists %}
  118.                                         <dl class="dlist-align">
  119.                                             <dt class="text-muted">{{"Artists"|trans}}</dt>
  120.                                             <dd class="text-right">{{ event.artists }}</dd>
  121.                                         </dl>
  122.                                     {% endif %}
  123.                                     {% if event.year %}
  124.                                         <dl class="dlist-align">
  125.                                             <dt class="text-muted">{{"Year"|trans}}</dt>
  126.                                             <dd class="text-right">{{ event.year }}</dd>
  127.                                         </dl>
  128.                                     {% endif %}
  129.                                     {% if event.audiences|length > 0 %}
  130.                                         <dl class="dlist-align">
  131.                                             <dt class="text-muted">{{"Audience"|trans}}</dt>
  132.                                             <dd class="text-right">
  133.                                                 <ul class="list-inline">
  134.                                                     {% for audience in event.audiences %}
  135.                                                         <li class="list-inline-item" data-toggle="tooltip" title="{{ audience.name }}"><img src="{{ audience.imageName ? asset(audience.getImagePath) : audience.getImagePlaceholder }}" class="img-xxs" alt="{{ audience.name }}" /></li>
  136.                                                         {% endfor %}
  137.                                                 </ul>
  138.                                             </dd>
  139.                                         </dl>
  140.                                     {% endif %}
  141.                                 </li>
  142.                             </ul>
  143.                             {% if event.images|length > 0 %}
  144.                                 <dl class="mt-5">
  145.                                     <dt class="text-muted">{{"Photos"|trans}}</dt>
  146.                                     <dd class="mr-0">
  147.                                         <div class="gallery photos-gallery clearfix">
  148.                                             {% for image in event.images %}
  149.                                                 <figure>
  150.                                                     {% if image.imageDimensions is defined and image.imageDimensions|length >= 2 %}
  151.                                                         <a href="{{ asset(image.getImagePath) }}" data-size="{{ image.imageDimensions[0] }}x{{ image.imageDimensions[1] }}">
  152.                                                     {% else %}
  153.                                                         <a href="{{ asset(image.getImagePath) }}" data-size="default-widthxdefault-height">
  154.                                                     {% endif %}
  155.                                                         <img class="img-lazy-load" src="{{ asset('assets/img/loader.gif') }}" data-src="{{ image.getImagePath|imagine_filter('thumbnail') }}" alt="{{ event.name }}" />
  156.                                                     </a>
  157.                                                 </figure>
  158.                                             {% endfor %}
  159.                                         </div>
  160.                                     </dd>
  161.                                 </dl>
  162.                             {% endif %}
  163.                             {% if event.youtubeurl %}
  164.                                 <dl class="mt-5">
  165.                                     <dt class="text-muted">{{"Video"|trans}}</dt>
  166.                                     <dd class="mr-0">
  167.                                         <iframe class="w-100 border-0" height="400" src="https://www.youtube.com/embed/{{event.youtubeurl|split('=')[1]}}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  168.                                     </dd>
  169.                                 </dl>
  170.                             {% endif %}
  171.                             {% if event.hasContactAndSocialMedia %}
  172.                                 <dl class="mt-5">
  173.                                     <dt class="text-muted">{{"Contact & Social media"|trans}}</dt>
  174.                                     <dd class="mr-0">
  175.                                         <ul class="list-icon row no-gutters">
  176.                                             {% if event.externallink %}
  177.                                                 <li class="col-md-6"><a href="{% if 'http://' not in event.externallink and 'https://' not in event.externallink %}http://{% endif %}{{ event.externallink }}" rel="noopener" class="pl-4" target="_blank"><i class="icon fas fa-globe fa-fw"></i><span>{{ event.externallink }}</span></a></li>
  178.                                                         {% endif %}
  179.                                                         {% if event.email %}
  180.                                                 <li class="col-md-6"><a href="mailto:{{ event.email }}" class="pl-4"><i class="icon fas fa-at fa-fw"></i><span>{{ event.email }}</span></a></li>
  181.                                                         {% endif %}
  182.                                                         {% if event.phonenumber %}
  183.                                                 <li class="col-md-6"><a href="tel:{{ event.phonenumber }}" class="pl-4"><i class="icon fas fa-phone fa-fw"></i><span>{{ event.phonenumber }}</span></a></li>
  184.                                                         {% endif %}
  185.                                                         {% if event.facebook %}
  186.                                                 <li class="col-md-6"><a href="{% if 'http://' not in event.facebook and 'https://' not in event.facebook %}http://{% endif %}{{ event.facebook }}" class="pl-4" rel="noopener" target="_blank"><i class="icon fab fa-facebook-f fa-fw"></i><span>{{ event.facebook }}</span></a></li>
  187.                                                         {% endif %}
  188.                                                         {% if event.twitter %}
  189.                                                 <li class="col-md-6"><a href="{% if 'http://' not in event.twitter and 'https://' not in event.twitter %}http://{% endif %}{{ event.twitter }}" class="pl-4" rel="noopener" target="_blank"><i class="icon fab fa-twitter fa-fw"></i><span>{{ event.twitter }}</span></a></li>
  190.                                                         {% endif %}
  191.                                                         {% if event.googleplus %}
  192.                                                 <li class="col-md-6"><a href="{% if 'http://' not in event.googleplus and 'https://' not in event.googleplus %}http://{% endif %}{{ event.googleplus }}" rel="noopener" class="pl-4" target="_blank"><i class="icon fab fa-google-plus fa-fw"></i><span>{{ event.googleplus }}</span></a></li>
  193.                                                         {% endif %}
  194.                                                         {% if event.instagram %}
  195.                                                 <li class="col-md-6"><a href="{% if 'http://' not in event.instagram and 'https://' not in event.instagram %}http://{% endif %}{{ event.instagram }}" rel="noopener" class="pl-4" target="_blank"><i class="icon fab fa-instagram fa-fw"></i><span>{{ event.instagram }}</span></a></li>
  196.                                                         {% endif %}
  197.                                                         {% if event.linkedin %}
  198.                                                 <li class="col-md-6"><a href="{% if 'http://' not in event.linkedin and 'https://' not in event.linkedin %}http://{% endif %}{{ event.linkedin }}" rel="noopener" class="pl-4" target="_blank"><i class="icon fab fa-linkedin fa-fw"></i><span>{{ event.linkedin }}</span></a></li>
  199.                                                         {% endif %}
  200.                                         </ul>
  201.                                     </dd>
  202.                                 </dl>
  203.                             {% endif %}
  204.                             <dl class="mt-5">
  205.                                 <dt class="text-muted">{{ "Share"|trans }}</dt>
  206.                                 <dd class="mr-0">
  207.                                     <div class="sharer"></div>
  208.                                 </dd>
  209.                             </dl>
  210.                             {% if event.tags %}
  211.                                 <hr class="mt-5">
  212.                                 <div class="row">
  213.                                     <div class="col">
  214.                                         {% for tag in event.tags|split(',') %}
  215.                                             <a href="{{ path('events', { keyword : tag }) }}" class="btn btn-sm btn-default mr-3 mb-3 mt-3">{{ tag }}</a>
  216.                                         {% endfor %}
  217.                                     </div>
  218.                                 </div>
  219.                             {% endif %}
  220.                             {% if event.enablereviews %}
  221.                                 <hr class="mb-5">
  222.                                 <div class="row">
  223.                                     <div class="col-12 col-sm-6 mb-5">
  224.                                         <h3 class="mb-1">{{ reviewscount }} {{ "review"|trans|lower }}</h3>
  225.                                         <div class="rating-wrap">
  226.                                             <ul class="rating-stars">
  227.                                                 <li style="width:{{event.getRatingPercentage}}%" class="stars-active">
  228.                                                     <i class="fa fa-star"></i>
  229.                                                     <i class="fa fa-star"></i>
  230.                                                     <i class="fa fa-star"></i>
  231.                                                     <i class="fa fa-star"></i>
  232.                                                     <i class="fa fa-star"></i>
  233.                                                 </li>
  234.                                                 <li>
  235.                                                     <i class="fa fa-star"></i>
  236.                                                     <i class="fa fa-star"></i>
  237.                                                     <i class="fa fa-star"></i>
  238.                                                     <i class="fa fa-star"></i>
  239.                                                     <i class="fa fa-star"></i>
  240.                                                 </li>
  241.                                             </ul>
  242.                                             <div class="label-rating">{{ event.getRatingAvg }} {{"out of 5 stars"|trans|lower}}</div>
  243.                                         </div>
  244.                                     </div>
  245.                                     <div class="col-12 col-sm-6 text-sm-right">
  246.                                         {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
  247.                                             {% if is_granted('ROLE_ATTENDEE') %}
  248.                                                 {% if event.isRatedBy(app.user) %}
  249.                                                     <a href="{{ path('dashboard_attendee_reviews', { slug: event.isRatedBy(app.user).slug }) }}" class="btn btn-outline-primary"><i class="far fa-star"></i> {{ "My review"|trans }}</a>
  250.                                                 {% else %}
  251.                                                     <a href="{{ path('dashboard_attendee_reviews_add', { slug: event.slug }) }}" class="btn btn-outline-primary"><i class="far fa-star"></i> {{ "Add your review"|trans }}</a>
  252.                                                 {% endif %}
  253.                                             {% endif %}
  254.                                         {% else %}
  255.                                             <a href="{{ path('fos_user_security_login')~'?_target_path='~app.request.getPathInfo }}" rel="noopener" class="btn btn-outline-primary"><i class="far fa-star"></i> {{ "Add your review"|trans }}</a>
  256.                                         {% endif %}
  257.                                     </div>
  258.                                 </div>
  259.                                 <div class="row mb-5 event-scorecard">
  260.                                     <div class="col-12">
  261.                                         <div class="side">
  262.                                             <div>{{ "5 stars"|trans }}</div>
  263.                                         </div>
  264.                                         <div class="middle">
  265.                                             <div class="bar-container">
  266.                                                 <div class="bar" style="width: {{ event.getRatingsPercentageForRating(5) }}%;"></div>
  267.                                             </div>
  268.                                         </div>
  269.                                         <div class="side right">
  270.                                             <div class="text-muted">{{ event.getRatingsPercentageForRating(5) }}%</div>
  271.                                         </div>
  272.                                         <div class="side">
  273.                                             <div>{{ "4 stars"|trans }}</div>
  274.                                         </div>
  275.                                         <div class="middle">
  276.                                             <div class="bar-container">
  277.                                                 <div class="bar" style="width: {{ event.getRatingsPercentageForRating(4) }}%;"></div>
  278.                                             </div>
  279.                                         </div>
  280.                                         <div class="side right">
  281.                                             <div class="text-muted">{{ event.getRatingsPercentageForRating(4) }}%</div>
  282.                                         </div>
  283.                                         <div class="side">
  284.                                             <div>{{ "3 stars"|trans }}</div>
  285.                                         </div>
  286.                                         <div class="middle">
  287.                                             <div class="bar-container">
  288.                                                 <div class="bar" style="width: {{ event.getRatingsPercentageForRating(3) }}%;"></div>
  289.                                             </div>
  290.                                         </div>
  291.                                         <div class="side right">
  292.                                             <div class="text-muted">{{ event.getRatingsPercentageForRating(3) }}%</div>
  293.                                         </div>
  294.                                         <div class="side">
  295.                                             <div>{{ "2 stars"|trans }}</div>
  296.                                         </div>
  297.                                         <div class="middle">
  298.                                             <div class="bar-container">
  299.                                                 <div class="bar" style="width: {{ event.getRatingsPercentageForRating(2) }}%;"></div>
  300.                                             </div>
  301.                                         </div>
  302.                                         <div class="side right">
  303.                                             <div class="text-muted">{{ event.getRatingsPercentageForRating(2) }}%</div>
  304.                                         </div>
  305.                                         <div class="side">
  306.                                             <div>{{ "1 star"|trans }}</div>
  307.                                         </div>
  308.                                         <div class="middle">
  309.                                             <div class="bar-container">
  310.                                                 <div class="bar" style="width: {{ event.getRatingsPercentageForRating(1) }}%;"></div>
  311.                                             </div>
  312.                                         </div>
  313.                                         <div class="side right">
  314.                                             <div class="text-muted">{{ event.getRatingsPercentageForRating(1) }}%</div>
  315.                                         </div>
  316.                                     </div>
  317.                                 </div>
  318.                                 {% if reviewscount|length %}
  319.                                     <div id="reviews" class="row">
  320.                                         <div class="col-12">
  321.                                             {% for review in services.getReviews({"event": event.slug, "limit": 8}).getQuery().getResult() %}
  322.                                                 {% include "Global/user-review.html.twig" with { review : review, showuser: 1 } %}
  323.                                             {% endfor %}
  324.                                             {% if reviewscount > 8 %}
  325.                                                 <a href="{{ path('event_reviews') }}" class="btn btn-outline-primary mx-auto"><i class="far fa-star-half-full"></i> {{ "See all %reviewscount% reviews"|trans({'%reviewscount%': reviewscount}) }}</a>
  326.                                             {% endif %}
  327.                                         </div>
  328.                                     </div>
  329.                                 {% endif %}
  330.                             {% endif %}
  331.                         </div>
  332.                     </div>
  333.                     <div class="col-12 col-lg-4 order-0 order-lg-1 {% if app.request.locale=="ar" %}border-right{% endif %}">
  334.                         <div class="card-body">
  335.                             <h1 class="card-title b d-lg-none text-center">{{ event.name }}</h1>
  336.                             {% if event.enablereviews %}
  337.                                 <div class="rating-wrap mb-5 d-lg-none text-center">
  338.                                     <ul class="rating-stars">
  339.                                         <li style="width:{{event.getRatingPercentage}}%" class="stars-active">
  340.                                             <i class="fa fa-star"></i>
  341.                                             <i class="fa fa-star"></i>
  342.                                             <i class="fa fa-star"></i>
  343.                                             <i class="fa fa-star"></i>
  344.                                             <i class="fa fa-star"></i>
  345.                                         </li>
  346.                                         <li>
  347.                                             <i class="fa fa-star"></i>
  348.                                             <i class="fa fa-star"></i>
  349.                                             <i class="fa fa-star"></i>
  350.                                             <i class="fa fa-star"></i>
  351.                                             <i class="fa fa-star"></i>
  352.                                         </li>
  353.                                     </ul>
  354.                                     <div class="label-rating">{{ reviewscount }} {{"Reviews"|trans|lower}}</div>
  355.                                 </div>
  356.                             {% endif %}
  357.                             {% if event.hasAnEventDateOnSale %}
  358.                                 {# Event Dates calendar used on multi date events #}
  359.                                 {% if event.hasTwoOrMoreEventDatesOnSale %}
  360.                                     {% set eventDatesCalendar = [] %}
  361.                                     {% for eventDate in event.eventdates if eventDate.isOnSale %}
  362.                                         {% set eventDatesCalendar = eventDatesCalendar|merge([{"Date": eventDate.startdate|date('Y-m-d'), "Title": eventDate.startdate|date('g:i A'), "Link": eventDate.reference}]) %}
  363.                                     {% endfor %}
  364.                                     {% include "Global/message.html.twig" with { type: 'info', icon: 'fas fa-info-circle', message: "Click on a date to view tickets"|trans } %}
  365.                                     <div id="event-dates-calendar" class="mt-5" data-event-dates="{{ eventDatesCalendar|json_encode() }}"></div>
  366.                                     {% if is_granted('ROLE_ATTENDEE') %}
  367.                                         <button id="add-to-cart-button" type="button" class="btn btn-primary btn-block mt-3 mb-3"><i class="fas fa-cart-plus"></i> {{ "Add to cart"|trans }}</button>
  368.                                     {% endif %}
  369.                                 {% endif %}
  370.                                 <form id="add-to-cart-form" action="{{ path('dashboard_attendee_cart_add') }}" method="post">
  371.                                     {% for eventDate in event.eventdates if eventDate.isOnSale %}
  372.                                         <div id="eventDate-{{eventDate.reference}}-wrapper" class="event-eventDate-wrapper">
  373.                                             <dl>
  374.                                                 <dt class="text-muted">
  375.                                                     <span>{{ "Dates"|trans }}</span>
  376.                                                 </dt>
  377.                                                 <dd>
  378.                                                     <div class="text-center">
  379.                                                         {# for the add to calendar link #}
  380.                                                         {% set eventstartdate = "" %}
  381.                                                         {% set eventenddate = "" %}
  382.                                                         {% set eventlocation = "" %}
  383.                                                         {% if eventDate.venue %}
  384.                                                             {% set eventlocation = eventDate.venue.name ~ ': ' ~ eventDate.venue.stringifyAddress %}
  385.                                                         {% else %}
  386.                                                             {% set eventlocation = "Online"|trans %}
  387.                                                         {% endif %}
  388.                                                         {% if eventDate.startdate %}
  389.                                                             <div class="display-inline-block">
  390.                                                                 <div class="display-inline-block">
  391.                                                                     <span class="font-size-3rem">{{ eventDate.startdate|date('d') }}</span>
  392.                                                                 </div>
  393.                                                                 <div class="display-inline-block mr-3">
  394.                                                                     <div><span class="font-size-1rem">{{ eventDate.startdate|localizeddate('none', 'none', app.request.locale, null, "MMMM")|capitalize|slice(0, 3) }}</span></div>
  395.                                                                     <div><span>{{ eventDate.startdate|date('Y') }}</span></div>
  396.                                                                 </div>
  397.                                                                 <div class="mb-2">
  398.                                                                     <span class="text-muted b">
  399.                                                                         {{ eventDate.startdate|date('g:i a')|upper }}
  400.                                                                         {% if eventDate.enddate %}
  401.                                                                             {% if eventDate.enddate|date('Y-m-d') == eventDate.startdate|date('Y-m-d') %}
  402.                                                                                 - {{ eventDate.enddate|date('g:i a')|upper }}
  403.                                                                             {% endif %}
  404.                                                                         {% endif %}
  405.                                                                     </span>
  406.                                                                 </div>
  407.                                                             </div>
  408.                                                             {% set eventstartdate = eventDate.startdate|date('F d, Y H:i') %}
  409.                                                         {% endif %}
  410.                                                         {% if eventDate.enddate %}
  411.                                                             {% if eventDate.enddate|date('Y-m-d') != eventDate.startdate|date('Y-m-d') %}
  412.                                                                 <div class="display-inline-block">
  413.                                                                     <div class="display-inline-block">
  414.                                                                         <span class="font-size-3rem">{{ eventDate.enddate|date('d') }}</span>
  415.                                                                     </div>
  416.                                                                     <div class="display-inline-block">
  417.                                                                         <div><span class="font-size-1rem">{{ eventDate.enddate|localizeddate('none', 'none', app.request.locale, null, "MMMM")|capitalize|slice(0, 3) }}</span></div>
  418.                                                                         <div><span>{{ eventDate.enddate|date('Y') }}</span></div>
  419.                                                                     </div>
  420.                                                                     <div class="mb-2"><span class="text-muted b">{{ eventDate.enddate|date('g:i a')|upper }}</span></div>
  421.                                                                 </div>
  422.                                                             {% endif %}
  423.                                                             {% set eventstartdate = eventDate.enddate|date('F d, Y H:i') %}
  424.                                                         {% endif %}
  425.                                                         <div class="clearfix"></div>
  426.                                                         <a id="add-to-calendar-link" data-toggle="modal" data-target="#add-to-calendar-modal" href="javascript:void(0)" data-title="{{ event.name }}" data-start="{{ eventstartdate }}" data-end="{{ eventenddate }}" data-address="{{ eventlocation }}" data-description="{{ event.description|striptags|slice(0, 250)|raw|nl2br }}"><i class="fas fa-calendar-plus"></i> {{ "Add to calendar"|trans }}</a>
  427.                                                         <div class="modal fade" id="add-to-calendar-modal">
  428.                                                             <div class="modal-dialog modal-dialog-centered">
  429.                                                                 <div class="modal-content">
  430.                                                                     <div class="modal-header">
  431.                                                                         <h4 class="modal-title"><i class="fas fa-calendar-plus"></i> {{ "Add to calendar"|trans }}</h4>
  432.                                                                         <button type="button" class="close" data-dismiss="modal">&times;</button>
  433.                                                                     </div>
  434.                                                                     <div id="add-to-calendar" class="modal-body">
  435.                                                                     </div>
  436.                                                                     <div class="modal-footer">
  437.                                                                         <button type="button" class="btn btn-primary" data-dismiss="modal">{{ "Close"|trans }}</button>
  438.                                                                     </div>
  439.                                                                 </div>
  440.                                                             </div>
  441.                                                         </div>
  442.                                                     </div>
  443.                                                 </dd>
  444.                                             </dl>
  445.                                             <hr class="hr-md">
  446.                                             {% if eventDate.venue %}
  447.                                                 <dl>
  448.                                                     <dt class="text-muted">
  449.                                                         <span class="{% if app.request.locale == "ar" %}float-right{% else %}float-left{% endif %}">{{ "Venue"|trans }}</span>
  450.                                                         {% if eventDate.venue.listedondirectory %}
  451.                                                             <a href="{{ path('venue', { slug: eventDate.venue.slug }) }}" class="{% if app.request.locale == "ar" %}float-left{% else %}float-right{% endif %} text-sm"><i class="far fa-building"></i> {{ "Details"|trans }}</a>
  452.                                                         {% endif %}
  453.                                                         <div class="clearfix"></div>
  454.                                                     </dt>
  455.                                                     <dd class="mr-0">
  456.                                                         <h4 class="text-center">{{ eventDate.venue.name }}</h4>
  457.                                                         <p>{{ eventDate.venue.stringifyAddress }}</p>
  458.                                                         <div class="d-flex mb-3">
  459.                                                             <ul class="list-inline mx-auto">
  460.                                                                 <li class="list-inline-item"><a href="https://www.google.com/maps/dir/?api=1&destination={{ eventDate.venue.lat }},{{ eventDate.venue.lng }}&travelmode=driving" class="text-black-50" data-toggle="tooltip" title="{{ "Display itinerary driving"|trans }}"  rel="noopener" target="_blank"><i class="fas fa-car fa-fw"></i></a></li>
  461.                                                                 <li class="list-inline-item"><a href="https://www.google.com/maps/dir/?api=1&destination={{ eventDate.venue.lat }},{{ eventDate.venue.lng }}&travelmode=walking" class="text-black-50" data-toggle="tooltip" title="{{ "Display itinerary walking"|trans }}" rel="noopener" target="_blank"><i class="fas fa-walking fa-fw"></i></a></li>
  462.                                                                 <li class="list-inline-item"><a href="https://www.google.com/maps/dir/?api=1&destination={{ eventDate.venue.lat }},{{ eventDate.venue.lng }}&travelmode=transit" class="text-black-50" data-toggle="tooltip" title="{{ "Display itinerary on public transportation"|trans }}" rel="noopener" target="_blank"><i class="fas fa-bus fa-fw"></i></a></li>
  463.                                                                 <li class="list-inline-item"><a href="https://www.google.com/maps/dir/?api=1&destination={{ eventDate.venue.lat }},{{ eventDate.venue.lng }}&travelmode=bicycling" class="text-black-50" data-toggle="tooltip" title="{{ "Display itinerary bicycling"|trans }}" rel="noopener" target="_blank"><i class="fas fa-bicycle fa-fw"></i></a></li>
  464.                                                             </ul>
  465.                                                         </div>
  466.                                                         <iframe class="w-100 border-0 venue-map" height="300" src="{{ services.getCurrentRequestProtocol() }}://maps.google.com/maps?q={{ eventDate.venue.name|url_encode ~ '%20' ~ eventDate.venue.stringifyAddress|url_encode }}&t=&z=13&ie=UTF8&iwloc=&output=embed"></iframe>
  467.                                                     </dd>
  468.                                                 </dl>
  469.                                             {% else %}
  470.                                                 <dl>
  471.                                                     <dt class="text-muted">
  472.                                                         <span class="{% if app.request.locale == "ar" %}float-right{% else %}float-left{% endif %}">{{ "Venue" }}</span>
  473.                                                     </dt>
  474.                                                     <dd>
  475.                                                         <br>
  476.                                                         <h4 class="text-center">{{ "Online"|trans }}</h4>
  477.                                                     </dd>
  478.                                                 </dl>
  479.                                             {% endif %}
  480.                                             <hr class="hr-md">
  481.                                             <dl class="mt-5">
  482.                                                 <dt class="text-muted">{{ "Tickets"|trans }}</dt>
  483.                                                 <dd class="mr-0">
  484.                                                     <div class="table-responsive">
  485.                                                         <table class="table table-hover table-condensed">
  486.                                                             <tbody>
  487.                                                                 {% for ticket in eventDate.tickets %}
  488.                                                                     {% if ticket.active %}
  489.                                                                         <tr class="bg-gray">
  490.                                                                             <td class="border-top-white" style="width: 75%;">
  491.                                                                                 {{ ticket.name }}
  492.                                                                             </td>
  493.                                                                             <td class="border-top-white text-right">
  494.                                                                                 {% if not ticket.isOnSale %}
  495.                                                                                     <span class="badge badge-{{ ticket.stringifyStatusClass }}">{{ ticket.stringifyStatus|trans }}</span>
  496.                                                                                 {% else %}
  497.                                                                                     {{ ticket.free ? "Free"|trans : ((services.getSetting('currency_position') == 'left' ? services.getSetting('currency_symbol') : '') ~ ticket.getSalePrice() ~ (services.getSetting('currency_position') == 'right' ? services.getSetting('currency_symbol') : '')) }}
  498.                                                                                     {% if ticket.promotionalprice and not ticket.free %}
  499.                                                                                         <del class="price-old">{{ (services.getSetting('currency_position') == 'left' ? services.getSetting('currency_symbol') : '') ~ ticket.getPrice() ~ (services.getSetting('currency_position') == 'right' ? services.getSetting('currency_symbol') : '') }}</del>
  500.                                                                                     {% endif %}
  501.                                                                                 {% endif %}
  502.                                                                         </tr>
  503.                                                                     {% endif %}
  504.                                                                 {% endfor %}
  505.                                                             </tbody>
  506.                                                         </table>
  507.                                                     </div>
  508.                                                     {% if not is_granted('IS_AUTHENTICATED_REMEMBERED') or is_granted('ROLE_ATTENDEE') %}
  509.                                                         {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
  510.                                                             <a href="#" class="btn btn-primary btn-block mb-2 buy-tickets-modal-button" data-toggle="modal" data-target="#buy-tickets-modal-eventDate-{{ eventDate.reference }}"><i class="fas fa-ticket-alt"></i> {{ "Tickets"|trans }}</a>
  511.                                                             {% include "Dashboard/Attendee/Cart/add-to-cart-modal.html.twig" with { eventdate: eventDate } %}
  512.                                                         {% else %}
  513.                                                             <a href="{{ path('fos_user_security_login')~'?_target_path='~app.request.getPathInfo }}" class="btn btn-primary btn-block"><i class="fas fa-ticket-alt"></i> {{ "Tickets"|trans }}</a>
  514.                                                         {% endif %}
  515.                                                     {% endif %}
  516.                                                 </dd>
  517.                                             </dl>
  518.                                         </div>
  519.                                     {% endfor %}
  520.                                 </form>
  521.                                 {% if not is_granted('IS_AUTHENTICATED_REMEMBERED') or is_granted('ROLE_ATTENDEE') %}
  522.                                     {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
  523.                                         {% if event.isAddedToFavoritesBy(app.user) %}
  524.                                             <button class="event-favorites-remove btn btn-outline-primary btn-block" data-target="{{ path('dashboard_attendee_favorites_remove', { slug : event.slug }) }}" data-toggle="tooltip" title="" data-placement="bottom"><i class="fas fa-heart"></i> {{ "Remove from favorites"|trans }}</button>
  525.                                         {% else %}
  526.                                             <button class="event-favorites-add btn btn-outline-primary btn-block" data-target="{{ path('dashboard_attendee_favorites_add', { slug : event.slug }) }}" data-toggle="tooltip" title="" data-placement="bottom"><i class="far fa-heart"></i> {{ "Add to favorites"|trans }}</button>
  527.                                         {% endif %}
  528.                                     {% else %}
  529.                                         <a href="{{ path('fos_user_security_login')~'?_target_path='~app.request.getPathInfo }}" class="btn btn-outline-primary btn-block"><i class="far fa-heart"></i> {{ "Add to favorites"|trans }}</a>
  530.                                     {% endif %}
  531.                                 {% endif %}
  532.                             {% else %}
  533.                                 {% include "Global/message.html.twig" with { type: 'info', icon: 'fas fa-info-circle', message: "No tickets on sale at this moment" } %}
  534.                             {% endif %}
  535.                             <hr class="hr-md">
  536.                             <dl class="mt-5 mb-5">
  537.                                 <dt class="text-muted">
  538.                                     <span class="{% if app.request.locale == "ar" %}float-right{% else %}float-left{% endif %}">{{ "Organizer"|trans }}</span>
  539.                                     <a href="{{ path('organizer', { slug : event.organizer.slug }) }}" class="{% if app.request.locale == "ar" %}float-left{% else %}float-right{% endif %} text-sm"><i class="far fa-id-card"></i> {{ "Details"|trans }}</a>
  540.                                     <div class="clearfix"></div>
  541.                                 </dt>
  542.                                 <dt class="text-muted">
  543.                                     <span class="{% if app.request.locale == "ar" %}float-right{% else %}float-left{% endif %}">{{ "Organizer WhatsApp Number"|trans }}</span>
  544.                                     <a target="_blank" href="https://wa.me/{{ event.whatsappnumber }}?text=Hi,%20I%20want%20to%20know%20about%20your%20event:%20{{ app.request.schemeAndHttpHost }}{{ path('event', { slug: event.slug }) }}" class="{% if app.request.locale == "ar" %}float-left{% else %}float-right{% endif %} text-sm"><i class="fab fa-whatsapp"></i> {{ event.whatsappnumber }}</a>
  545.                                     <div class="clearfix"></div>
  546.                                 </dt>
  547.                                 <dd class="mr-0">
  548.                                     <div class="card-banner {{ event.organizer.coverName ? '' : 'organizer-preview-no-cover' }}"{% if event.organizer.coverName %} style="height:250px;background-image: url('{{asset(event.organizer.getCoverPath|imagine_filter('thumbnail', {"thumbnail": {"size": [400, 250] }}))}}');" {% endif %}>
  549.                                         <article class="overlay bottom text-center">
  550.                                             <h4 class="card-title"><a href="{{ path('organizer', { slug : event.organizer.slug }) }}">{{ event.organizer.name }}</a></h4>
  551.                                                 {% if event.organizer.logoName %}
  552.                                                 <img src="{{asset(event.organizer.getLogoPath)}}" class="img-100-100 d-block mx-auto mb-3 img-thumbnail" alt="{{ event.organizer.name }}" />
  553.                                             {% endif %}
  554.                                             {% if not is_granted('IS_AUTHENTICATED_REMEMBERED') or is_granted('ROLE_ATTENDEE') %}
  555.                                                 {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
  556.                                                     {% if event.organizer.isFollowedBy(app.user) %}
  557.                                                         <button class="organizer-unfollow btn btn-primary btn-sm" data-target="{{ path('dashboard_attendee_following_remove', { slug : event.organizer.slug }) }}"><i class="fas fa-folder-minus"></i> {{ "Unfollow"|trans }}</button>
  558.                                                     {% else %}
  559.                                                         <button class="organizer-follow btn btn-primary btn-sm" data-target="{{ path('dashboard_attendee_following_add', { slug : event.organizer.slug }) }}"><i class="fas fa-folder-plus"></i> {{ "Follow"|trans }}</button>
  560.                                                     {% endif %}
  561.                                                 {% else %}
  562.                                                     <a href="{{ path('fos_user_security_login')~'?_target_path='~app.request.getPathInfo }}" class="btn btn-primary btn-sm"><i class="fas fa-folder-plus"></i> {{ "Follow"|trans }}</a>
  563.                                                 {% endif %}
  564.                                             {% endif %}
  565.                                         </article>
  566.                                     </div>
  567.                                 </dd>
  568.                             </dl>
  569.                             {% if event.showattendees %}
  570.                                 {% set attendeescount = event.getTotalOrderElementsQuantitySum(1, 'all', 'ROLE_ATTENDEE') %}
  571.                                 {% if attendeescount %}
  572.                                     <hr>
  573.                                     <dl class="mt-5">
  574.                                         <dt class="text-muted mb-3">
  575.                                             <span class="{% if app.request.locale == "ar" %}float-right{% else %}float-left{% endif %}">{{ "Attendees"|trans }} <b>({{attendeescount}})</b></span>
  576.                                             <a href="#" class="{% if app.request.locale == "ar" %}float-left{% else %}float-right{% endif %} text-sm" data-toggle="modal" data-target="#attendees-modal"><i class="fas fa-users"></i> {{ "See all"|trans }}</a>
  577.                                             <div class="modal fade" id="attendees-modal">
  578.                                                 <div class="modal-dialog modal-dialog-centered">
  579.                                                     <div class="modal-content">
  580.                                                         <div class="modal-header">
  581.                                                             <div class="modal-title h4">{{ "Attendees"|trans }} ({{attendeescount}})</div>
  582.                                                             <button type="button" class="close" data-dismiss="modal">&times;</button>
  583.                                                         </div>
  584.                                                         <div class="modal-body">
  585.                                                             <div class="card border-0 card-body overflow-auto text-nowrap">
  586.                                                                 <div class="avatar-list py-4">
  587.                                                                     {% for user in services.getUsers({"hasboughtticketfor": event.slug, "role": "attendee"}).getQuery().getResult() %}
  588.                                                                         {% include "Global/user-avatar.html.twig" with { user: user, showusernametooltip: true } %}
  589.                                                                     {% endfor %}
  590.                                                                 </div>
  591.                                                             </div>
  592.                                                         </div>
  593.                                                         <div class="modal-footer">
  594.                                                             <button type="button" class="btn btn-primary" data-dismiss="modal">{{ "Close"|trans }}</button>
  595.                                                         </div>
  596.                                                     </div>
  597.                                                 </div>
  598.                                             </div>
  599.                                             <div class="clearfix"></div>
  600.                                         </dt>
  601.                                         <dd class="mr-0">
  602.                                             <div class="card border-0 card-body">
  603.                                                 <div class="avatar-list avatar-list-stacked">
  604.                                                     {% for user in services.getUsers({"hasboughtticketfor": event.slug, "limit": 12, "role": "attendee"}).getQuery().getResult() %}
  605.                                                         {% include "Global/user-avatar.html.twig" with { user: user, showusernametooltip: true } %}
  606.                                                     {% endfor %}
  607.                                                     {% if attendeescount > 12 %}
  608.                                                         <span class="avatar">{{ attendeescount - 12 }}</span>
  609.                                                     {% endif %}
  610.                                                 </div>
  611.                                             </div>
  612.                                         </dd>
  613.                                     </dl>
  614.                                 {% endif %}
  615.                             {% endif %}
  616.                             {% if services.getSetting("newsletter_enabled") == "yes" and services.getSetting("mailchimp_api_key") and services.getSetting("mailchimp_list_id") %}
  617.                                 <div class="mt-5">
  618.                                     {% include "Global/newsletter-box.html.twig" %}
  619.                                 </div>
  620.                             {% endif %}
  621.                         </div>
  622.                     </div>
  623.                 </div>
  624.             </div>
  625.             {% set othereventsbythisorganizer = services.getEvents({"organizer" : event.organizer.slug, "limit" : 8, "otherthan": event.slug}).getQuery().getResult() %}
  626.             {% if othereventsbythisorganizer|length > 0 %}
  627.                 <div class="row">
  628.                     <div class="col-12">
  629.                         <h3 class="mt-5 mb-4 text-center">{{ "Other events by %organizername%"|trans({'%organizername%' : event.organizer.name}) }}</h3>
  630.                         <div class="owl-init owl-carousel" data-margin="15" data-items="4" data-dots="false" data-nav="true" data-autoplay="true" data-loop="false">
  631.                             {% for event in othereventsbythisorganizer %}
  632.                                 {% include "Global/event-card.html.twig" with {event: event} %}
  633.                             {% endfor %}
  634.                         </div>
  635.                     </div>
  636.                 </div>
  637.             {% endif %}
  638.             {% set similareventscriteria = {"category" : event.category.slug, "limit" : 8, "otherthan": event.slug} %}
  639.             {% if event.getFirstVenue %}
  640.                 {% set similareventscriteria = similareventscriteria|merge({"country" : event.getFirstVenue.country.slug}) %}
  641.             {% endif %}
  642.             {% set similarevents = services.getEvents(similareventscriteria).getQuery().getResult() %}
  643.             {% if similarevents|length > 0 %}
  644.                 <div class="row">
  645.                     <div class="col-12">
  646.                         <h3 class="mt-5 mb-4 text-center">{{ "Similar events" }}</h3>
  647.                         <div class="owl-init owl-carousel" data-margin="15" data-items="4" data-dots="false" data-nav="true" data-autoplay="true" data-loop="false">
  648.                             {% for event in similarevents %}
  649.                                 {% include "Global/event-card.html.twig" with {event: event} %}
  650.                             {% endfor %}
  651.                         </div>
  652.                     </div>
  653.                 </div>
  654.             {% endif %}
  655.         </div>
  656.     </section>
  657. {% endblock %}
  658. {% block javascripts %}
  659.     {{ encore_entry_script_tags('event') }}
  660.     {% if (chatbot_id != null) %}
  661.         <script type="module">
  662.             import Chatbot from "{{chatbot_flowise}}";
  663.             Chatbot.init({
  664.                 chatflowid: "{{chatbot_id}}",
  665.                 apiHost: "{{ api_host }}"
  666.             });
  667.         </script>
  668.     {% endif %}
  669. {% endblock %}