<template name="adminRooms">
	<div class="main-content-flex">
		<section class="page-container page-list flex-tab-main-content">
			<header class="fixed-title border-component-color">
				{{> burger}}
				<h2>
					<span class="room-title">{{_ "Rooms"}}</span>
				</h2>
			</header>
			<div class="content">
				{{#unless hasPermission 'view-room-administration'}}
					<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
				{{else}}
					<form class="search-form" role="form">
						<div class="input-line search">
							<input type="text" id="rooms-filter" placeholder="{{_ "Search"}}" dir="auto">
							<i class="icon-search secondary-font-color"></i>
							{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
						</div>
						<label><input type="checkbox" name="room-type" value="c"> {{_ "Channels"}}</label>
						<label><input type="checkbox" name="room-type" value="d"> {{_ "Direct_Messages"}}</label>
						<label><input type="checkbox" name="room-type" value="p"> {{_ "Private_Groups"}}</label>
					</form>
					<div class="results">
						{{{_ "Showing_results" roomCount}}}
					</div>
					<div class="list">
						<table class="secondary-background-color">
							<thead>
								<tr class="admin-table-row">
									<th class="content-background-color border-component-color" width="30%">{{_ "Name"}}</th>
									<th class="content-background-color border-component-color" width="20%">{{_ "Type"}}</th>
									<th class="content-background-color border-component-color" width="20%">{{_ "Users"}}</th>
									<th class="content-background-color border-component-color" width="10%">{{_ "Msgs"}}</th>
									<th class="content-background-color border-component-color" width="20%">{{_ "Default"}}</th>
								</tr>
							</thead>
							<tbody>
								{{#each rooms}}
								<tr class="room-info row-link">
									<td class="border-component-color">{{name}}</td>
									<td class="border-component-color">{{type}}</td>
									<td class="border-component-color">{{usernames.length}}</td>
									<td class="border-component-color">{{msgs}}</td>
									<td class="border-component-color">{{default}}</td>
								</tr>
								{{/each}}
							</tbody>
						</table>
						{{#if hasMore}}
							<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
						{{/if}}
					</div>
				{{/unless}}
			</div>
		</section>
		{{#with flexData}}
			{{> flexTabBar}}
		{{/with}}
	</div>
</template>
