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

<%! from django.core.urlresolvers import reverse %>
<section id="forgot-password-modal" class="modal" role="dialog" aria-label="${_('Password Reset')}">
  <div class="inner-wrapper">
    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>

    <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="forgot-password-modal-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" aria-describedby="pwd_reset_email-tip" aria-required="true" />
              <span class="tip tip-input" id="pwd_reset_email-tip">${_("This is the e-mail address you used to register with {platform}").format(platform=MicrositeConfiguration.get_microsite_configuration_value('platform_name', 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>
  </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();
   });

   var onModalClose = function() {
        $("#forgot-password-modal").attr("aria-hidden", "true");
        $("#forgot-password-link").focus();
    };
    var cycle_modal_tab = function(from_element_name, to_element_name) {
      $(from_element_name).on('keydown', function(e) {
          var keyCode = e.keyCode || e.which;
          var TAB_KEY = 9;  // 9 corresponds to the tab key
          if (keyCode === TAB_KEY) {
              e.preventDefault();
              $(to_element_name).focus();
          }
      });
    };
    $("#forgot-password-modal .close-modal").click(onModalClose);
    $("#forgot-password-modal").focus()
    cycle_modal_tab("#forgot-password-modal .close-modal", "#pwd_reset_email")
    cycle_modal_tab("#pwd_reset_email", "#pwd_reset_button")
    cycle_modal_tab("#pwd_reset_button", "#forgot-password-modal .close-modal")

    // Hitting the ESC key will exit the modal
    $("#forgot-password-modal").on("keydown", function(e) {
        var keyCode = e.keyCode || e.which;
        // 27 is the ESC key
        if (keyCode === 27) {
            e.preventDefault();
            $("#forgot-password-modal .close-modal").click();
        }
    });

  })(this)
</script>
