{% include "site/header.html" %}
{% include "site/view_header.html" with errors=errors %}
{% load i18n %}

<div class="view_info">
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-3 col-xs-12"></div>
    {% if not token or not target %}
    <div class="col-md-4 col-sm-6 col-xs-12 panel editable always"
         data-edit-target="/reset-password"
         data-edit-enter-action="submit"
         id="reset-password-initiate">
      <div id="success" class="editable popin" style="display:none;">
        {% trans "We've sent instructions to your email address, provided it is in our system. You have 30 minutes to complete the process." %}
      </div>
      <input type="text"
             class="editable string form-control marg-bot-15"
             placeholder="{% trans "Email" %}"
             data-edit-name="email"
             data-edit-type="email"
             data-edit-required="yes" />

      <a class="btn btn-default" data-edit-action="submit">{% trans "Reset Password" %}</a>
    </div>
    {% elif  token_valid %}
    <div class="col-md-4 col-sm-6 col-xs-12 panel editable always"
         data-edit-target="/reset-password"
         data-edit-enter-action="submit"
         id="reset-password-complete">

      <div id="success" class="editable popin" style="display:none;">
        {% trans "The password for your account" %} <b>{{ username }}</b> {% trans "has been reset, proceed to the" %} <a href="/login">{% trans "login page" %}</a>.
      </div>

        <div class="editable payload">
          <div data-edit-name="token">{{ token }}</div>
          <div data-edit-name="target">{{ target }}</div>
        </div>
        <input type="password"
               class="editable string form-control"
               placeholder="{% trans "Password" %}"
               data-edit-name="password"
               data-edit-type="password"
               data-edit-required="yes" />

        <input type="password"
               class="editable string form-control marg-bot-15"
               placeholder="{% trans "Verify Password" %}"
               data-edit-name="password_v"
               data-edit-type="password"
               data-eidt-confirm-with="password"
               data-edit-required="yes" />

        <a class="btn btn-default" data-edit-action="submit">{% trans "Reset Password" %}</a>
    </div>
    {% else %}
      <div class="col-md-4 col-sm-6 col-xs-12 panel">
        <div class="editable popin error">
        {% if pr.is_valid %}
        {% trans "The security token you provided is invalid, please" %} <a href="/reset-password">{% trans "try again" %}.</a>
        {% else %}
        {% trans "The password reset process has expired, please" %} <a href="/reset-password">{% trans "initiate again" %}</a>
        {% endif %}
        </div>
      </div>
    {% endif %}
    <div class="col-md-4 col-sm-3 col-xs-12"></div>
  </div>
</div>
</div>

<script language="javascript" type="text/javascript">
$('#reset-password-initiate').each(function(idx) {
  form = $(this)
  $(this).on("action-success:submit", function(ev, data) {
    form.find("#success").show();
  })
});
$('#reset-password-complete').each(function(idx) {
  form = $(this)
  $(this).on("action-success:submit", function(ev, data) {
    form.find("#success").show();
    form.find('[data-edit-type],[data-edit-action]').hide();
  })
});

</script>

{% include "site/footer.html" %}