#set ($sitevisionUtils = $request.getAttribute("sitevision.utils"))

##
## Utility API
#set ($scriptUtil = $sitevisionUtils.scriptUtil)
#set ($propertyUtil = $sitevisionUtils.propertyUtil)

## Init link renderer
#set ($linkRenderer = $sitevisionUtils.linkRenderer)

$linkRenderer.setFontClass('normal')
<ol>
   #foreach ($event in $events)
   <li>
     #set($startDate = $propertyUtil.getCalendar($event, 'startDate').getTime())
     #set($endDate = $propertyUtil.getCalendar($event, 'endDate').getTime())
     
      <div class="event-info">
        	<div class="event-info-wrapper">
            <div class="day">$scriptUtil.getDateAsString("EEEE", $startDate)</div>
            <div class="date">$scriptUtil.getDateAsString("dd", $startDate)</div>
            <div class="month">$scriptUtil.getDateAsString("MMMM", $startDate)</div>
      	</div>
      </div>
      <div class="event-content">
         #set ($target = $scriptUtil.getNonNull($propertyUtil.getString($event, 'url')) +'?date=' +$startDate.getTime())
         $linkRenderer.setStringTarget($target)
         $linkRenderer.setText($!propertyUtil.getString($event, 'title'))
         
         <h2>
				$linkRenderer.render()
         </h2>
       
         <p class="normal">
        	Tid: $scriptUtil.getDateAsString("HH:mm", $startDate)
##			- $scriptUtil.getDateAsString("HH:mm", $endDate)
         </p>
         
        <p class="normal event-location">
            Plats: $!propertyUtil.getString($event, 'location')
        </p>
         
        <span class="normal event-attendee">
            $!propertyUtil.getString($event, 'participants')
        </span>
         
         #if ($propertyUtil.getString($event, 'category'))
         <span class="normal event-attendee">
            $!propertyUtil.getString($event, 'category')
         </span>
         #end
         
         <p class="normal text">
            $!propertyUtil.getString($event, 'description')
         </p>
         
        #set($image = $scriptUtil.getNonNull($propertyUtil.getNode($event, 'image')))
         
        #if($image)
         	<div>
         	<img style="width: 100%; max-width:300px" alt="" src="$propertyUtil.getString($image, 'URI')">
        </div>
        #end
                 
      </div>
   </li>
	#end
</ol>