<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>{{subject}}</title>
	<style type="text/css">
		table td {border-collapse: collapse;}
	</style>
</head>
<body>
	<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#f0f3f4" style="-webkit-box-shadow: 1px 3px 14px 7px #dfe7e8; -moz-box-shadow: 1px 3px 14px 7px #dfe7e8; box-shadow: 1px 3px 14px 7px #dfe7e8;">
		<tr>
			<td>
				<table cellpadding="0" cellspacing="0" border="0" align="center">
						<tr bgcolor="#3f819e">
							<td width="45" valign="top" style="padding: 0px 10px 0px 20px;">
								<a href="https://openki.net/">
								<img src="{{logo.url}}"
									width="45"
									height="45"
									border="0"
									alt="{{siteName}} Logo"
									style="padding-bottom: 0px; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />
								</a>
								</td>
							<td width="455" style="padding: 0px; font-family: Source Sans Pro, sans-serif; font-size: 22px; font-weight: lighter;">
								<a href="https://openki.net/" style="color: #fff !important; text-decoration: none !important;">{{siteName}}</a>
							</td>
						</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td width="400" valign="top" style="font-family: Source Sans Pro, sans-serif; font-size: 12px; padding: 20px 20px 10px 20px;">
					<span style="font-size: 16px; font-weight: bold;">
						{{mf "notification.event.mail.greeting" "Hi {USERNAME}" USERNAME=username LOCALE=locale}}
					</span>
					<p style="margin: 1em 0;">
						{{#if new}}
							{{mf 'notification.event.mail.new' 'A new event was just published for course "{COURSE}":' COURSE=course.name LOCALE=locale}}
						{{else}}
							{{mf 'notification.event.mail.changed' 'The following event for course "{COURSE}" changed:' COURSE=course.name LOCALE=locale}}
						{{/if}}
						<br/>
						<a href="{{courseLink}}">
							<i class="fa fa-external-link"></i>
							{{mf 'event.details.viewCourse' 'view course' LOCALE=locale}}
						</a>
					</p>
			</td>
		</tr>
		{{#if additionalMessage}}
		<tr>
			<td width="400" valign="top" style="font-family: Source Sans Pro, sans-serif; font-size: 12px; padding: 20px 20px 10px 20px;">
					<p style="margin: 1em 0;">
						{{mf "notification.event.mail.personalMessage" "The Organizer left a message for you:"}}

					</p>
			</td>
		</tr>
		<tr>
			<td width="400" valign="top" style="padding: 0px 20px 20px 20px;">
				<table cellpadding="0" cellspacing="0" border="0" align="center">
					<tr>
						<td colspan="2" width="400" valign="top" bgcolor="#dddddd" style="font-family: Source Sans Pro, sans-serif; font-size: 12px; color: #333333; padding: 15px;">
								{{additionalMessage}}
						</td>
					</tr>
				</table>
			</td>
		</tr>
		{{/if}}
		<tr>
			<td width="400" valign="top" style="padding: 0px 20px 0px 20px;">
				<table cellpadding="0" cellspacing="0" border="0" align="center">
					<tr>
						<td width="400" valign="top" bgcolor="#c1f2ae" style="font-family: Source Sans Pro, sans-serif; font-size: 12px; padding: 15px;">
							<div style="float: right">
								<a href="{{eventLink}}">
									<i class="fa fa-calendar"></i>
									{{mf 'notification.event.viewEvent' 'view event' LOCALE=locale}}
								</a>
							</div>
							<a href="{{eventLink}}" style="color: #333333 !important; text-decoration: none !important;">
								{{eventDate}}
								<br />
								{{eventStart}}
								{{#if eventEnd}}
									 - {{eventEnd}}
								{{/if}}
								{{#if venueLine}}
									<br />
									{{venueLine}}
								{{/if}}
							</a>
						</td>
					</tr>
					<tr>
						<td width="400" valign="top" height="2px" style="font-size:2px;">
						</td>
					</tr>
					<tr>
						<td width="400" valign="top" bgcolor="#d9eaf2" style="font-family: Source Sans Pro, sans-serif; font-size: 12px; padding: 15px;">
							<a href="{{eventLink}}" style="color: #333333 !important; text-decoration: none !important;">
								<span style="font-size: 14px; font-weight: bold;">
									{{event.title}}
								</span>
								<br />
								{{{event.description}}}
							</a>
						</td>
					</tr>
					<tr>
						<td width="350" valign="top" style="font-family: Source Sans Pro, sans-serif; font-size: 12px; text-align:right; padding: 5px;">
								<a href="{{calLink}}" style="color: blue !important; text-decoration: none !important;">
									{{mf "notification.event.mail.linkCalendar" "Add this event to my calendar" LOCALE=locale}}
								</a>
							<br />
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td width="500" valign="top" bgcolor="#3f819e">
				<table cellpadding="0" cellspacing="0" border="0" align="center" style="color:#dddddd; font-family: Source Sans Pro, sans-serif; font-size: 10px; text-align: center;">
					<tr>
						<td width="500" valign="top" style="padding: 5px 15px 0px 15px;">
							{{mf 'notification.event.mail.notice' 'You receive this mail because you are involved in the course "{COURSE}".' COURSE=course.name LOCALE=locale}}
						</td>
					</tr>
					<tr>
						<td width="500" valign="top" style="padding: 0px 15px 5px 15px;">
							<a href="{{unsubLink}}" style="color:#dddddd !important; text-decoration: underline;">
								{{mf "notification.event.mail.unsubLink" "Unsubscribe from all further notifications" LOCALE=locale}}
							</a>
							&nbsp;
							<a href="{{urlFor 'profile'}}" style="color:#dddddd !important; text-decoration: underline;">
								{{mf "notification.event.mail.profileLink" "Visit your profile" LOCALE=locale}}
							</a>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>
