<%- include('top') %>
<script id="profileTemplate" type="text/html">
	<h2><i>User Name:</i> <b>{{uid}}</b></h2>
	<i>Name:</i> <b>{{givenName}} {{sn}}</b><br />
	<i>Email:</i> <b>{{mail}} </b><br />
	<i>Joined:</i> <b>{{createTimestamp}} </b>, <i>Edited:</i> <b>{{modifyTimestamp}} </b><br />
	<i>Phone:</i> <b>{{mobile}} </b><br />
	<i>LDAP DN:</i> <b>{{dn}} </b><br />
	<i>Home Directory:</i> <b>{{homeDirectory}} </b><br />
	<i>Login Shell:</i> <b>{{loginShell}} </b><br />
	<i>SSH Public Key:</i> <b>{{sshPublicKey}}</b><br />
	<i>Unix User ID:</i> <b>{{uidNumber}} </b><br />
	<i>Unix Group ID:</i> <b>{{gidNumber}} </b><br />
	<i>Description:</i><br>
	<p>
		{{description}}
	</p>
	<img id="profile_photo" >
</script>

<script id="groupRowTemplate" type="text/html">
	<tr>
		<td>{{cn}}</td>
		<td>{{description}}</td>
	</tr>
</script>

<script id="userEditTemplate" type="text/html">
	<h3>Editing {{uid}}</h3>
	<form action="user/{{uid}}" method="put" onsubmit="formAJAX(this)" evalAJAX="editUserSeccess()">
		<div class="form-group">
			<label class="control-label">SSH Public Key</label>
			<input type="text" class="form-control" name="sshPublicKey" placeholder="ssh-rsa AAAAB3NzaC1yc2EAAAADAQ..." value="{{sshPublicKey}}" />
		</div>

		<div class="form-group">
			<label class="control-label">Mobile Phone</label>
			<input type="text" class="form-control" name="mobile" placeholder="9175551234" validate=":9" value="{{mobile}}" />
		</div>
		<div class="form-group">
			<label class="control-label">User Description (Optional)</label>
			<textarea class="form-control" name="description" placeholder="Admin group for gitea app">{{description}}</textarea>
		</div>
		<button type="submit" class="btn btn-outline-dark btn-warning">Change</button>

	</form>
</script>

<script id="paswordResetTemplate" type="text/html">
	<h3>
		Reset Password for {{uid}}
	</h3>
	<form action="user/{{uid}}/password" method="put" onsubmit="formAJAX(this)" class="form-group">
		<div class="form-group">
			<label class="control-label">Password</label>
			<div class="input-group mb-3 shadow">
				<div class="input-group-prepend">
					<span class="input-group-text" ><i class="fad fa-key"></i></span>
				</div>
				<input type="password" name="userPassword" class="form-control" placeholder="hunter123!" validate=":3" />
			</div>
		</div>
		<div class="form-group">
			<label class="control-label">Again</label>
			<div class="input-group mb-3 shadow">
				<div class="input-group-prepend">
					<span class="input-group-text" ><i class="fad fa-key"></i></span>
				</div>
				<input type="password" name="password" class="form-control" placeholder="hunter123!" validate="eq:userPassword" />
			</div>
		</div>
		<button type="submit" class="btn btn-outline-secondary shadow">Change</button>
	</form>

</script>
<script type="text/javascript">
	var currentUser;

	function getInvite(){
		app.user.createInvite(function(error, data){
			$('#invite_token').html(location.origin+"/login/invite/"+data.token);
		});
	}

	function renderProfile(user){
		var profileTemplate = $('#profileTemplate').html();
		var paswordResetTemplate = $('#paswordResetTemplate').html(); 
		var $target = $('#userProfile div.card-body');

		// data.photo = unescape(encodeURIComponent(data.jpegPhoto));
		user.createTimestamp = moment(user.createTimestamp, "YYYYMMDDHHmmssZ").fromNow();
		user.modifyTimestamp = moment(user.modifyTimestamp, "YYYYMMDDHHmmssZ").fromNow();

		$target.html(Mustache.render(profileTemplate, user));

		$('#passwordReset').html(Mustache.render(paswordResetTemplate, user))
	};

	function renderUserGroups(user){
		app.api.get('group/?detail=true&member='+user.uid, function(error, data){
			var groupRowTemplate = $('#groupRowTemplate').html();
			var $target = $('#mygroups');

			$target.html('')
			if(error){
				app.utils.actionMessage(data.message, $target, 'danger');
			}else{
				for(var group of data.results){
					$target.append(Mustache.render(groupRowTemplate, group));
				}
			}
		});
	}

	function determinUser(callback){
		if(location.pathname.includes('/users/')){
			var uid = location.pathname.replace('/users/', '');

			app.api.get('user/'+uid, function(err, res){
				callback(res.results)
			})
		}else{
			callback(app.auth.user)
		}
	}

	function editUser(){
		determinUser(function(user){
			var $profileCard = $('#userProfile');
			var $editCard = $('#editProfile');
			var userEditTemplate = $('#userEditTemplate').html()

			$editCard.find('.card-body').html(Mustache.render(userEditTemplate, user))

			$profileCard.slideUp();
			$editCard.slideDown();
		});
	}

	function editUserSeccess(){
		console.log('edit done')
		$('#editProfile').slideUp();
		determinUser(function(user){
			currentUser = user;
			app.auth.user = user;
			renderProfile(user);
			renderUserGroups(user);
			$('#userProfile').slideDown();
		});
	}


	$(document).ready(function(){

		determinUser(function(user){
			currentUser = user;
			renderProfile(user);
			renderUserGroups(user);
			$('#username').text(user.uid);
		});

	});
</script>
<style type="text/css">
	.services-list i{
		padding-right: .5em;
	}
</style>
<div class="row" style="display:none">
	<div class="col-md-4">
		<div class="shadow-lg card mb-3 card-default">
			<div class="card-header shadow">
				<i class="fas fa-user-plus"></i>
				Invite User
				<div class="float-right">
					<i class="far fa-arrows-v"></i>
				</div>
			</div>
			<div class="card-header shadow actionMessage" style="display:none">
			</div>
			<div class="card-body">

				<button onclick="getInvite(this)" class="btn btn-outline-dark shadow">New Invite Token</button>
				<div>
					<b id="invite_token"></b>
				</div>

			</div>
		</div>
		<div class="shadow-lg card mb-3 card-default">
			<div class="card-header shadow">
					<div class="float-right">
						<i class="far fa-arrows-v"></i>
					</div>
					<i class="fad fa-th-list"></i>
					Services
			</div>
			<div class="card-header shadow actionMessage" style="display:none">
			</div>
			<div class="card-body">
				<ul class="list-group text-dark services-list">
					<li class="list-group-item text-dark">
							<i class="fad fa-terminal"></i>
							SSH <b id="username"></b>@718it.biz:22
					</li>
					<a href="https://emby.718it.biz/" target="_blank" class="text-dark">
						<li class="list-group-item text-dark">
								<i class="fad fa-film"></i>
								Emby
						</li>
					</a>
					<a href="https://git.theta42.com" target="_blank" class="text-dark">
						<li class="list-group-item text-dark">
								<i class="fab fa-git"></i>
								Git server
						</li>
					</a>
					<a href="https://rdp.vm42.us" target="_blank" class="text-dark">
						<li class="list-group-item text-dark">
								<i class="fad fa-desktop"></i>
								Virtual Desk Top
						</li>
					</a>
					<a href="https://pve.admin.vm42.us" target="_blank" class="text-dark">
						<li class="list-group-item text-dark">
								<i class="fad fa-server"></i>
								Promox (contact wmanlty for access)
						</li>
					</a>
				</ul>
			</div>
		</div>
		<div class="shadow-lg card">
			<div class="card-header shadow">
				<i class="fad fa-undo-alt"></i>
				Password Reset
				<div class="float-right">
					<i class="far fa-arrows-v"></i>
				</div>
			</div>
			<div class="card-header shadow actionMessage" style="display:none">
			</div>
			<div id="passwordReset" class="card-body">

			</div>
		</div>
	</div>
	<div class="col-md-8">
		<div id="userProfile" class="shadow-lg card card-default mb-8">
			<div class="card-header shadow">
				<i class="fad fa-id-card"></i>
				Profile
				<div class="float-right">
					<i class="far fa-arrows-v"></i>
				</div>
			</div>
			<div class="card-header shadow actionMessage" style="display:none">
			</div>
			<div class="card-body">
				<!-- User profile inserted by JS -->
			</div>
			<div class="card-footer">
				<button type="button" onclick="editUser()" class="btn btn-warning btn-lg shadow ">
					<i class="fad fa-user-edit"></i>
				</button>
				<button type="button" onclick="app.user.remove({uid: currentUser.uid}, function(){app.util.actionMessage('username {{uid}} delete.', $(this), 'danger')})" class="shadow btn btn-danger btn-lg float-right">
					<i class="fad fa-user-slash"></i>
				</button>
			</div>
		</div>

		<div id="editProfile" class="shadow-lg card card-default mb-8" style="display:none">
			<div class="card-header shadow">
				<i class="fad fa-id-card"></i>
				Edit Profile
				<div class="float-right">
					<i class="far fa-arrows-v"></i>
				</div>
			</div>
			<div class="card-header shadow actionMessage" style="display:none">
			</div>
			<div class="card-body">
				<div id="tableAJAX">

				</div>
			</div>
		</div>

		<br />
		<div class="shadow-lg card card-default mb-8">
			<div class="card-header shadow">
				<i class="fad fa-id-card"></i>
				My groups
				<div class="float-right">
					<i class="far fa-arrows-v"></i>
				</div>
			</div>
			<div class="card-header shadow actionMessage" style="display:none">
			</div>
			<div class="card-body" style="padding-bottom:0">
				<div class="table-responsive">
					<table class="table">
						<thead>
							<th>
								Name
							</th>
							<th>
								Description
							</th>
						</thead>
						<tbody id="mygroups">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<br />
	</div>
</div>
<%- include('bottom') %>
