{% extends "shop/auth/anonymous-base.html" %}
{% load i18n %}

{% block form_title %}{% trans "Register Yourself" %}{% endblock %}

{% block form_content %}
{{ block.super }}
<div class="form-group has-feedback" style="margin-bottom: 20px">
	{{ register_user_form.email.label_tag }}
	<div class="input-group" ng-class="hasError('email')">
		<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
		{{ register_user_form.email }}
	</div>
	<ul ng-messages="register_user_form.email.$error" class="shop-form-error" ng-cloak>
		<li ng-show="register_user_form.email.$dirty" ng-message="email">{% trans "Please provide a valid email address" %}</li>
		<li ng-show="register_user_form.email.$pristine" ng-message="rejected"><span ng-bind="register_user_form.email.$message"></span></li>
	</ul>
</div>

<div class="form-group">
	{{ register_user_form.preset_password }}
	<span class="help-block">{{ register_user_form.preset_password.help_text }}</span>
</div>

<div ng-if="!form_data.preset_password" style="margin-top: 20px;">
	<div class="form-group has-feedback">
		{{ register_user_form.password1.label_tag }}
		<div class="input-group" ng-class="hasError('password1')">
			<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
			{{ register_user_form.password1 }}
		</div>
		<ul ng-messages="register_user_form.password1.$error" class="shop-form-error" ng-cloak>
			<li ng-message="minlength">{% trans "Password is too short" %}</li>
			<li ng-message="rejected"><span ng-bind="register_user_form.password1.$message"></span></li>
		</ul>
		<span class="help-block">{{ register_user_form.password1.help_text }}</span>
	</div>

	<div class="form-group has-feedback">
		{{ register_user_form.password2.label_tag }}
		<div class="input-group" ng-class="hasError('password2')">
			<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
			{{ register_user_form.password2 }}
		</div>
		<ul ng-messages="register_user_form.password2.$error" class="shop-form-error" ng-cloak>
			<li ng-message="minlength">{% trans "Password is too short" %}</li>
			<li ng-message="rejected"><span ng-bind="register_user_form.password2.$message"></span></li>
		</ul>
		<span class="help-block">{{ register_user_form.password2.help_text }}</span>
	</div>
</div>

<div class="form-group">
	<button type="button" ng-click="submitForm('{% url 'shop:register-user' %}', 5000)" ng-disabled="register_user_form.$invalid" class="btn btn-primary">{% trans "Register" %}</button>
</div>
{% endblock form_content %}
