<mef:set title="Depot: {category.CategoryDescription}" container="two-col" />

<script type="text/javascript">
<![CDATA[
	function toggleOptions(btnOptions)
	{
		var divOptions = document.getElementById("options");
		if (divOptions.style.display == "none")
		{
			divOptions.style.display = "";
			btnOptions.value = "« Hide Options";
		}
		else 
		{
			divOptions.style.display = "none";
			btnOptions.value = "Show Options »";
		}
	}
]]>
</script>

<style type="text/css">
<![CDATA[
	dt {
		clear: left;
		float: left;
	}
	
	dd {
		margin-left: 150px;
		margin-bottom: 4px;
	}
	
	dd select {
		width: 200px;
	}
]]>
</style>

<div style="margin: 4px;">
	<mef:depot_cattrail id="{category.pkDepotCategory}" />
</div>

<mef:tabs array="{tabs}" />

<div style="float: right; margin-right: 5px; border: solid #999 1px;">
<acc:banner_ad width="160" height="600" />
</div>

<div style="padding-right: 170px;">

<div style="position: relative; background-color: #676767; color: white; padding: 2px;">
	<form method="get">
	<div style="text-align: right">
	<input style="position: absolute; left: 4px;" type="button" value="Show Options »" onclick="toggleOptions(this)" />
	Order By:
	<select name="o" onchange="this.parentNode.parentNode.submit()">
		<option mef:attributes="selected if o = 'Title'">Title</option>
		<option mef:attributes="selected if o = 'Rating'">Rating</option>
		<option mef:attributes="selected if o = 'Last Updated'">Last Updated</option>
	</select>
	</div>
	<div id="options" style="background-color: white; color: #000; border-top: #676767 solid 2px; padding: 0 0.5em 0.5em 0.5em; display: none;">
		<p>
			Adjust the listing to only display games that meet all of the selected critera. If you want your changes
			to be remembered for this session, check the box. Note that this will not affect the Showcase page.
		</p>
		<dl>
			<dt>Number of Players:</dt>
			<dd>
				<select name="players">
					<option></option>
					<option mef:attributes="selected if players = 'One'">One</option>
					<option mef:attributes="selected if players = 'Multiple'">Multiple</option>
				</select>
			</dd>
			<dt>Online Play:</dt>
			<dd>
				<select name="online">
					<option></option>
					<option mef:attributes="selected if online = 'No'">No</option>
					<option mef:attributes="selected if online = 'Yes'">Yes</option>
				</select>
			</dd>
			<dt>Source Code:</dt>
			<dd>
				<select name="source">
					<option></option>
					<option mef:attributes="selected if source = 'No'">No</option>
					<option mef:attributes="selected if source = 'Yes'">Yes</option>
					<option mef:attributes="selected if source = 'Upon Request'">Upon Request</option>
				</select>
			</dd>
			<dt>Operating System:</dt>
			<dd>
				<select name="os">
					<option></option>
					<option mef:attributes="selected if os = 'Windows'">Windows</option>
					<option mef:attributes="selected if os = 'Linux'">Linux</option>
					<option mef:attributes="selected if os = 'OS X'">OS X</option>
					<option mef:attributes="selected if os = 'DOS'">DOS</option>
				</select>
			</dd>
		</dl>
		<input id="remember" type="checkbox" name="remember" value="1" /><label for="remember">Remember Settings</label><br /><br />
		<center><input type="submit" style="font-weight: bold;" value="Apply Filter" /></center>
	</div>
	</form>
</div>

<table cellspacing="0" border="0" cellpadding="2" class="sort-table" width="100%">
	<thead>
		<tr>
			<td width="36"> </td>
			<td>Title</td>
			<td>Developer</td>
			<td>Status</td>
			<td align="center">User Rating</td>
			<td align="center">Last Updated</td>
		</tr>
	</thead>
	<tbody>
		<tr id="project" mef:loop="projects" mef:classes="even,odd">
			<td align="center"><img src="/depot/icons/{project.Icon}" alt="*" width="32" height="32" /></td>
			<td> <a href="/depot/{project.folder_name}">{project.ProjectTitle|chop(25)}</a></td>
			<td> {project.DisplayName}</td>
			<td> {project.StatusName}</td>
			<td><div style="width: 65px; margin-left: auto; margin-right: auto;"><mef:stars count="{project['UserRating']}" /></div></td>
			<td align="center">{project.DateUpdated|localtime}</td>
		</tr>
	</tbody>
</table>
</div>