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

{% block form-title %}{% trans "Register Yourself" %}{% endblock %}

{% block form-content %}
<form name="{{ form_name }}" djng-endpoint="{% url 'shop:register-user' %}" role="form" novalidate>
	{% include "./form-messages.html" %}

	<div class="form-group has-feedback">
		{{ register_user_form.email.label_tag }}
		<div class="input-group" ng-class="hasError('email')">
			<div class="input-group-prepend"><i class="input-group-text fa fa-envelope-o"></i></div>
			{{ register_user_form.email }}
		</div>
		<ul ng-show="register_user_form.email.$dirty && register_user_form.email.$touched" class="djng-field-errors" ng-cloak>
			<li ng-show="register_user_form.email.$error.required" class="invalid">{% trans "This field is required." %}</li>
			<li ng-show="register_user_form.email.$error.email" class="invalid">{% trans "Enter a valid email address." %}</li>
			<li ng-show="register_user_form.email.$valid" class="valid"></li>
		</ul>
	</div>

	<div class="form-group form-check">
		{{ register_user_form.preset_password }}
		<label class="form-check-label" for="preset_password"> {{ register_user_form.preset_password.help_text }}</label>
	</div>

	<div ng-if="!form_data.preset_password">
		<div class="form-group has-feedback">
			{{ register_user_form.password1.label_tag }}
			<div class="input-group" ng-class="hasError('password1')">
				<div class="input-group-prepend"><i class="input-group-text fa fa-key"></i></div>
				{{ register_user_form.password1 }}
			</div>
			<ul ng-show="register_user_form.password1.$dirty && register_user_form.password1.$touched" class="djng-field-errors" ng-cloak>
				<li ng-show="register_user_form.password1.$error.required" class="invalid">{% trans "This field is required." %}</li>
				<li ng-show="register_user_form.password1.$error.minlength" class="invalid">{% trans "Password is too short" %}</li>
				<li ng-show="register_user_form.password1.$valid" class="valid"></li>
			</ul>
			<small class="form-text text-muted">{{ register_user_form.password1.help_text|striptags }}</small>
		</div>

		<div class="form-group has-feedback">
			{{ register_user_form.password2.label_tag }}
			<div class="input-group" ng-class="hasError('password2')">
				<div class="input-group-prepend"><i class="input-group-text fa fa-key"></i></div>
				{{ register_user_form.password2 }}
			</div>
			<ul ng-show="register_user_form.password2.$dirty && register_user_form.password2.$touched" class="djng-field-errors" ng-cloak>
				<li ng-show="register_user_form.password2.$error.required" class="invalid">{% trans "This field is required." %}</li>
				<li ng-show="register_user_form.password2.$error.minlength" class="invalid">{% trans "Password is too short" %}</li>
				<li ng-show="register_user_form.password2.$valid" class="valid"></li>
			</ul>
			<small class="form-text text-muted">{{ register_user_form.password2.help_text|striptags }}</small>
		</div>
	</div>

	<div class="form-group">
		<button type="button" ng-click="{% include './proceed-with.html' with proceed_delay=1000 %}" ng-disabled="isDisabled()" class="btn btn-primary">
			{% trans "Register" %}&emsp;<i class="fa fa-user-plus"></i>
		</button>
	</div>
</form>
{% endblock form-content %}
