<div class="widget">
	<div class="widget-header">
		<div class="left">
			<div class="title">{{page-title}}</div>
		</div>
        <div class="right btn-header">
			<div class="icon-button green" id="add-user-mgmt" data-localize="management-users.create-new-user"></div>
		</div>
	</div>
</div>
<div class="manage-users-table" data-help-localize="help.{{{chart-helper}}}">
<div class="create-user-row user-details datatablesubrow d-table">
	<div class="row help-zone-vs" data-help-localize="help.manage-users.full-name">
		<div class="title" data-localize="management-users.full-name"></div>
		<div class="detail"><input class="full-name-text" type="text" value="" readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly'); this.blur(); this.focus();}"/></div>
	</div>
	<div class="row help-zone-vs" data-help-localize="help.manage-users.username">
		<div class="title" data-localize="management-users.username"></div>
		<div class="detail"><input class="username-text" type="text" value="" readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly'); this.blur(); this.focus();}"/></div>
	</div>
	<div class="row">
		<div class="title" data-localize="management-users.password"></div>
		<div class="detail">
			<input class="password-text" type="text" value=""/><br/>
			<div class="small-link generate-password" data-localize="management-users.generate-password"></div>
		</div>
	</div>
	<div class="row help-zone-vs" data-help-localize="help.manage-users.email">
		<div class="title" data-localize="management-users.email"></div>
		<div class="detail"><input class="email-text" type="text" value="" readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly'); this.blur(); this.focus();}"/></div>
	</div>
	<div class="row help-zone-vs" data-help-localize="help.manage-users.global-admin">
		<div class="title" data-localize="management-users.global-admin"></div>
		<div class="detail">
			<div class="option">
				<div class="global-admin checkbox"></div>
				<div class="text"></div>
			</div>
		</div>
	</div>
	<div class="row admin-apps help-zone-vs" data-help-localize="help.manage-users.admin-of">
		<div class="title" data-localize="management-users.admin-of"></div>
		<div class="select-apps">
            <i class="fa fa-plus-circle"></i>
			<input type="hidden" value="" class="app-list"/>
		</div>
		<div class="detail user-admin-list">
			<span data-localize="management-users.admin-of.tip"></span>
		</div>
		<div class="no-apps" data-localize="management-users.admin-of.tip"></div>
	</div>
	<div class="row user-apps help-zone-vs" data-help-localize="help.manage-users.user-of">
		<div class="title" data-localize="management-users.user-of"></div>
		<div class="select-apps">
            <i class="fa fa-plus-circle"></i>
			<input type="hidden" value="" class="app-list"/>
		</div>
		<div class="detail user-admin-list">
			<span data-localize="management-users.user-of.tip"></span>
		</div>
		<div class="no-apps" data-localize="management-users.user-of.tip"></div>
	</div>
	<div class="button-container">
		<a class="icon-button light create-user" data-localize="management-users.create-user"></a>
		<a class="icon-button light cancel-user-row" data-localize="common.cancel"></a>
	</div>
</div>
<table id="user-table" cellspacing="0" class="d-table"></table>
<div id="listof-apps">
    <div class="search">
        <i class="fa fa-search"></i>
        <input type="search" readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly'); this.blur(); this.focus();}">
    </div>
	<div class="scrollable">
		{{#eachOfObjectValue apps}}
		<div class="app searchable">
			<div class="image" style="background-image: url('/appimages/{{this._id}}.png');"></div>
			<div class="name">{{this.name}}</div>
			<input class="app_id" type="hidden" value="{{this._id}}"/>
		</div>
		{{/eachOfObjectValue}}
	</div>
	<div class="button-container">
		<a class="icon-button green" id="done" data-localize="common.done"></a>
		<a class="icon-button dark" id="select-all" data-localize="common.select-all"></a>
		<a class="icon-button dark" id="deselect-all" data-localize="common.deselect-all"></a>
	</div>
</div>
</div>