<div class="content container-shadow">

<div class="column-layout">

<div class="float-left">

<h2 class="float-left">{{t "templates.user.UserRegistrationTemplate.registerYourAccount"}}</h2>

</div>

<div class="float-right" style="padding-top: 10px;">

{{t "templates.user.UserRegistrationTemplate.haveAccoutQuestion"}} <a href="{{url 'login'}}" class="active bold">{{t "templates.user.UserRegistrationTemplate.logIn"}}</a>

</div>

</div>

<form action="" method="post" class="form large center">

<fieldset>

<div class="fields">

<div class="field">

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

<input type="text" name="userName" data-validation-dependents="password"/>

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

<div class="validation-message"></div>

</div>

<div class="field">

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

<input type="text" name="email" />

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

<div class="validation-message"></div>

</div>

<div class="field">

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

<input type="text" name="givenName" data-validation-dependents="password"/>

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

<div class="validation-message"></div>

</div>

<div class="field">

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

<input type="text" name="familyName" data-validation-dependents="password"/>

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

<div class="validation-message"></div>

</div>

<div class="field">

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

<input type="text" name="phoneNumber" />

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

<div class="validation-message"></div>

</div>

<div class="group-field">

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

<div class="field">

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

<input type="password" name="password" value="" data-validation-dependents="passwordConfirm"/>

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

</div>

<div class="field">

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

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

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

</div>

</div>

<div class="group-field-errors validationRules" data-for-validator="password passwordConfirm">

<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="clear"></div>

{{#securityQuestions}}

<p style="width: 400px; margin-left: 220px; margin-bottom: 10px;">{{t "templates.user.ChangeSecurityDataDialogTemplate.securityQuestionAndAnserExplanation"}}

</p>

<div class="field">

<label>{{t "common.user.securityQuestion"}}</label>

<select name="securityQuestion"></select>

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

<div class="validation-message"></div>

</div>

<div class="field">

<label>{{t "common.user.securityAnswer"}}</label>

<input type="text" name="securityAnswer" />

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

<div class="validation-message"></div>

</div>

{{/securityQuestions}}

{{#siteIdentification}}

<p style="width: 400px; margin-left: 220px; margin-bottom: 10px;">{{t "templates.user.ChangeSiteIdentificationDialogTemplate.siteImageAndPhaseExplanation"}}</p>

<div class="ContentFlow" id="siteImageFlow">

<div class="loadIndicator"><div class="indicator"></div></div>

<div class="flow">

{{siteImages siteImages}}

</div>

<div class="scrollbar"><div class="slider"></div></div>

</div>

<div class="field">

<label>{{t "common.user.sitePhrase"}}</label>

<input type="text" name="passPhrase" />

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

<div class="validation-message"></div>

</div>

{{/siteIdentification}}

<div class="field field-checkbox">

<label>

<input type="checkbox" name="terms" value="yes" data-validator="termsOfUse" data-validator-event="click" data-validation-status="error"/>

{{t "templates.user.UserRegistrationTemplate.agreeToTerms" '<a href="#register/terms_of_use/" id="termOfUseLink" class="ice" title="terms">' '</a>'}}

<div class="validation-message validation-message-checkbox"></div>

</label>

</div>

<div class="field field-submit">

<input type="submit" name="register" class="button" value="{{t "common.form.register"}}" />

<div class="input-validation-message">{{t "common.form.validation.formContainsErrors"}}</div>

</div>

</div>

</fieldset>

</form>

</div>