<%! from django.utils.translation import ugettext as _ %>
{% load compressed %}
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>

  <title>${_("Reset Your {platform_name} Password").format(platform_name=settings.PLATFORM_NAME)}</title>

  {% compressed_css 'application' %}

  <!--[if lt IE 9]>
  <script src="{% static 'js/html5shiv.js' %}"></script>
  <![endif]-->

  <script type="text/javascript">
    $(function() {

      var view_name = 'view-passwordreset';

      // adding js class for styling with accessibility in mind
      $('body').addClass('js').addClass(view_name);

      // new window/tab opening
      $('a[rel="external"], a[class="new-vp"]')
      .click( function() {
      window.open( $(this).attr('href') );
      return false;
      });

      // form field label styling on focus
      $("form :input").focus(function() {
        $("label[for='" + this.id + "']").parent().addClass("is-focused");
      }).blur(function() {
        $("label").parent().removeClass("is-focused");
      });
    });
  </script>

</head>

<body class="view-passwordreset">

<header class="global">
  <nav>
    <h1 class="logo">
      <a href="{{MKTG_URL_ROOT}}"><img src="/static/images/header-logo.png"></a>
    </h1>
  </nav>
</header>

<section class="content-wrapper">
  <section class="passwordreset container">
    <section class="introduction">
      <header>
        <h1>${_("Reset Your {platform_name} Password").format(platform_name=settings.PLATFORM_NAME)}</h1>
      </header>
    </section>

    <section role="main" class="content">
      {% if validlink %}
      <header>
      <h2 class="sr">${_("Password Reset Form")}</h2>
      </header>

      <form role="form" id="passwordreset-form" method="post" data-remote="true" action="">{% csrf_token %}
        <!-- status messages -->
        <div role="alert" class="status message">
          <h3 class="message-title">${_("We're sorry, {platform_name} enrollment is not available in your region").format(platform_name=settings.PLATFORM_NAME)}</h3>
        </div>

        <div role="alert" class="status message submission-error">
          <h3 class="message-title">${_("The following errors occured while processing your registration: ")}</h3>
          <ul class="message-copy">
            <li>${_("You must complete all fields.")}</li>
            <li>${_("The two password fields didn't match.")}</li>
          </ul>
        </div>

        <div role="alert" class="status message system-error">
          <h3 class="message-title">${_("We're sorry, our systems seem to be having trouble processing your password reset")}</h3>
          <p class="message-copy">${_('Someone has been made aware of this issue. Please try again shortly. Please <a href="{{MKTG_URL_CONTACT}}">contact us</a> about any concerns you have.')}</p>
        </div>

        <p class="instructions">
        ${_('Please enter your new password twice so we can verify you typed it in correctly. <br /> '
            'Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.')}
        </p>

        <fieldset class="group group-form group-form-requiredinformation">
          <legend class="sr">${_("Required Information")}</legend>

          <ol class="list-input">
            <li class="field required password" id="field-new_password1">
              <label for="new_password1">${_("Your New Password")}</label>
              <input id="new_password1" type="password" name="new_password1" placeholder="*****" />
            </li>
            <li class="field required password" id="field-new_password2">
              <label for="new_password2">${_("Your New Password Again")}</label>
              <input id="new_password2" type="password" name="new_password2" placeholder="*****" />
            </li>
          </ol>
        </fieldset>

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

      {% else %}

      <header>
        <h2 class="sr">${_("Your Password Reset Was Unsuccessful")}</h2>
      </header>
      <p>${_('The password reset link was invalid, possibly because the link has already been used.  Please return to the <a href="/login">login page</a> and start the password reset process again.')}</p>

      {% endif %}
    </section>

    <aside role="complementary">
      <header>
      <h3 class="sr">${_("Password Reset Help")}</h3>
      </header>

      <div class="cta cta-help">
        <h3>${_("Need Help?")}</h3>
        <p>${_('View our <a href="{{MKTG_URL_FAQ}}">help section for contact information and answers to commonly asked questions</a>')}</p>
      </div>
    </aside>
  </section>
</section>
