<template name="message">
	<li id="{{_id}}" data-context={{actionContext}} class="message background-transparent-dark-hover {{ignoredClass}} {{sequentialClass}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{customClass}}" data-username="{{u.username}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}">
		{{#if avatar}}
			{{#if avatarFromUsername}}
				<button class="thumb user-card-message" data-username="{{u.username}}" tabindex="1">{{> avatar username=avatarFromUsername}}</button>
			{{else}}
				<button class="thumb user-card-message" data-username="{{u.username}}" tabindex="1">
					<div class="avatar">
						<div class="avatar-image" style="background-image:url({{encodeURI avatar}})"></div>
					</div>
				</button>
			{{/if}}
		{{else}}
			{{#if emoji}}
				<button class="thumb user-card-message" data-username="{{u.username}}" tabindex="1">
					<div class="avatar">
						{{{getEmoji emoji}}}
					</div>
				</button>
			{{else}}
				<button class="thumb user-card-message" data-username="{{u.username}}" tabindex="1">{{> avatar username=u.username}}</button>
			{{/if}}
		{{/if}}
		<button type="button" class="user user-card-message color-primary-font-color" data-username="{{u.username}}" tabindex="1">{{getName}}{{#if showUsername}} <span class="message-alias border-component-color color-info-font-color">@{{u.username}}</span>{{/if}}</button>
		<span class="info border-component-color color-info-font-color">
			{{#each roleTags}}
				<span class="role-tag color-secondary-color border-component-color" data-role="{{description}}">{{description}}</span>
			{{/each}}
			{{#if isBot}}
				<span class="is-bot color-secondary-color border-component-color">Bot</span>
			{{/if}}
			<span class="time" title='{{date}} {{time}}'>{{time}}</span>
			{{#if showTranslated}}
				<span class="translated">
					<i class="icon-language {{#if autoTranslateFetching}}loading{{/if}}" aria-label="{{_ "Translated"}}"></i>
				</span>
			{{/if}}
			{{#if sentByEmail}}
				<span class="sent-by-email">
					<i class="icon-mail" title='{{_ "Message_sent_by_email"}}' aria-label='{{_ "Message_sent_by_email"}}'></i>
				</span>
			{{/if}}
			{{#if edited}}
				<span class="edited" title='{{_ "edited"}} {{_ "at"}} {{editTime}} {{_ "by"}} {{editedBy}}'>
					<i class="icon-edit" aria-label="{{_ "Edited"}}"></i>
					<button class="thumb thumb-small user-card-message" data-username="{{editedBy}}" tabindex="1">{{> avatar username=editedBy}}</button>
				</span>
			{{/if}}
			{{#if private}}
				<span class="private">{{_ "Only_you_can_see_this_message"}}</span>
			{{/if}}
		</span>
		{{#if fromSearch}}
			<span class="user color-info-font-color">
				{{>icon icon=roomIcon}}{{channelName}}
			</span>
		{{/if}}
		{{#if isIgnored}}
			<span class="toggle-hidden icon-right-dir" data-message="{{_id}}"> {{_ "Message_Ignored"}} </span>
		{{/if}}
		<div class="body color-primary-font-color {{system true}}" dir="auto" data-unread-text="{{_ "Unread_Messages"}}">
			{{#if isSnippet}}
				<div class="snippet-name">{{_ "Snippet_name"}}: {{snippetName}}</div>
			{{/if}}
			{{{body}}}
			{{#if hasOembed}}
				{{#each urls}}
					{{injectIndex . @index}} {{> oembedBaseWidget}}
				{{/each}}
			{{/if}}
			{{#each attachments}}
				{{injectIndex . @index}} {{> messageAttachment}}
			{{/each}}
		</div>
		{{#with readReceipt}}
		<div class="read-receipt {{readByEveryone}}">
			{{> icon icon="check" }}
		</div>
		{{/with}}
		{{#unless system}}
			<div class="message-actions">
				{{#if messageActions 'message'}}
					<div class="message-actions__buttons">
						{{#each action in messageActions 'message'}}
							<button class="message-actions__button" data-message-action="{{action.id}}">
									{{> icon block="message-actions__button-icon" icon=action.icon}}
							</button>
						{{/each}}
					</div>
				{{/if}}
				{{#if messageActions 'menu'}}
					<div class="message-actions__menu">
						{{> icon block="message-actions__menu-icon" icon="menu"}}
					</div>
				{{/if}}
			</div>
		{{/unless}}
		<ul class="actionLinks {{hideActionLinks}}">
			{{#each actionLink in actionLinks}}
				<li class="color-primary-action-color">
					<span class="action-link" data-actionlink="{{actionLink.id}}">
						{{#if actionLink.icon}}
							<i class="{{actionLink.icon}}"></i>
						{{/if}}
						{{#if actionLink.i18nLabel}}
							{{_ actionLink.i18nLabel}}
						{{else}}
							{{actionLink.label}}
						{{/if}}
					</span>
				</li>
			{{/each}}
		</ul>
		{{# if broadcast}}
			{{#with u}}
				<button type="button" class="rc-button rc-button--outline rc-button--primary rc-button-broadcast js-reply-broadcast" name="button">{{> icon block="rc-button-broadcast__icon" icon="reply"}} {{_'Reply'}} </button>
			{{/with}}
		{{/if}}
		<ul class="reactions {{hideReactions}}">
			{{#each reaction in reactions}}
				<li data-emoji="{{reaction.emoji}}" {{markUserReaction reaction}}>
					<span class="reaction-emoji">{{> renderEmoji reaction.emoji}}</span>
					<span class="reaction-count">{{reaction.count}}</span>
					<ul class="people">
						<span style="font-weight: bold;">
							{{reaction.usernames}} <span style="color: #aaa;">{{reaction.reaction}}</span>
						</span>
					</ul>
				</li>
			{{/each}}
			<li class="add-reaction">
				<span class="icon-people-plus"></span>
			</li>
		</ul>
	</li>
</template>
