<section class="mdh-course-page__section">
    <div class="grid-container">
        <div class="grid-x grid-margin-x align-center mdh-course-page__header">
            <div class="cell small-12"><h1 class="mdh-h1">$name</h1></div>             
        </div>
		#if(!$foundContent)
        <div class="grid-x grid-margin-x align-center">
			<div class="cell small-12">
				<ul class="mdh-icon-list mdh-icon-list--row mdh-course-page__icon-list">               
                    <li class="mdh-icon-list__item">
                        <i class="mdh-icon-list__icon material-icons" aria-hidden="true">panorama_fish_eye</i>
                        <span class="show-for-sr">$stringTranslations.Credits</span>
						<span>$credit&nbsp;$stringTranslations.CreditsShort</span>
                    </li>
                    <li class="mdh-icon-list__item">
                        <i class="mdh-icon-list__icon material-icons" aria-hidden="true">timeline</i>
                        <span class="show-for-sr">$stringTranslations.EducationLevel</span>
						<span>$level</span>
                    </li>
					 <li class="mdh-icon-list__item">
                        <i class="mdh-icon-list__icon material-icons" aria-hidden="true">home</i>
                        <span class="show-for-sr">$stringTranslations.Location</span>
						<span>$location</span>
                    </li>
					<li class="mdh-icon-list__item">
                        <i class="mdh-icon-list__icon material-icons" aria-hidden="true">school</i>
                        <span class="show-for-sr">$stringTranslations.CourseCode</span>
						<span>$coursecode</span>
                    </li>
					<li class="mdh-icon-list__item">
                        <i class="mdh-icon-list__icon material-icons" aria-hidden="true">label</i>
                        <span class="show-for-sr">$stringTranslations.MainArea</span>
						<span>$mainArea</span>
                    </li>                  
                </ul>
			</div>
		</div>
		#else
		<div class="grid-x grid-margin-x">
			<div class="cell small-12 large-3">
                <ul class="mdh-icon-list">               
                    <li class="mdh-icon-list__item">
                        <i class="mdh-icon-list__icon material-icons" aria-hidden="true">panorama_fish_eye</i>
                        <span class="show-for-sr">$stringTranslations.Credits</span>
						#foreach($credit in $credits)
							<span>$credit</span>
						#end
						<span>&nbsp;$stringTranslations.CreditsShort</span>
                    </li>
                    <li class="mdh-icon-list__item">
                        <i class="mdh-icon-list__icon material-icons" aria-hidden="true">timeline</i>
                        <span class="show-for-sr">$stringTranslations.EducationLevel</span>
						<span>$level</span>
                    </li>
					 <li class="mdh-icon-list__item">
                        <i class="mdh-icon-list__icon material-icons" aria-hidden="true">home</i>
                        <span class="show-for-sr">$stringTranslations.Location</span>
						<span>$location</span>
                    </li>
					<li class="mdh-icon-list__item">
                        <i class="mdh-icon-list__icon material-icons" aria-hidden="true">school</i>
                        <span class="show-for-sr">$stringTranslations.CourseCode</span>
						<span>$coursecode</span>
                    </li>
					<li class="mdh-icon-list__item">
                        <i class="mdh-icon-list__icon material-icons" aria-hidden="true">label</i>
                        <span class="show-for-sr">$stringTranslations.MainArea</span>
						<span>$mainArea</span>
                    </li>               
                </ul>
            </div>
            <div class="cell small-12 large-6 mdh-course-page__editor-content">
				#if($courseinformation)
				<p class="mdh-p">
					$courseinformation
				</p>
				#end
				#if($editorContent)
					$editorContent
				#end
			</div>
		#end
        </div>
    </div>
</section>
<section class="mdh-course-page__section">
	<div class="grid-container">
		<div class="grid-x grid-margin-x">
			<div class="cell small-12 mdh-course-page__section-title" id="course-occasions">
				<p class="mdh-h2-section">$stringTranslations.CourseOccasionsHeader</p>
			</div>
			<div class="cell small-12 mdh-course-page__occasion-group-list">
				#foreach($group in $occassionGroups)
					#if($group.expanded)
						<p class="mdh-p mdh-course-page__occasion-group-header">$group.courses.key</p>
					#else
						<button class="mdh-p mdh-course-page__occasion-list-toggle-button" role="button" tabindex="$foreach.index" data-ignore-close="true" data-toggle="#occasion-list-$foreach.count">$stringTranslations.ShowOccasionsFor $group.courses.key</button>
					#end
					#occasionList($group $foreach.count)
				#end
			</div>
		</div>
	</div>
</section>
#if($counselorCard)
<section class="mdh-programme-contact mdh-programme-contact--sand">
    <div class="grid-container">
        <div class="grid-x grid-margin-x align-center">
            <div class="cell small-12 medium-8"><h2 class="mdh-h2">$stringTranslations.CourseContactHeading</h2></div>
            <div class="cell small-12 medium-6"><p>$stringTranslations.CourseContactText</p></div>
        </div>
       <div class="grid-x grid-margin-x align-center">
			<div class="cell small-12 large-6">
                <div class="mdh-programme-contact__item">              
                    <div class="mdh-contact-card mdh-contact-card--row" style="background-color:white;">
                        <div class="mdh-contact-card__image-background-container">
                            <div class="mdh-contact-card__image-background"  style="background-image: url($counselorCard.image);"></div>
                        </div>
                        <div class="mdh-contact-card__info">
                            <p>
                                $counselorCard.employmenttitle
                            </p>
                            <p>
                                <a href="$contactPageLink?id=$counselorCard.id" class="mdh-contact-card__info-text-large mdh-text-link mdh-text-link--no-underline">$counselorCard.firstname $counselorCard.lastname</a>
                            </p>
                            <p class="mdh-contact-card__info-text-phone">
								#foreach($number in $counselorCard.telephonenumbers)
									$number
								#end
                            </p>
                            <p class="mdh-contact-card__info-text-email"><a class="mdh-text-link" href="mailto:$counselorCard.email">$counselorCard.email</a></p>                              
                        </div>
                    </div>                       
                </div>                         
            </div>                         
        </div>
    </div>
</section>
#end


#macro(occasionList $group $count)
	#set($groupCount = $count)
	<ul class="mdh-course-page__occasion-list #if($group.expanded)open#end" id="occasion-list-$groupCount">
	#foreach($course in $group.courses)
		<li class="mdh-course-page__occasion-item">
			<div class="mdh-course-page__occasion-information">
				<p class="mdh-meta">$course.startsemester</p>
				<div class="mdh-course-page__occasion-content">
					<div class="mdh-course-page__occasion-details">
						<div class="mdh-course-page__occasion-detail">
							<p class="mdh-p mdh-course-page__occasion-detail-header">$stringTranslations.Scope</p>
							<p class="mdh-p">$course.credits $stringTranslations.CreditsShort</p>
						</div>
						<div class="mdh-course-page__occasion-detail">
							<p class="mdh-p mdh-course-page__occasion-detail-header">$stringTranslations.Time</p>
							<p class="mdh-p">$course.startdate - $course.enddate ($course.studypace)</p>
						</div>
						<div class="mdh-course-page__occasion-detail">
							<p class="mdh-p mdh-course-page__occasion-detail-header">$stringTranslations.EducationLevel</p>
							<p class="mdh-p">$course.level</p>
						</div>
						<div class="mdh-course-page__occasion-detail">
							<p class="mdh-p mdh-course-page__occasion-detail-header">$stringTranslations.CourseType</p>
							<p class="mdh-p">$course.courseType</p>
						</div>
					</div>
					<div class="mdh-course-page__occasion-details">
						<div class="mdh-course-page__occasion-detail">
							<p class="mdh-p mdh-course-page__occasion-detail-header">$stringTranslations.Language</p>
							<p class="mdh-p">$course.tutoringlanguage</p>
						</div>
						<div class="mdh-course-page__occasion-detail">
							<p class="mdh-p mdh-course-page__occasion-detail-header">$stringTranslations.Where</p>
							<p class="mdh-p">$course.location</p>
						</div>
                    	#if($course.teachingformid && $course.teachingformid == "DST")
						<div class="mdh-course-page__occasion-detail">
							<p class="mdh-p mdh-course-page__occasion-detail-header">$stringTranslations.TeachingForm</p>
							<p class="mdh-p">$course.teachingform</p>
						</div>
						#end
						<div class="mdh-course-page__occasion-detail">
							<p class="mdh-p mdh-course-page__occasion-detail-header">$stringTranslations.CourseSyllabusAndLiterature</p>
							<a href="$courseplanLink?id=$course.syllabusId" class="mdh-text-link mdh-text-link--bold">$stringTranslations.CoursePlanLinkText ($course.coursecode)</a>
						</div>
					</div>
				</div>
				<div class="mdh-course-page__occasion-requirements">
					<button class="mdh-p mdh-course-page__occasion-requirements-button" data-ignore-close="true" role="button" tabindex="0" data-toggle="#occasion-req-$groupCount$foreach.index">
						$stringTranslations.CourseRequirementsHeader
					</button>
				</div>
				<div class="mdh-course-page__occasion-requirements-content" id="occasion-req-$groupCount$foreach.index">
					<div class="mdh-course-page__occasion-detail">
						#if($course.entryrequirements)
							<p class="mdh-p mdh-course-page__occasion-requirements-header">$stringTranslations.Requirements</p>
							<p class="mdh-p">$course.entryrequirements</p>
						#elseif($course.specificentryrequirements)
							<p class="mdh-p mdh-course-page__occasion-requirements-header">$stringTranslations.SpecificRequirements</p>
							<p class="mdh-p">$course.specificentryrequirements</p>
						#end
					</div>
					#if($course.selection)
					<div class="mdh-course-page__occasion-detail">
							<p class="mdh-p mdh-course-page__occasion-requirements-header">$stringTranslations.Selection</p>
							<p class="mdh-p">$course.selection</p>
					</div>
					#end
				</div>
				#if($course.distancecoursearrangement)
				<div class="mdh-course-page__occasion-arrangement">
					<button class="mdh-p mdh-course-page__occasion-requirements-button" data-ignore-close="true" role="button" tabindex="0" data-toggle="#occasion-arrangement-$groupCount$foreach.index">
						$stringTranslations.DistanceCourseArrangement
					</button>
				</div>
				<div class="mdh-course-page__occasion-arrangement-content" id="occasion-arrangement-$groupCount$foreach.index">
					<div class="mdh-course-page__arrangement-detail">
						<p class="mdh-p">$course.distancecoursearrangement</p>
					</div>
				</div>
				#end
			</div>
			

		</li>
	#end
</ul>
#end