<div class="container-shadow">

{{#if isStageOne}}

<form id="forgotPassword" action="" class="form" method="post" onsubmit="return false">

<h1>{{t "templates.user.UserRegistrationTemplate.registerYourAccount"}}</h1>

<div id="step1">

<fieldset>

<div class="group-field-row group-field-short">

<label class="light" for="email" >{{t "common.user.emailAddress"}}</label>

<input type="email" id="email" name="email" value="" required autofocus data-validator="required" data-validator-event="keyup change"/>

<span class="error">x</span>

</div>

<div class="group-actions-block float-right">

<input type="submit" id="continue" value="{{t 'common.form.submit'}}" disabled="true" class="button" />

<input type="button" value="{{t "common.form.cancel"}}" class="button cancelButton"/>

</div>

</fieldset>

</div>

<div id="emailSent" style="display:none">

<p>{{t "templates.user.UserRegistrationTemplate.emailSent"}}</p>

</div>

</form>

{{else}}

<form id="registration" action="" class="form" method="post" onsubmit="return false" autocomplete="off">

<h1>{{t "templates.user.UserRegistrationTemplate.registerYourAccount"}}</h1>

<fieldset id="step2">

{{#if urlParams.email}}

<div class="group-field-row">

<label for="email">{{t "common.user.emailAddress"}}</label>

<input type="email" id="email" name="email" value="{{urlParams.email}}" readonly />

<span class="ok">✔</span>

</div>

{{/if}}

<div class="group-field-row">

<label for="username">{{t "common.user.username"}}</label>

<input type="text" id="username" name="username" value="" autofocus data-validator="required" required data-validator-event="keyup change"/>

<span class="error">x</span>

</div>

<div class="group-field-row">

<label for="givenName">{{t "common.user.givenName"}}</label>

<input type="text" id="givenName" name="givenName" value="" />

</div>

<div class="group-field-row">

<label for="sn">{{t "common.user.familyName"}}</label>

<input type="text" id="sn" name="sn" value="" data-validator="required" required data-validator-event="keyup change"/>

<span class="error">x</span>

</div>

<div class="group-field-row">

<label for="telephoneNumber">{{t "common.user.phoneNumber"}}</label>

<input type="tel" id="telephoneNumber" name="telephoneNumber" value="" />

</div>

<div class="group-field-row">

<label for="password">{{t "common.user.password"}}</label>

<div class="group-input-span">

<input type="password" id="password" name="password" value="" data-validator="minLength" required data-validation-dependents="passwordConfirm" minLength="8" pattern=".{8,}" data-validator-event="keyup change" data-validation-status="error" />

<div class="field-rule">

<span class="error">x</span>

<span data-for-validator="minLength">{{t "common.form.validation.atLeast8Characters"}}</span>

</div>

</div>

</div>

<div class="group-field-row">

<label for="passwordConfirm">{{t "common.user.confirmPassword"}}</label>

<div class="group-input-span">

<input type="password" id="passwordConfirm" name="passwordConfirm" value="" data-validator="passwordConfirm" data-validator-event="keyup change" required />

<div class="field-rule">

<span class="error">x</span>

<span data-for-validator="passwordConfirm">{{t "common.form.validation.confirmationMatchesPassword"}}</span>

</div>

</div>

</div>

<div class="group-actions-block float-right">

<input type="submit" id="registerButton" value="{{t "common.form.submit"}}" class="button" disabled="true" />

<input type="button" id="cancel" value="{{t "common.form.cancel"}}" class="button cancelButton"/>

</div>

</fieldset>

<div id="registerSuccess" style="display:none">

<p>{{t "config.messages.UserMessages.afterRegistration"}} <a href="#" class="cancelButton">{{t "templates.user.ForgottenPasswordTemplate.proceedToLogin"}}</a></p>

</div>

</form>

{{/if}}

</div>