{% extends "base.html" %}

{% load i18n %}
{% load account_tags %}

{% block title %}{% trans "Password reset" %}{% endblock %}

{% user_display request.user as user_display %}


{% block pagecss %}
<style>
label {
  display: block;
  margin-top: 15px;
  color: #333;
  font-size: 1rem;
}

.br {
  margin-top: 15px;
}

input:not([type]), input[type="text"] {
  max-width: 100%;
  width: 100%;
  border: 0 none;
  padding: 0 10px;
  padding-right: 10px;
  padding-left: 10px;
  background: #fff;
  color: #666;
  border: 1px solid #e5e5e5;
}
</style>
{% endblock %}

{% block content %}
<div class="uk-flex uk-flex-center uk-margin-top">

  <div class="uk-card uk-card-default uk-card-body">
    <form method="POST" action="">
      <legend class="uk-legend">{% trans "Password reset" %}</legend>
      <p class="lead">{% trans "Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it." %}</p>
      {% csrf_token %}
      {{ form }}
      <div class="br">
        <button type="submit" class="uk-button uk-button-primary">
          {% trans "Reset my password" %}
        </button>
      </div>
    </form>

    <p>{% blocktrans %}If you have any trouble resetting your password, contact us at <a href="mailto:support@procatalog.io">support@procatalog.io</a>{% endblocktrans %}</p>
  </div>
</div>
{% endblock %}

{% block extra_body %}
    <script>
        $("#id_email").focus();
    </script>
{% endblock %}