<template name="room">
	<div class="dropzone">
		<div class="dropzone-overlay background-transparent-darkest color-content-background-color">
			<div class="background-transparent-darkest">
				{{_ "Drop_to_upload_file"}}
			</div>
		</div>
		<div class="main-content-flex">
			<section class="messages-container flex-tab-main-content {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
				{{#unless embeddedVersion}}
				<header class="fixed-title content-background-color border-component-color">
					{{> 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>
						{{#if isTranslated}}
							<i class="icon-language" aria-label="{{_ "Translated"}}"></i>
						{{/if}}
						<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 color-primary-action-color background-component-color">
									<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 color-primary-action-color background-component-color {{#if error}}error-background error-border{{/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 background-primary-action-color color-content-background-color not">
						<i class="icon-down-big"></i>
						{{_ "New_messages"}}
					</button>
					<div class="jump-recent background-component-color {{#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 error-color">
							<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">
										{{#if isLoading}}
											{{> loading}}
										{{/if}}
									</li>
								{{else}}
									<li class="start color-info-font-color">
										{{_ "Start_of_conversation"}}
									</li>
								{{/if}}
							{{/if}}
							{{#each messagesHistory}}
								{{#nrr nrrargs 'message' .}}{{/nrr}}
							{{/each}}
							{{#if hasMoreNext}}
								<li class="load-more">
									{{#if isLoading}}
										{{> loading}}
									{{/if}}
								</li>
							{{/if}}
						</ul>
					</div>
				</div>
				<footer class="footer border-component-color">
					{{> messageBox}}
				</footer>
			</section>
			{{#with flexData}}
				{{> flexTabBar}}
			{{/with}}
		</div>
	</div>
</template>
