<template name="room">
	<div class="dropzone">
		<div class="dropzone-overlay">
			<div>
				{{_ "Drop_to_upload_file"}}
			</div>
		</div>
		<section class="messages-container {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
			{{#unless embeddedVersion}}
			<header class="fixed-title">
				{{> burger}}
				<h2>
					{{#if showToggleFavorite}}
						<a href="#favorite" class="toggle-favorite"><i class="{{favorite}}" aria-label="{{_ favoriteLabel}}"></i></a>
					{{/if}}
					<i class="{{roomIcon}} status-{{userStatus}}"></i>
					<span class="room-title">{{roomName}}</span>
					<span class="room-topic">{{{RocketChatMarkdown roomTopic}}}</span>
				</h2>
			</header>
			{{/unless}}
			<div class="container-bars {{containerBarsShow unreadData uploading}}">
				{{#with unreadData}}
					{{#if since}}
						{{#if count}}
							<div class="unread-bar">
								<button class="jump-to">
									<span class="jump-to-large">{{_ "Jump_to_first_unread"}}</span>
									<span class="jump-to-small">{{_ "Jump"}}</span>
								</button>
								<span class="unread-count-since">
									{{_ "S_new_messages_since_s" count formatUnreadSince}}
								</span>
								<span class="unread-count">
									{{_ "N_new_messages" count}}
								</span>
								<button class="mark-read">
									{{_ "Mark_as_read"}}
								</button>
							</div>
						{{/if}}
					{{/if}}
				{{/with}}
				{{#each uploading}}
					<div class="upload-progress {{#if error}}upload-error{{/if}}">
						{{#if error}}
							<div class="upload-progress-text">
								{{error}}
								<button>
									{{_ "close"}}
								</button>
							</div>
						{{else}}
							<div class="upload-progress-progress" style="width: {{percentage}}%;"></div>
							<div class="upload-progress-text">
								{{name}}... {{percentage}}%
								<button>
									{{_ "cancel"}}
								</button>
							</div>
						{{/if}}
					</div>
				{{/each}}
			</div>
			<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}">
				<div class="ticks-bar"></div>
				<button class="new-message not">
					<i class="icon-down-big"></i>
					{{_ "New_messages"}}
				</button>
				<div class="jump-recent {{#unless hasMoreNext}}not{{/unless}}">
					<button>{{_ "Jump_to_recent_messages"}} <i class="icon-level-down"></i></button>
				</div>
				{{#unless canPreview}}
					<div class="content room-not-found">
						<div>
							{{_ "You_must_join_to_view_messages_in_this_channel"}}
						</div>
					</div>
				{{/unless}}
				<div class="wrapper {{#if hasMoreNext}}has-more-next{{/if}} {{hideUsername}} {{hideAvatar}}">
					<ul aria-live="polite">
						{{#if canPreview}}
							{{#if hasMore}}
								<li class="load-more">
									{{> loading dark=true}}
								</li>
							{{else}}
								<li class="start">
									{{_ "Start_of_conversation"}}
								</li>
							{{/if}}
						{{/if}}
						{{#each messagesHistory}}
							{{#nrr nrrargs 'message' .}}{{/nrr}}
						{{/each}}
						{{#if hasMoreNext}}
							<li class="load-more">
								{{> loading dark=true}}
							</li>
						{{/if}}
					</ul>
				</div>
			</div>
			<footer class="footer">
				{{> messageBox}}
			</footer>
		</section>
		<section class="flex-tab">
			{{> Template.dynamic template=flexTemplate data=flexData}}
		</section>
	</div>
</template>
