<script type="text/javascript">
$(document).ready(function(){
	var container = $('#email_forward_list');

	container.on('click', 'button.remove-trigger', function(ev) {
		ev.preventDefault();
		$(this).parent().parent().parent().hide().find('input').remove();
	});

	container.find('button.add-trigger').on('click', function(ev) {
		ev.preventDefault();
		var html = '<tr><td><div style="float: right"><button class="clean-white remove-trigger">Remove</button></div><input type="text" name="helpdesk_emails[]" placeholder="Email address or a full domain name (Example: my-alias@mydomain.com)" value="" /></td></tr>';
		container.find('tbody').find('tr').last().before(html);
	});

	$('#fwd_emails_savebtn').on('click', function(ev) {
		ev.preventDefault();
		$('#email_forward_form').submit();
		$(this).hide();
		$('#fwd_emails_loading').show();
	});

	var overlay = new DeskPRO.UI.Overlay({
		triggerElement: $('#fwd_emails_overlay_trigger'),
		contentElement: $('#fwd_emails_overlay')
	});
});
</script>

<strong>
	<span id="fwd_emails_overlay_trigger" class="editable-link"><span>
		Email Address Aliases
	</span></span>
</strong>
<p style="margin-bottom: 8px">
	If you create an email alias (any other email address that forwards into one of the accounts above), you need to list the original &quot;From&quot; addresses here.

	<span class="small-light-icon tipped" data-tipped-options="maxWidth: 250" title="
		<span style='font-size:11px;'>For example, if you own <span style='white-space:nowrap;text-decoration: underline;'>custom-alias@mydomain.com</span> and set it to forward to
		<span style='white-space:nowrap;text-decoration: underline;'>support@{{ app.getSetting('core.deskpro_url')|url_domain }}</span>,
		then you must add that address here so the helpdesk knows that it is an internal email address and not one that belongs to a user.</span>
	"></span>
</p>
{% if helpdesk_emails %}
<ul class="small-detail-list">
	{% for addr in helpdesk_emails %}
		<li>{{ addr }}</li>
	{% endfor %}
</ul>
{% endif %}

<div id="fwd_emails_overlay" style="width: 700px; height: 600px; display: none;">
	<div class="overlay-title">
		<span class="close-overlay"></span>
		<h4>Email Address Aliases</h4>
	</div>
	<div class="overlay-content">
		<form action="{{ path('admin_emailgateways_savehdaddr') }}" method="POST" id="email_forward_form">
			<input type="hidden" name="process" value="1" />
			<input type="hidden" name="redirect_route" value="{{ redirect_route }}" />
			<div class="check-grid item-list" id="email_forward_list">
				<table width="100%">
					<thead>
						<tr>
							<th style="text-align:left">Email Address Aliases</th>
						</tr>
					</thead>
					<tbody>
						{% for addr in helpdesk_emails %}
							<tr>
								<td>
									<div style="float: right">
										<button class="clean-white remove-trigger">Remove</button>
									</div>
									<input type="text" name="helpdesk_emails[]" value="{{ addr }}" placeholder="Email address or a full domain name (Example: my-alias@mydomain.com)" />
								</td>
							</tr>
						{% endfor %}

						<tr>
							<td>
								<button class="clean-white add-trigger">Add New Address</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</form>
	</div>
	<div class="overlay-footer">
		<div id="setout_save_wrap">
			<button class="clean-white" id="fwd_emails_savebtn">Save Changes</button>
		</div>
		<div id="fwd_emails_loading" style="display: none;">
			<img src="{{ asset('images/spinners/loading-small-flat.gif') }}" />
		</div>
	</div>
</div>