<topnav icon="fa fa-fw fa-user" title="Global Users" subnav="true">
	<ul class="nav">
		<li><a href="admin/users">Users</a></li>
		<li><a href="admin/users/create">Create user</a></li>
		<li class="active"><a href="admin/users/edit/{{user_id}}">Edit user</a></li>
	</ul>
</topnav>

<div class="page-container">
	<div class="page">
		<h2>
			Edit User
		</h2>

		<form name="userForm">
			<div>
				<div class="tight-form">
					<ul class="tight-form-list">
						<li class="tight-form-item" style="width: 100px">
							Name
						</li>
						<li>
							<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>
				<div class="tight-form">
					<ul class="tight-form-list">
						<li class="tight-form-item" style="width: 100px">
							Email
						</li>
						<li>
							<input type="email" ng-model="user.email" class="input-xxlarge tight-form-input last" >
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>
				<div class="tight-form">
					<ul class="tight-form-list">
						<li class="tight-form-item" style="width: 100px">
							Username
						</li>
						<li>
							<input type="text" ng-model="user.login" class="input-xxlarge tight-form-input last" >
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>
			</div>

			<br>
			<button type="submit" class="pull-right btn btn-success" ng-click="update()" ng-show="!createMode">Update</button>
		</form>

		<h3>
			Change password
		</h3>

		<form name="passwordForm">
			<div>
				<div class="tight-form">
					<ul class="tight-form-list">
						<li class="tight-form-item" style="width: 100px">
							New password
						</li>
						<li>
							<input type="password" required ng-minlength="4" ng-model="password" class="input-xxlarge tight-form-input last">
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>
			</div>

			<br>
			<button type="submit" class="pull-right btn btn-success" ng-click="setPassword()">Update</button>
		</form>

		<h3>
			Permissions
		</h3>

		<div>
			<div class="tight-form last">
				<ul class="tight-form-list">
					<li class="tight-form-item last">
						Grafana Admin&nbsp;
						<input class="cr1" id="permissions.isGrafanaAdmin" type="checkbox"
						ng-model="permissions.isGrafanaAdmin" ng-checked="permissions.isGrafanaAdmin">
						<label for="permissions.isGrafanaAdmin" class="cr1"></label>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
			<br>
			<button type="submit" class="pull-right btn btn-success" ng-click="updatePermissions()">Update</button>
			<br>
		</div>

		<h3>
			Organizations
		</h3>

		<form name="addOrgForm">
			<div class="tight-form">
				<ul class="tight-form-list">
					<li class="tight-form-item" style="width: 160px">
						Add organization
					</li>
					<li>
						<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"
									required class="input-xlarge tight-form-input" placeholder="organization name">
					</li>
					<li class="tight-form-item">
						Role
					</li>
					<li>
						<select type="text" ng-model="newOrg.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
						</select>
					</li>
					<li>
						<button class="btn btn-success tight-form-btn" ng-click="addOrgUser()">Add</button>
					</li>
					<div class="clearfix"></div>
				</ul>
			</div>
		</form>

		<table class="grafana-options-table form-inline">
			<tr>
				<th>Name</th>
				<th>Role</th>
				<th></th>
			</tr>
			<tr ng-repeat="org in orgs">
				<td>
					{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span>
				</td>
				<td>
					<select type="text" ng-model="org.role" class="input-small" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(org)">
					</select>
				</td>
				<td style="width: 1%">
					<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-mini">
						<i class="fa fa-remove"></i>
					</a>
				</td>
			</tr>
		</table>

	</div>
</div>
