<template name="listDirectMessagesFlex">
	<header>
		<div>
			<h4>{{_ "Direct_Messages"}}</h4>
		</div>
	</header>
	<div class="content">
		<div class="wrapper">
			<div class="flex-control">
				<div class="search">
					<form class="search-form" role="form">
						<div class="input-line search">
							<input type="text" id="channel-search" class="search" placeholder="{{_ "Search"}}" autocomplete="off" />
							<i class="icon-search"></i>
						</div>
						<div class="input-line search">
							<select class="c-select" id="sort">
								<option value="name" selected="{{sortSelected 'name'}}">{{_ "Name"}}</option>
								<option value="ls" selected="{{sortSelected 'ls'}}">{{_ "Last_seen"}}</option>
							</select>
							<i class="icon-sort-alt-up"></i>
						</div>
					</form>
				</div>
			</div>
			<h4>{{_ "List_of_Direct_Messages"}}</h4>
			<ul>
				{{#each rooms}}
					<li>
						<a href="{{pathFor 'direct' username=name}}" class="channel-link">
							<i class="icon-at {{userStatus}}"></i>
							{{name}}
							<span class='opt fixed'>
								{{#if hidden}}
								<i class="icon-eye-off" title="{{_ "Hidden"}}" aria-label="{{_ "Hidden"}}"></i>
								{{/if}}
							</span>
						</a>
					</li>
				{{/each}}
			</ul>
			{{#if hasMore}}
				<div class="load-more">
					{{> loading}}
				</div>
			{{/if}}
		</div>
	</div>
</template>
