{if isset($hideable)}
	<script type="text/javascript">
		{literal}
		function toggle_heading() {
			Element.toggle('form');
			
			var visible = ($('form').style.display != 'none');
			var src = visible ? 'res/img/heading_open.gif' : 'res/img/heading_closed.gif';
			
			$('heading_img').src = src;
		}
		{/literal}
	</script>
	
	<h1 id="heading" onclick="toggle_heading()" style="cursor: pointer"><img src="res/img/heading_closed.gif" id="heading_img" /> Sign on</h1>

	<div id="form" style="display: none">
{else}
	<h1 id="heading">{png src='res/img/user_edit.png' align='texttop'} Sign on</h1>
{/if}

<form action="{$self}" method="post"> <!-- onsubmit="return $('useragreement').checked;" //-->
{* cancel werkt via javascript-redirect dus het name-attribuut van de submit-knop staat op disabled *}
<input type="hidden" id="default" name="submit_save" value="1" />

<table>
	<tr>
		<th>Username:<sup>*</sup></th>
		<td><input type="text" name="record[username]" value="{$record.username|escape}" class="input_text activate" />{if $errors.username}<br><font color=red>Enter a username or username already exists</font>{/if}</td>
		<td>{if $errors.username}{png src="res/img/exclamation.png" title="enter a username"}{/if}</td>
	</tr>
	<tr>
		<th>Password:<sup>*</sup></th>
		<td><input type="password" name="record[password]"  class="input_text"/></td>
		<td>{if $errors.password}{png src="res/img/exclamation.png" title="enter a valid password"}{/if}</td>
	</tr>
	<tr>
		<th>Repeat password:<sup>*</sup></th>
		<td><input type="password" name="repeat_password"  class="input_text"/></td>
		<td>{if $errors.repeat_password}{png src="res/img/exclamation.png" title="repeat your password"}{/if}</td>
	</tr>
	<tr>
		<th>First name:</th>
		<td><input type="text" name="record[firstname]" value="{$record.firstname|escape}"  class="input_text"/></td>
		<td>{if $errors.firstname}{png src="res/img/exclamation.png" title="enter a first name"}Enter a first name{/if}</td>
	</tr>
	<tr>
		<th>Last name:</th>
		<td>
			<style type="text/css">#infix {ldelim}width: 74px{rdelim} #lastname {ldelim}width: 199px{rdelim}</style>

			<!--[if IE]>
				<style type="text/css">#infix {ldelim}width: 73px{rdelim} #lastname {ldelim}width: 198px{rdelim}</style>
			<![endif]-->

			<input type="text" name="record[infix]" value="{$record.infix|escape}" class="input_text" id="infix" style="margin-right: 25px" />
			<input type="text" name="record[lastname]" value="{$record.lastname|escape}" class="input_text" id="lastname" style="margin-left: -3pt" />
		</td>
		<td>{if $errors.lastname}{png src="res/img/exclamation.png" title="enter a last name"}Enter a last name{/if}</td>
	</tr>
	<tr>
		<th>E-mail:<sup>*</sup></th>
		<td><input type="text" name="record[email]" value="{$record.email|escape}" class="input_text" /></td>
		<td>{if $errors.email}{png src="res/img/exclamation.png" title="enter a valid e-mail adress"}{/if}</td>
	</tr>
	<tr>
		<th>&nbsp;</th>
		<td>
			<input type="checkbox" id="teacher" name="record[userlevel]" value="docent" {if $record.userlevel == 'teacher'}checked="checked" {/if}/>
			<label for="teacher">I am a teacher</label>
		</td>
		<td></td>
	</tr>
	<tr>
		<th>&nbsp;</th>
		<td>
			<input type="checkbox" id="useragreement" name="record[useragreement]" value="useragreement" />
			<label for="useragreement">I understand and agree to the <a href="javascript:Dialog.open('index.php?m=user_agreement');">user agreement</a><sup>*</sup></label>
		</td>
		<td>{if $errors.useragreement}{png src="res/img/exclamation.png" title="You must agree to the user agreement"}{/if}</td>
	</tr>
	<tr>
		<td colspan="2" align="right">
			<input type="submit" name="submit_save" value="Ok" class="input_button"/>
			<input type="button" name="submit_cancel" value="Cancel" onclick="history.go(-1)" class="input_button" />
		</td>
		<td></td>
	</tr>
</table>
<sup>*</sup>Required 
</form>

{if isset($hideable)}
	</div>
{/if}