<template name="messageBox">
	{{#if subscribed}}
		<form class="message-form secondary-font-color" method="post" action="/">
			{{> messagePopupConfig getPopupConfig}}
			{{#if allowedToSend}}
			<div class="message-input border-component-color">
				<div class="input-message-container content-background-color">
					<textarea dir="auto" name="msg" maxlength="{{maxMessageLength}}" class="message-form-text input-message autogrow-short" placeholder="{{_ 'Message'}}"></textarea>

					<div class="inner-left-toolbar">
						<i class="emoji-picker-icon icon-people"></i>
					</div>
				</div>

				{{#unless showSend}}
					{{#if showFileUpload}}
						<div class="message-buttons file">
							<i class="icon-attach file"></i>
							<input type="file" accept="{{fileUploadAllowedMediaTypes}}">
						</div>
					{{/if}}


					{{#if showSandstorm}}
						<div class="message-buttons sandstorm-offer">
							<i class="icon-plus" title="{{_ "Sandstorm_Powerbox_Share"}}"></i>
						</div>
					{{/if}}

					{{#if showLocation}}
						<div class="message-buttons location">
							<i class="icon-location location"></i>
						</div>
					{{/if}}

					{{#if showMic}}
						<div class="message-buttons">
							<div class="mic">
								<i class="icon-mic" aria-label="{{_ "Record"}}"></i>
							</div>
							<div class="stop-mic hidden">
								<i class="icon-stop" aria-label="{{_ "Stop_Recording"}}"></i>
							</div>
						</div>
					{{/if}}

					{{#if showVRec}}
						<div class="message-buttons video-button">
							<i class="icon-videocam" aria-label="{{_ "Record"}}"></i>
						</div>
					{{/if}}
				{{/unless}}

				{{#if showSend}}
					<div class="message-buttons send-button">
						<i class="icon-paper-plane" aria-label="{{_ "Send"}}"></i>
					</div>
				{{/if}}
			</div>
			{{else}}
			<div class="stream-info">
				{{#if isBlockedOrBlocker}}
					{{_ "room_is_blocked"}}
				{{else}}
					{{_ "room_is_read_only"}}
				{{/if}}
			</div>
			{{/if}}
			<div class="stream-info">
				{{#with usersTyping}}
					<strong>{{users}}</strong>
					{{#if multi}}
						{{#if selfTyping}}
							{{_ "are_also_typing"}}
						{{else}}
							{{_ "are_typing"}}
						{{/if}}
					{{else}}
						{{#if selfTyping}}
							{{_ "is_also_typing" context="male"}}
						{{else}}
							{{_ "is_typing" context="male"}}
						{{/if}}
					{{/if}}
				{{/with}}
			</div>
			{{#if allowedToSend}}
				{{#if showFormattingTips}}
				<div class="formatting-tips" aria-hidden="true" dir="auto">
					{{#if showMarkdown}}
					<b>*{{_ "bold"}}*</b>
					<i>_{{_ "italics"}}_</i>
					<span>~<strike>{{_ "strike"}}</strike>~</span>
					{{/if}}
					{{#if showMarkdownCode}}
					<code class="code-colors inline">`{{_ "inline_code"}}`</code>
					<code class="code-colors inline"><span class="hidden-br"><br></span>```<span class="hidden-br"><br></span><i class="icon-level-down"></i>{{_ "multi"}}<span class="hidden-br"><br></span><i class="icon-level-down"></i>{{_ "line"}}<span class="hidden-br"><br></span><i class="icon-level-down"></i>```</code>
					{{/if}}
					{{#if katexSyntax}}
					<span><a href="https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX" target="_blank">{{katexSyntax}}</a></span>
					{{/if}}
					{{#if showMarkdown}}
					<q><span class="hidden-br"><br></span>&gt;{{_ "quote"}}</q>
					{{/if}}
				</div>
				{{/if}}
			{{/if}}
			<div class="editing-commands" aria-hidden="true" dir="auto">
				<div class="editing-commands-cancel">{{_ 'Esc_to'}} <button type="button">{{_ 'Cancel_message_input'}}</button></div>
				<div class="editing-commands-save">{{_ 'Enter_to'}} <button type="button">{{_ 'Save_changes'}}</button></div>
			</div>
		</form>
	{{else}}
		{{#with notSubscribedTpl}}
			{{> Template.dynamic . }}
		{{else}}
			{{#if canJoin}}
			<div>
				{{{_ "you_are_in_preview_mode_of" room_name=roomName}}}
				{{#if joinCodeRequired}}
					<input type="text" name="joinCode" placeholder="{{_ 'Code'}}" style="width: 100px">
				{{/if}}
				<button class="button join"><span><i class="icon-login"></i> {{_ "join"}}</span></button>
			</div>
			{{/if}}
		{{/with}}
	{{/if}}
</template>
