<template name="mailMessagesInstructions">
	<div class="content">
		<div class="list-view mail-message">
			<div class="title">
				<h2>{{_ "Mail_Messages"}}</h2>
			</div>
			<p>{{_ "Mail_Messages_Instructions"}}</p>
			<form>
				<fieldset>
					<div class="input-line double-col">
						<label>{{_ "From"}}</label>
						<div>{{name}}</div>
						<div>{{email}}</div>
					</div>
					<div class="input-line double-col">
						<label>{{_ "To_users"}}</label>
						<div>
							{{> inputAutocomplete settings=autocompleteSettings id="to_users" name="to_users" class="search" autocomplete="off"}}
							<ul class="selected-users">
								{{#each selectedUsers}}
									<li>{{.}} <i class="icon-cancel remove-to-user"></i></li>
								{{/each}}
							</ul>
						</div>
					</div>
					<div class="input-line double-col">
						<label>{{_ "Additional_emails"}}</label>
						<div>
							<input type="text" name="to_emails" value="" />
						</div>
					</div>
					<div class="input-line double-col">
						<label>{{_ "Subject"}}</label>
						<div>
							<input type="text" name="subject" value="{{_ "Mail_Messages_Subject" roomName}}" />
						</div>
					</div>
				</fieldset>
			</form>
			<div class="error error-missing-to alert error-color error-background error-border" style="display: none">
				{{_ "Mail_Message_Missing_to"}}
			</div>
			<div class="error error-invalid-emails alert error-color error-background error-border" style="display: none">
				{{_ "Mail_Message_Invalid_emails" erroredEmails}}
			</div>
			<div class="error error-select alert error-color error-background error-border" style="display: none">
				{{{_ "Mail_Message_No_messages_selected_select_all"}}}
			</div>
			<p style="margin-top: 30px">
				<button type="button" class="button cancel">{{_ "Cancel"}}</button>
				<button type="button" class="button primary send">{{_ "Send"}}</button>
			</p>
		</div>
	</div>
</template>
