
<style type="text/css">
#content div.label{
	width:10em;
	float:left;
	padding:0;
	margin:0;
	color:#555;
}

#content div.user{
	border:1px solid gray;
	border-radius:1em;
	margin:1em;
	width:30em;
	float:left;
}

#content div.editor div.right{
	float:right;
	padding:0;
	margin:0;
}

#content div.editor div.buttons{
	text-align:center;
	padding:0;
}

#content div.editor div.buttons button,
#content div.editor div.buttons input{
	margin-left:1em;
}

</style>

<script type="text/javascript">
	function edit_user(name){
		if ($('#edit_'+name).css('display')=='none'){
			$('#view_'+name).hide();
			$('#edit_'+name).show();
		}else{
			cancel_edit_user(name);
		}
		return false;
	}
	function add_user(){
		$('.editor').hide();
		$('#edit_new').show();
		return false;
	}
	function cancel_edit_user(name){
		$('#edit_'+name).hide();
		$('#view_'+name).show();
		return false;
	}
</script>
<h2>users</h2>
<TMPL_LOOP users>
<div class="user">
	<div id="header">
		<div style="float:left;font-weight:bold;"><TMPL_VAR name></div>
		<button onclick="edit_user('<TMPL_VAR id>')">edit</button>
	</div>
	<div id="view_<TMPL_VAR id>" class="view">
		<div class="label">name</div> 		<div><TMPL_VAR name> &nbsp;</div>
		<div class="label">full name</div> 	<div><TMPL_VAR full_name> &nbsp;</div>
		<div class="label">password</div> 	<div><TMPL_VAR password> &nbsp;</div>
		<div class="label">email</div> 		<div><TMPL_VAR email> &nbsp;</div>
		<div class="label">roles</div> 		<div><TMPL_LOOP roles><TMPL_VAR name> </TMPL_LOOP> &nbsp;</div>
	</div>
	<div id="edit_<TMPL_VAR id>" class="editor"  style="display:none">
		<form method="post">
		<div class="label">name</div> 		<div><input name="name" value="<TMPL_VAR name>"></div>
		<div class="label">full name</div> 	<div><input name="full_name" value="<TMPL_VAR full_name>"></div>
		<div class="label">password</div> 	<div><input type="password" name="password"></div>
		<div class="label">password</div> 	<div><input type="password" name="password2"></div>
		<div class="label">email</div> 		<div><input name="email" value="<TMPL_VAR email>"></div>
		<div class="buttons">
			<button onclick="cancel_edit_user('<TMPL_VAR id>');return false;">cancel</button>
			<input type=submit name="action" value="save">
			<div class="right"><input type=submit name="action" value="delete"></div>
			<input type="hidden" name="id" value="<TMPL_VAR id>">	
		</div>
		</form>
	</div>
</div>
</TMPL_LOOP>

<div style="clear:both" class="newuser">
	<button onclick="add_user('<TMPL_VAR name>')">add user</button>
	<div id="edit_new" class="user editor" style="display:none">
		<form method="post">
		<div class="label">name</div> 		<div><input name="name" value="<TMPL_VAR name>"></div>
		<div class="label">full name</div> 	<div><input name="full_name" value="<TMPL_VAR full_name>"></div>
		<div class="label">password</div> 	<div><input type="password" name="password"></div>
		<div class="label">password</div> 	<div><input type="password" name="password2"></div>
		<div class="label">email</div> 		<div><input name="email" value="<TMPL_VAR email>"></div>
		<div class="buttons">
			<button onclick="cancel_edit_user('new');return false;">cancel</button>
			<input type=submit name="action" value="save">
		</div>
		</form>
	</div>
</div>

</body>
</html>
