<div class="jk-event-page-info jk-event-page-info__image-facts-row  sv-row">
    <div class="jk-event-page-info__hero-image-container">
        #if(!$event.imageUri.empty)        
            <img class="jk-event-page-info__hero-image jk-event-page-info__hero-image--mobile" src="$event.imageUri" alt="$event.imageAltText">
            <div role="img" aria-label="$event.imageAltText" class="jk-event-page-info__hero-image" style="background-image: url('$event.imageUri')"></div>
            #if($event.imageSource && !$event.imageSource.trim().empty)
            <p class="jk-event-page-info__hero-image-text">Foto: $event.imageSource</p>
            #end
        #else
            <div class="jk-event-page-info__hero-image-placeholder">&nbsp;</div>
        #end
        #if($event.isCancelled)
        <div class="jk-event-page-info__hero-cancelled">
            OBS! Denna aktivitet är tyvärr inställd.
        </div>
        #end
    </div>
</div>

<div class="jk-event-page-info sv-row">
    <div class="jk-event-page-info__main-content">
        <div class="sol-mobile-margin jk-event-page-info__ingress-and-text">
            #if(!$event.ingress.empty)
            <p class="ingress jk-event-page-info__multiline-text">$event.ingress</p>
            #end
            #if(!$event.text.empty)
            <p class="normal jk-event-page-info__multiline-text">$event.text</p>
            #end

            #if($event.ticketInformation && !$event.ticketInformation.empty)
                 <h2 class="env-m-top--medium jk-h4">Biljettinformation</h2>
                 <p class="normal jk-event-page-info__multiline-text">$event.ticketInformation</p>
            #end
            
            #if($event.links)
            <div class="jk-event-page-info__read-more-links">
                #foreach($item in $event.links)
                    <a class="jk-event-page-info__read-more-link" href="$item.url" rel="nofollow" target="blank">
                        <span>$item.name</span><span class="material-icons-outlined" aria-hidden="true">chevron_right</span>
                    </a>
                #end
            </div>
            #end
        </div>
    </div>
</div>


#if($event.currentOccasion)
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Event",
      "name": "$event.titleSchema",
      "startDate": "$event.currentOccasion.structuredStartDate",
      "endDate": "$event.currentOccasion.structuredEndDate",
      #if($event.categories)
        "about": [
        #foreach($category in $event.categories)
          "$category"#if($foreach.hasNext),#end
        #end
        ],
      #else
        "about": [],
      #end
      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
      #if($event.currentOccasion.isCancelled)
      "eventStatus": "https://schema.org/EventCancelled",
      #else
      "eventStatus": "https://schema.org/EventScheduled",
      #end
      "location": {
        "@type": "Place",
        "name": "$event.location",
        "address": {
          "@type": "PostalAddress",
          "streetAddress": "$event.locationStreet",
          "addressLocality": "$event.locationCity",
          "postalCode": "$event.locationZipCode",
          "addressCountry": "SE"
        }
      },
      "image": [
        "$event.imageUrl"
       ],
      "description": "$event.ingressSchema",
      "organizer": {
        "@type": "Organization",
        "name": "$event.organizer",
        "telephone": "$event.organizerPhone",
        "email": "$event.organizerEmail"
      }
    }
    </script>
#end