--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/packages/ssoinabox-webui/root/usr/local/share/ssoinabox/htdocs/includes/templates/groups.tpl	Tue Jan 08 23:13:29 2013 -0500
@@ -0,0 +1,123 @@
+{assign var="title" value="Groups"}
+{include file="header.tpl"}
+
+<script type="text/javascript">
+//<![CDATA[
+var users = {$users_json};
+//]]>
+</script>
+
+<script type="text/javascript" src="/res/grep.js"></script>
+<script type="text/javascript" src="/res/group-create-form.js"></script>
+
+<h1>Groups</h1>
+
+<p>This page allows you to view all the groups in the system, and create, remove, or manage membership of groups as necessary.</p>
+
+<div class="pull-right">
+	<form class="form-search form-inline" onsubmit="return false;">
+		<input class="search-query grep-filter" type="text" placeholder="Filter groups..." />
+	</form>
+</div>
+<div class="pull-left">
+	<a href="#groupCreateForm" onclick="return false;" data-toggle="modal" class="btn btn-success">
+		<i class="icon icon-white icon-plus"></i>
+		Create group
+	</a>
+</div>
+<table class="table table-bordered table-striped">
+	<thead>
+		<tr>
+			<th>UNIX name</th>
+			<th>Description</th>
+			<th>UNIX GID</th>
+			<th>Member count</th>
+			<th class="actions"><i class="icon icon-cog"></i></th>
+		</th>
+	</thead>
+	<tbody class="grep-me">
+		{foreach $groups as $this_group}
+			<tr>
+				<td class="grep-col">{$this_group['cn']|escape:'html'}</td>
+				<td class="grep-col">{$this_group['description']|escape:'html'}</td>
+				<td>{$this_group['gidNumber']}</td>
+				<td>{if isset($this_group['memberUid'])}{count($this_group['memberUid'])}{else}0{/if}</td>
+				<td class="actions">
+					<a href="#" onclick="viewGroup('{$this_group['cn']|escape:'html'}'); return false;" class="btn btn-primary btn-mini show-tooltip" title="View group members">
+						<i class="icon icon-white icon-search"></i>
+					</a>
+					<a href="/groups/delete/{$this_group['cn']|escape:'html'}" class="btn btn-danger btn-mini show-tooltip" title="Delete group">
+						<i class="icon icon-white icon-trash"></i>
+					</a>
+				</td>
+			</tr>
+		{/foreach}
+	</tbody>
+</table>
+
+<form method="post" action="/groups/create" class="form-horizontal" name="groupCreateForm">
+	<div class="modal hide fade" id="groupCreateForm">
+		<div class="modal-header">
+			<h3>Create new group</h3>
+		</div>
+		<div class="modal-body">
+		
+			<div class="control-group error">
+				<label class="control-label">UNIX name:</label>
+				<div class="controls">
+					<input type="text" name="cn" value="" placeholder="users" />
+					<p class="help-block">3-32 characters, all lowercase letters and numbers.</p>
+				</div>
+			</div>
+			
+			<div class="control-group">
+				<label class="control-label">Description:</label>
+				<div class="controls">
+					<input type="text" name="description" value="" placeholder="" />
+					<p class="help-block">A brief description of the group.</p>
+				</div>
+			</div>
+		
+			<div class="control-group">
+				<label class="control-label">UNIX group ID:</label>
+				<div class="controls">
+					<input type="text" name="gidNumber" value="{$next_gid}" readonly="readonly" />
+					<p class="help-block">Automatically determined based on available group IDs.</p>
+				</div>
+			</div>
+			
+		</div>
+		<div class="modal-footer">
+			<input type="submit" class="btn btn-primary" value="Create group" />
+			<a class="btn" data-dismiss="modal">Cancel</a>
+		</div>
+	</div>
+</form>
+
+<div class="modal hide fade" id="groupViewModal">
+	<div class="modal-header">
+		<h3>View group</h3>
+	</div>
+	<div class="modal-body">
+		<div class="pull-right">
+			<input data-provide="typeahead" id="groupMemberAdder" type="text" placeholder="Add another member..."  />
+		</div>
+		<h4>Members</h4>
+		<table class="table table-bordered table-striped">
+			<thead>
+				<tr>
+					<th>Username</th>
+					<th>Name</th>
+					<th class="actions"><i class="icon icon-cog"></i></th>
+				</tr>
+			</thead>
+			<tbody class="put-members-here">
+			</tbody>
+		</table>
+	</div>
+	<div class="modal-footer">
+		<a class="btn" data-dismiss="modal">Close</a>
+	</div>
+</div>
+
+{include file="footer.tpl"}