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

{% block form-title %}{% trans "Sign In" %}{% endblock %}

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

	<div class="form-group has-feedback">
		<label for="username">{% trans "Your e-mail address" %}</label>
		<div class="input-group" ng-class="hasError('username')">
			<div class="input-group-prepend"><i class="input-group-text fa fa-user"></i></div>
			<input class="form-control" name="username" ng-model="form_data.username" value="" ng-required="true" placeholder="{% trans 'Email or Username' %}" />
		</div>
		<ul ng-show="{{ form_name }}.username.$dirty && {{ form_name }}.username.$touched" class="djng-field-errors" ng-cloak>
			<li ng-show="{{ form_name }}.username.$error.required" class="invalid">{% trans "This field is required." %}</li>
		</ul>
	</div>

	<div class="form-group has-feedback">
		<label for="password">{% trans "Password" %}</label>
		<div class="input-group" ng-class="hasError('password')">
			<div class="input-group-prepend"><i class="input-group-text fa fa-unlock-alt"></i></div>
			<input type="password" class="form-control" name="password" ng-model="form_data.password" ng-required="true" placeholder="{% trans 'Password' %}" />
		</div>
	</div>
	{% if ALLOW_SHORT_SESSIONS %}
	<div class="form-group">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" name="stay_logged_in" ng-model="form_data.stay_logged_in">
			<label class="form-check-label" for="stay_logged_in">{% trans 'Stay logged in' %}</label>
		</div>
	</div>
	{% endif %}
	<div class="form-group">
		<button type="button" ng-click="{% include "./proceed-with.html" %}" ng-disabled="isDisabled()" class="btn btn-primary">
			{% trans "Login" %}&emsp;<i class="fa fa-sign-in"></i>
		</button>
	</div>
</form>
{% endblock form-content %}
