<div class="hiq-event-page-info hiq-event-page-info__image-facts-row  sv-row">
    <div class="hiq-event-page-info__hero-image-container sv-column-8">
        #if(!$event.imageUri.empty)        
            <img class="hiq-event-page-info__hero-image hiq-event-page-info__hero-image--mobile" src="$event.imageUri" alt="$event.imageAltText">
            <div role="img" aria-label="$event.imageAltText" class="hiq-event-page-info__hero-image" style="background-image: url('$event.imageUri')"></div>
        #else
            <div class="hiq-event-page-info__hero-image-placeholder">&nbsp;</div>
        #end
    </div>
    <div class="hiq-event-page-info__facts-box sv-column-4">
        #if($nextOccasion)
        <div class="hiq-event-page-info__facts-box-container">
            <div class="hiq-event-page-info__facts-box-title">$scriptVariables.nextOccasionHeader</div>
            <div class="hiq-event-page-info__facts-data-row">
                <span class="hiq-event-page-info__facts-data-icon hiq-event-page-info__facts-data-icon--calendar" aria-hidden="true"></span>
                <div>
                    <span class="hiq-event-page-info__facts-data-title">Datum: </span>
                    $nextOccasion.date
                </div>
            </div>
            <div class="hiq-event-page-info__facts-data-row">
                <span class="hiq-event-page-info__facts-data-icon hiq-event-page-info__facts-data-icon--clock" aria-hidden="true"></span>
                <div>
                    <span class="hiq-event-page-info__facts-data-title">Tid: </span>
                    $nextOccasion.time
                </div>
            </div>
            #if($nextOccasion.lastRegistrationDate != '')
                <div class="hiq-event-page-info__facts-data-row">
                    <span class="hiq-event-page-info__facts-data-icon hiq-event-page-info__facts-data-icon--calendar" aria-hidden="true"></span>
                    <div>
                        <span class="hiq-event-page-info__facts-data-title">Sista dag för anmälan: </span>
                        $nextOccasion.lastRegistrationDate
                    </div>
                </div>
            #end
            #if($nextOccasion.educationTypeTags != '')
            <div class="hiq-event-page-info__facts-data-row">
                <span class="hiq-event-page-info__education-form-icon hiq-event-page-info__education-form-icon--$nextOccasion.educationType.icon" aria-hidden="true"></span>
                <div>
                    <span class="hiq-event-page-info__facts-data-title">Kategori: </span>
                    $nextOccasion.educationTypeTags
                </div>
            </div>
            #end            
            #if($nextOccasion.price)
            <div class="hiq-event-page-info__facts-data-row">
                <span class="hiq-event-page-info__cost-icon" aria-hidden="true"></span>
                <div>
                    <span class="hiq-event-page-info__facts-data-title">Kostnad: </span>
                    $nextOccasion.price kr
                </div>
            </div>
            #end
            #if($ageString)
            <div class="hiq-event-page-info__facts-data-row">
                <span class="hiq-event-page-info__user-icon" aria-hidden="true">groups</span>
                <div>
                    <span class="hiq-event-page-info__facts-data-title">Ålder: </span>
                    $ageString
                </div>
            </div>         
            #end   
            <div class="hiq-event-page-info__facts-data-row">
                <span class="hiq-event-page-info__place-icon" aria-hidden="true"></span>
                <div>
                    <span class="hiq-event-page-info__facts-data-title">Plats: </span>
                    $nextOccasion.location
                </div>
            </div>
            <div class="hiq-event-page-info__facts-data-row">
                <span class="hiq-event-page-info__address-icon" aria-hidden="true"></span>
                <div>
                    <span class="hiq-event-page-info__facts-data-title">Adress: </span>
                    $event.locationAddressText
                </div>
            </div>            
        </div>
        #end

        #if($event.showSignUpLink)
            <a href="$event.signUpLink" target="_blank" class="hiq-event-page-info__sign-up-link">Anmäl dig här</a>
        #end
        <a href="#" class="hiq-event-page-info__add-to-calendar-link hide-for-no-js" download="event.ics" id="addToCalendarButton">Lägg till i kalender</a>

        <div class="env-m-top--large">
            #if(!$event.organizer.empty)
                <div class="hiq-event-page-info__facts-box-title hiq-event-page-info__facts-box-title--semi-bold">$event.organizer</div>
            #else
                <div class="hiq-event-page-info__facts-box-title">Arrangör</div>
            #end
            #if($event.organizerPhone && $event.organizerPhone.length > 0)
            <div class="hiq-event-page-info__facts-data-row">
                <span class="hiq-event-page-info__phone-icon" aria-hidden="true"></span>
                <div>
                    <span class="hiq-event-page-info__facts-data-title">Telefon: </span>
                    <a href="tel:$event.organizerPhoneCleaned">$event.organizerPhoneFormatted</a>
                </div>
            </div>
            #end
            #foreach($organizerEmail in $event.organizerEmails)
            <div class="hiq-event-page-info__facts-data-row">
                <span class="hiq-event-page-info__mail-icon" aria-hidden="true"></span>
                <div>
                    <span class="hiq-event-page-info__facts-data-title">E-post: </span>
                    <a href="mailto:$organizerEmail.trim()">$organizerEmail.trim()</a>
                </div>
            </div>
            #end            
        </div>
    </div>
</div>

<div class="hiq-event-page-info sv-row">
    <div class="sv-column-8 hiq-event-page-info__main-content">
        <div class=" hiq-event-page-info__ingress-and-text">
            #if(!$event.ingress.empty)
            <p class="ingress hiq-event-page-info__multiline-text hiq-preamble">$event.ingress</p>
            #end
            #if(!$event.text.empty)
            <p class="hiq-p hiq-event-page-info__multiline-text--text">$event.text</p>
            #end

            #if($event.ticketInformation && !$event.ticketInformation.empty)
                 <h2 class="env-m-top--medium h3">Mer information</h2>
                 <p class="hiq-p hiq-event-page-info__multiline-text">$event.ticketInformation</p>
            #end
            
            #if($event.links)
            <div class="hiq-event-page-info__read-more-links">
                #foreach($item in $event.links)
                    <a class="hiq-event-page-info__read-more-link" href="$item.url" rel="nofollow">
                        <span>$item.name</span>
                    </a>
                #end
            </div>
            #end
        </div>
    </div>
    #if($upcomingOccasions.length > 0)
    <div class="sv-column-4 hiq-event-page-info__upcoming-occasions">            
        <div class="hiq-event-page-info__upcoming-occasions-title env-m-bottom--small ">$scriptVariables.moreOccasionsHeader</div>
        <ul class="hiq-event-page-info__upcoming-occasions-list" id="upcomingOccasionsList">
            #foreach($occasion in $event.upcomingOccasions)
            <li class="hiq-event-page-info__upcoming-occasions-item">
                <div class="hiq-event-page-info__facts-data-row">
                    <span class="hiq-event-page-info__facts-data-icon hiq-event-page-info__facts-data-icon--calendar" aria-hidden="true"></span>
                    <div class="hiq-event-page-info__facts-data-title">Datum: </div>
                    <div class="hiq-event-page-info__facts-data-value">$occasion.date</div>
                </div>
                <div class="hiq-event-page-info__facts-data-row">
                    <span class="hiq-event-page-info__facts-data-icon hiq-event-page-info__facts-data-icon--clock" aria-hidden="true"></span>
                    <div class="hiq-event-page-info__facts-data-title">Tid: </div>
                    <div class="hiq-event-page-info__facts-data-value">$occasion.time</div>
                </div>               
                <div class="hiq-event-page-info__facts-data-row">
                    <span class="hiq-event-page-info__place-icon" aria-hidden="true"></span>
                    <div class="hiq-event-page-info__facts-data-title">Plats: </div>
                    <div class="hiq-event-page-info__facts-data-value">$occasion.location</div>
                </div>
            </li>
            #end
        </ul>
        #if($event.upcomingOccasions && $event.upcomingOccasions.length > 3)
            <div class="env-d--flex env-flex--justify-content-center">
                <button class="hiq-event-page-info__upcoming-occasions-toggle-button" type="button" id="showAllOccasionsButton" title="Visa fler tillfällen">Visa fler</button>
            </div>
        #end
        

        <script>
            svDocReady(function() {
                $svjq('#showAllOccasionsButton').on('click', function() {
                    $svjq("#upcomingOccasionsList").toggleClass("show-all");
                    $svjq(this).text($svjq(this).text() == 'Visa fler' ? 'Visa färre' : 'Visa fler');
                    $svjq(this).attr("title", $svjq(this).text() +" tillfällen");
                });
            });
        </script>

    </div>
    #end
</div>


#if($nextOccasion)
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Event",
      "name": "$event.title",
      "startDate": "$nextOccasion.structuredStartDate",
      "endDate": "$nextOccasion.structuredEndDate",
      "lastRegistrationDate": "$nextOccasion.structuredLastRegistrationDate",
      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
      "eventStatus": "https://schema.org/EventScheduled",
      "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.ingress",
      "offers": {
        "@type": "Offer",
        "price": "$event.price",
        "priceCurrency": "SEK"
      },
      "organizer": {
        "@type": "Organization",
        "name": "$event.organizer",
        "telephone": "$event.organizerPhone",
        "email": "$event.organizerEmail"
      }
    }
    </script>
    

<script>
var icsFile = null;

function makeIcsFile() {

    var dtStamp = new Date().toISOString().replace(/[-:]/g,"").split(".")[0] + "Z";

    var description = "$event.ingress".replace(/\n/g, "\\n");

    var eventData =
        "BEGIN:VCALENDAR\n" +
        "VERSION:2.0\n" +
        "CALSCALE:GREGORIAN\n" +
        "METHOD:PUBLISH\n" +
        "PRODID:-//JKPG//Pedagog//EN\n" +
        "BEGIN:VEVENT\n" +
        "UID:handelse-$nextOccasion.id\n" +
        "DTSTAMP:" + dtStamp + "\n" +
        "DTSTART;TZID=Europe/Stockholm:$nextOccasion.calendarStartDate\n" +
        "DTEND;TZID=Europe/Stockholm:$nextOccasion.calendarEndDate\n" +
        "SUMMARY:$event.title\n" +
        "DESCRIPTION:" + description + "\n" +
        "LOCATION:$nextOccasion.location\n" +
        "END:VEVENT\n" +
        "END:VCALENDAR";

    var data = new Blob([eventData], { type: "text/calendar;charset=utf-8" });

    if (icsFile !== null) {
        window.URL.revokeObjectURL(icsFile);
    }

    icsFile = window.URL.createObjectURL(data);

    return icsFile;
}

var link = document.querySelector("#addToCalendarButton");
if (link) {
    link.href = makeIcsFile();
}
</script>
#end