<div class="row registration" id="userRegistration">

<div class="col-sm-6 col-sm-offset-3">

<form class="form-horizontal" role="form">

<div class="form-group form-group-large has-feedback">

<input placeholder='{{t "common.user.username"}}' class="form-control input-lg" type="text" id="userName" name="userName" value="" data-validation-dependents="password" required autofocus/>

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

<span class="error form-control-feedback"><i class='fa validation-icon'></i></span>

</div>

<div class="form-group form-group-large has-feedback">

<input placeholder='{{t "common.user.emailAddress"}}' class="form-control input-lg" type="email" id="mail" name="mail" value="" required />

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

<span class="error form-control-feedback"><i class='fa validation-icon'></i></span>

</div>

<div class="form-group form-group-large has-feedback">

<input placeholder='{{t "common.user.givenName"}}' class="form-control input-lg" type="text" id="givenName" name="givenName" value="" data-validation-dependents="password" required />

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

<span class="error form-control-feedback"><i class='fa validation-icon'></i></span>

</div>

<div class="form-group form-group-large has-feedback">

<input placeholder='{{t "common.user.familyName"}}' class="form-control input-lg" type="text" id="sn" name="sn" value="" data-validation-dependents="password" required />

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

<span class="error form-control-feedback"><i class='fa validation-icon'></i></span>

</div>

<div class="form-group form-group-large has-feedback">

<input placeholder='{{t "common.user.phoneNumber"}}' class="form-control input-lg" type="tel" id="telephoneNumber" name="telephoneNumber" value="" required />

</div>

<hr>

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

<input style="display:none;" />

<div class="form-group form-group-large has-feedback">

<input placeholder='{{t "common.user.password"}}' class="form-control input-lg" type="password" name="password" value="" data-validation-dependents="passwordConfirm" required/>

<span class="error form-control-feedback"><i class='fa validation-icon'></i></span>

</div>

<div class="form-group form-group-large has-feedback">

<input placeholder='{{t "common.user.confirmPassword"}}' class="form-control input-lg" type="password" name="passwordConfirm" value="" data-validator="passwordConfirm"

data-validator-event="keyup change" required/>

<span class="error form-control-feedback"><i class='fa validation-icon'></i></span>

</div>

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

<div class="field-rule">

<span class="error"><i class="fa validation-icon"></i></span><span data-for-validator="passwordConfirm">{{t "common.form.validation.confirmationMatchesPassword"}}</span>

</div>

</div>

{{#securityQuestions}}

<div class="form-group form-group-large has-feedback">

<p>{{t "templates.user.ChangeSecurityDataDialogTemplate.securityQuestionAndAnserExplanation"}}</p>

<select class="form-control input-lg" id="securityQuestion" name="securityQuestion"></select>

</div>

<div class="form-group form-group-large has-feedback">

<input placeholder='{{t "common.user.securityAnswer"}}' class="form-control input-lg" type="tel" id="securityAnswer" name="securityAnswer" value="" required />

<span class="error form-control-feedback"><i class='fa validation-icon'></i></span>

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

</div>

{{/securityQuestions}}

{{#siteIdentification}}

<fieldset class="fieldset">

<p>{{t "templates.user.ChangeSiteIdentificationDialogTemplate.siteImageAndPhaseExplanation"}}</p>

<div id="passPhrasePictures" class="site-image-select" style="padding-bottom:20px;">

<div class="btn-group" data-toggle="buttons">

{{siteImages siteImages}}

</div>

</div>

<div class="form-group form-group-large has-feedback">

<input placeholder='{{t "common.user.sitePhrase"}}' class="form-control input-lg" type="tel" id="passPhrase" name="passPhrase" value="" required />

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

<span class="error form-control-feedback"><i class='fa validation-icon'></i></span>

</div>

</fieldset>

{{/siteIdentification}}

<hr>

<div class="remember-forgot">

<div class="checkbox pull-left">

<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">{{t

"templates.user.TermsOfUseTemplate.termsOfUse"}}</a>

</div>

</div>

<input type="submit" name="register" class="btn btn-lg btn-primary btn-block btn-uppercase" value="{{t "common.form.register"}}"

disabled/>

</form>

<div class="toggle-login-register">

Already have an account? <a href="#login/">Login</a>

</div>

</div>

</div>