<%! from django.utils.translation import ugettext as _ %>

<%! from django.core.urlresolvers import reverse %>
<section id="forgot-password-modal" class="modal forgot-password-modal">
  <div class="inner-wrapper">
    <div id="password-reset">
      <header>
        <h2>${_("Password Reset")}</h2>
      </header>

      <div class="instructions">
        <p>${_("Please enter your e-mail address below, and we will e-mail instructions for setting a new password.")}</p>
      </div>

      <form id="pwd_reset_form" action="${reverse('password_reset')}" method="post" data-remote="true">
        <fieldset class="group group-form group-form-requiredinformation">
          <legend class="is-hidden">${_("Required Information")}</legend>

          <ol class="list-input">
            <li class="field required text" id="field-email">
              <label for="pwd_reset_email">${_("Your E-mail Address")}</label>
              <input class="" id="pwd_reset_email" type="email" name="email" value="" placeholder="example: username@domain.com" />
              <span class="tip tip-input">${_("This is the email address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
            </li>
          </ol>
        </fieldset>

        <div class="form-actions">
          <button name="submit" type="submit" id="pwd_reset_button" class="action action-primary action-update">${_("Reset My Password")}</button>
        </div>
      </form>
    </div>

    <a href="#" class="close-modal" title="Close Modal">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </a>
  </div>
</section>

<script type="text/javascript">
  (function() {
   $(document).delegate('#pwd_reset_form', 'ajax:success', function(data, json, xhr) {
     if(json.success) {
       $("#password-reset").html(json.value);
     } else {
       if($('#pwd_error').length == 0) {
         $('#pwd_reset_form').prepend('<div id="pwd_error" class="modal-form-error">${_("Email is incorrect.")}</div>');
       }
       $('#pwd_error').stop().css("display", "block");
     }
   });

   // removing close link's default behavior
   $('#login-modal .close-modal').click(function(e) {
    e.preventDefault();
   });
  })(this)
</script>
