<div class="jk-event-page-info jk-event-page-info__image-facts-row  sv-row">
    <div class="jk-event-page-info__facts-box jk-event-page-info__facts-box-volunteer">
        #if($event.currentOccasion)
        <div>
            <div class="jk-event-page-info__facts-box-title">$scriptVariables.currentOccasionHeader</div>
            <div class="jk-event-page-info__facts-data-row">
                <span class="material-icons-outlined" aria-hidden="true">calendar_today</span>
                <div>
                    <span class="jk-event-page-info__facts-data-title">Datum: </span>
                    $event.currentOccasion.date
                </div>
            </div>
            #if($event.showTime)
            <div class="jk-event-page-info__facts-data-row">
                <span class="material-icons-outlined" aria-hidden="true">schedule</span>
                <div>
                    <span class="jk-event-page-info__facts-data-title">Tid: </span>
                    $event.currentOccasion.time
                </div>
            </div> 
            #end
            
            #if($event.compensation)
            <div class="jk-event-page-info__facts-data-row">
                <span class="material-icons-outlined" aria-hidden="true">local_activity</span>
                <div>
                    <span class="jk-event-page-info__facts-data-title">Ersättning: </span>
                    $event.compensation
                </div>
            </div>
            #end
            
            #if($ageString)
            <div class="jk-event-page-info__facts-data-row">
                <span class="material-icons-outlined" aria-hidden="true">groups</span>
                <div>
                    <span class="jk-event-page-info__facts-data-title">Ålder: </span>
                    $ageString
                </div>
            </div>         
            #end
            <div class="jk-event-page-info__facts-data-row">
                <span class="material-icons-outlined" aria-hidden="true">home</span>
                <div>
                    <span class="jk-event-page-info__facts-data-title">Plats: </span>
                    $event.currentOccasion.location
                </div>
            </div>
            <div class="jk-event-page-info__facts-data-row">
                <span class="material-icons-outlined" aria-hidden="true">place</span>
                <div>
                    <span class="jk-event-page-info__facts-data-title">Adress: </span>
                    $event.locationAddressText
                </div>
            </div>            
        </div>
        #end
        
        <div class="env-m-top--large">
            #if(!$event.organizer.empty)
                <div class="jk-event-page-info__facts-box-title jk-event-page-info__facts-box-title--semi-bold">$event.organizer</div>
            #else
                <div class="jk-event-page-info__facts-box-title">Arrangör</div>
            #end
            #if($event.organizerPhone)
            <div class="jk-event-page-info__facts-data-row">
                <span class="material-icons-outlined" aria-hidden="true">phone</span>
                <div>
                    <span class="jk-event-page-info__facts-data-title">Telefon: </span>
                    <a href="tel:$event.organizerPhoneCleaned">$event.organizerPhoneFormatted</a>
                </div>
            </div>
            #end
            #if($event.organizerEmail)
            <div class="jk-event-page-info__facts-data-row">
                <span class="material-icons-outlined" aria-hidden="true">mail</span>
                <div>
                    <span class="jk-event-page-info__facts-data-title">E-post: </span>
                    <a href="mailto:$event.organizerEmail">$event.organizerEmail</a>
                </div>
            </div>
            #end
        </div>
        
        #if($event.deadline)
        <div class="env-m-top--large">        			
            <div class="jk-event-page-info__facts-box-title">
        			Sista ansökningsdatum	    
            </div>
            <div class="jk-event-page-info__facts-data-row">
               <span class="material-icons-outlined" aria-hidden="true">event</span>
                <div>
                    <span class="jk-event-page-info__facts-data-title">$event.deadline</span>        
                </div>
            </div>   				
        </div>
        #end
    </div>
</div>

<div class="jk-event-page-info sv-row">
    #if($upcomingOccasions.length > 0)
    <div class="jk-event-page-info__upcoming-occasions">            
        <div class="jk-event-page-info__upcoming-occasions-title env-m-bottom--small sol-mobile-margin">$scriptVariables.moreOccasionsHeader</div>
        <ul class="jk-event-page-info__upcoming-occasions-list" id="upcomingOccasionsList">
            #foreach($occasion in $event.upcomingOccasions)
            <li class="jk-event-page-info__upcoming-occasions-item #if($occasion.isCancelled) jk-event-page-info__upcoming-occasions-item--cancelled #end">
                #if($occasion.isCancelled)
                <div class="jk-event-page-info__upcoming-occasions-item-cancelled">
                    OBS! Detta tillfälle är tyvärr inställt.
                </div>
                #end           
                <div class="jk-event-page-info__upcoming-occasions-item-data">                
                    <div class="jk-event-page-info__facts-data-row">
                        <span class="material-icons-outlined" aria-hidden="true">calendar_today</span>
                        <div class="jk-event-page-info__facts-data-title">Datum: </div>
                        <div class="jk-event-page-info__facts-data-value">$occasion.date</div>
                    </div>
                    <div class="jk-event-page-info__facts-data-row">
                        <span class="material-icons-outlined" aria-hidden="true">schedule</span>
                        <div class="jk-event-page-info__facts-data-title">Tid: </div>
                        <div class="jk-event-page-info__facts-data-value">$occasion.time</div>
                    </div>
                    <div class="jk-event-page-info__facts-data-row">
                        <span class="material-icons-outlined" aria-hidden="true">home</span>
                        <div class="jk-event-page-info__facts-data-title">Plats: </div>
                        <div class="jk-event-page-info__facts-data-value">$occasion.location</div>
                    </div>
                </div>
            </li>
            #end
        </ul>
        #if($event.upcomingOccasions && $event.upcomingOccasions.length > 3)
            <div class="env-d--flex env-flex--justify-content-center">
                <button class="jk-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>