<style type="text/css">
    * {
        font-size: 14px;
        font-family: Arial;
        background-color: white;
    }
    .header {
        font-weight: bold;
        min-width: 20px;
    }
    .td {
        border: 1px solid black;
    }
    .tr {
        border: 1px solid gray;
    }
    .tg  {border-collapse:collapse;border-spacing:0;border-color:#999;}
    .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#999;color:#444;background-color:#f7f7f7;border-top-width:1px;border-bottom-width:1px;}
    .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#999;color:black;background-color:white;border-top-width:1px;border-bottom-width:1px;}
    .tg .tg-baqh{text-align:left;vertical-align:top}
    .tg .tg-yw4l{vertical-align:top;}
</style>

<table role="presentation" data-resolveio-email-wrapper="true" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f2f2f2; margin: 0; padding: 36px 0;">
	<tr>
		<td align="center" style="padding: 0 16px;">
			<table role="presentation" width="640" cellpadding="0" cellspacing="0" style="width: 640px; max-width: 640px; background-color: #ffffff; border: 1px solid #e5e5e5; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);">
				<tr>
					<td style="background-color: #0b0b0b; color: #ffffff; padding: 22px 28px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
						<div style="font-size: 18px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;">ResolveIO</div>
						<div style="font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #bfbfbf; margin-top: 6px;">Operational Intelligence</div>
					</td>
				</tr>
				<tr>
					<td style="padding: 30px 28px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.7; color: #111111;">
Hello {{user}},
<br><br>
Support ticket: #{{support_ticket_number_string}} has been modified by {{user_name}}.
{{message}}

<br><br>
<div id="container">
	<table class="tg">
		<thead>
			<tr>
				<th class="tg-yw4l" style="padding: 0; margin: 0; border-left: 1px solid #999;">
					<img src="{{logo}}" style="width: 130px; height: auto; background-color: white; margin-left: -10px; margin-bottom: -10px;" alt="Logo">
				</th>
				<th class="tg-yw4l" style="width: 100%; max-width: 100%; font-size: 20px; color: gray; text-align: right; padding: 30px; border-right: 1px solid #999;">Support Ticket</th>
			</tr>
		</thead>
		<tbody>	
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold;">Support Ticket <br>Number</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%;">{{support_ticket_number_string}}</td>
			</tr>
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold;">Client</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%;">{{client}}</td>
			</tr>		
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold;">Type</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%;">{{type}}</td>
			</tr>			
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold;">Issue <br>Description</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%;"><pre style="width: 100%; max-width: 100%; background-color: #f7f7f7;">{{issue}}</pre></td>
			</tr>				
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold;">Priority</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%;">{{priority}}</td>
			</tr>	
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold;">Status</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%;">{{status}}</td>
			</tr>								
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold;">Substatus</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%;">{{substatus}}</td>
			</tr>					
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold;">Date created</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%;">{{date_created_string}}</td>
			</tr>	
		</tbody>
	</table>
</div>

{{#if (greaterThan changeLog.length 0)}}
	<table class="tg">
		<thead>
			<tr>
				<th class="tg-yw4l" style="min-width: 130px; max-width: 130px; padding: 0; margin: 0; border-left: 1px solid #999;">&nbsp;</th>
				<th class="tg-yw4l" style="width: 100%; max-width: 100%; font-size: 20px; color: gray; text-align: right; padding: 30px; padding-right: 20px; border-right: 1px solid #999;">Change Log</th>	
			</tr>	
		</thead>
		<tbody>
			{{#each changeLog}}
				<tr>
					<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold; padding-right: 30px;">Changed On:</td>
					<td class="tg-baqh" style="min-width: 60%; max-width: 60%; text-align: left;">{{propName}}</td>
				</tr>	
				<tr>
					<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold; padding-right: 30px;">Old:</td>
					<td class="tg-baqh" style="min-width: 60%; max-width: 60%; text-align: left;"><pre  style="width: 100%; max-width: 100%; background-color:#f7f7f7">{{oldValue}}</pre></td>
				</tr>	
				<tr>
					<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold; padding-right: 30px;">New:</td>
					<td class="tg-baqh" style="min-width: 60%; max-width: 60%; text-align: left;"><pre  style="width: 100%; max-width: 100%; background-color:#f7f7f7">{{newValue}}</pre></td>
				</tr>
			{{/each}}
		</tbody>
	</table>
{{/if}}


{{#if lastMessage}}
	<table class="tg">
		<thead>
			<tr>
				<th class="tg-yw4l" style="min-width: 130px; max-width: 130px; padding: 0; margin: 0; border-left: 1px solid #999;">&nbsp;</th>
				<th class="tg-yw4l" style="width: 100%; max-width: 100%; font-size: 20px; color: gray; text-align: right; padding: 30px; padding-right: 20px; border-right: 1px solid #999;">Most Recent Message</th>	
			</tr>	
		</thead>
		<tbody>
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold; padding-right: 30px;">
					Name:
				</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%; text-align: left;">{{lastMessage.user}}</td>
			</tr>
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold; padding-right: 30px;">
					Date Created:
				</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%; text-align: left;">{{formatDate lastMessage.date}}</td>
			</tr>
			<tr>
				<td class="tg-baqh" style="min-width: 30%; max-width: 30%; font-weight: bold; padding-right: 30px;">
					Message:
				</td>
				<td class="tg-baqh" style="min-width: 60%; max-width: 60%; text-align: left;"><pre style="width: 100%; max-width: 100%; background-color:#f7f7f7">{{lastMessage.message}}</pre></td>
			</tr>
		</tbody>
	</table>
{{/if}}

<br><br>
{{#if url_ticket}}
<div>
	<a href="{{url_ticket}}"
		style="background-color: #111111;border: 1px solid #111111;border-radius: 10px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Go to Ticket</a>
</div>
{{/if}}

<br><br><br>
Thanks,<br>
ResolveIO Support Team
</td>
				</tr>
				<tr>
					<td style="padding: 18px 28px; background-color: #f7f7f7; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: #666666;">
						ResolveIO - Need a hand? Reply to this email and we'll jump in.
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
