<template name="listPrivateGroupsFlex">
	<header class="primary-background-color">
		<div>
			<h4>{{_ "Private_Groups"}}</h4>
		</div>
	</header>
	<div class="content primary-background-color">
		<div class="wrapper">
			<div class="flex-control">
				<div class="search">
					<form class="search-form" role="form">
						<div class="input-line search">
							<select class="c-select" id="sort">
								<option value="name" selected="{{sortSelected 'name'}}" class="primary-background-color">{{_ "Name"}}</option>
								<option value="ls" selected="{{sortSelected 'ls'}}" class="primary-background-color">{{_ "Last_seen"}}</option>
							</select>
							<i class="icon-sort-alt-up secondary-font-color"></i>
						</div>
						<div class="input-line search">
							<input type="text" id="channel-search" class="search" placeholder="{{_ "Search_Private_Groups"}}" autocomplete="off" />
							<i class="icon-right-open-small secondary-font-color"></i>
						</div>
					</form>
				</div>
			</div>
			<h4>{{_ "Private_Groups_list"}}</h4>
			<ul>
				{{#each groups}}
					<li>
						<a href="{{pathFor 'group' name=name}}" class="channel-link">
							<i class="icon-lock"></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>
