<template name="adminUsers">
	<div class="main-content-flex">
		<section class="page-container page-list flex-tab-main-content">
			{{> header sectionName="Users"}}
			<div class="content">
				{{#unless hasPermission 'view-user-administration'}}
					<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
				{{else}}
					<form class="search-form" role="form">
						<div class="rc-input__wrapper">
							<div class="rc-input__icon">
								{{#if isReady}}
									{{> icon block="rc-input__icon-svg" icon="magnifier" }}
								{{else}}
									{{> loading }}
								{{/if}}
							</div>
							<input id="users-filter" type="text" class="rc-input__element"
								   placeholder="{{_ "Search"}}" autofocus dir="auto">
					 	</div>
					</form>
					<div class="results">
						{{{_ "Showing_results" users.length}}}
					</div>
					<div class="list">
						<table class="secondary-background-color">
							<thead>
								<tr class="admin-table-row">
									<th class="content-background-color border-component-color">&nbsp;</th>
									<th class="content-background-color border-component-color" width="34%">{{_ "Name"}}</th>
									<th class="content-background-color border-component-color" width="33%">{{_ "Username"}}</th>
									<th class="content-background-color border-component-color" width="33%">{{_ "Email"}}</th>
									<th class="content-background-color border-component-color" width="33%">{{_ "Roles"}}</th>
									<th class="content-background-color border-component-color" width="33%">{{_ "Status"}}</th>
								</tr>
							</thead>
							<tbody>
								{{#each users}}
								<tr class="user-info row-link {{#if not active}}deactivated{{/if}}">
									<td class="border-component-color">
										<div class="user-image status-{{status}}">
											{{> avatar username=username}}
										</div>
									</td>
									<td class="border-component-color">{{name}}</td>
									<td class="border-component-color">{{username}}</td>
									<td class="border-component-color">{{emailAddress}}</td>
									<td class="border-component-color">{{roles}}</td>
									<td class="border-component-color">{{status}}</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>
