{% extends "main_django.html" %}
{% load i18n %}

{% block title %}
<title>
  {% blocktrans with platform_name=platform_name %}
      Reset Your {{ platform_name }} Password
  {% endblocktrans %}
</title>
{% endblock %}

{% block bodyextra %}
  <script type="text/javascript">
    $(function() {

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

      // 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>
{% endblock %}

{% block bodyclass %}view-passwordreset{% endblock %}

{% block body %}
  <section class="introduction">
    <header>
      <h1 class="title">
        <span class="title-super">
          {% blocktrans with platform_name=platform_name %}
          Reset Your {{ platform_name }} Password
          {% endblocktrans %}
        </span>
      </h1>
    </header>
  </section>

  <section class="passwordreset container">
    <section role="main" class="content">
      {% if validlink %}
      <header>
      <h2 class="sr">{% trans "Password Reset Form" %}</h2>
      </header>

      <form role="form" id="passwordreset-form" method="post" action="">{% csrf_token %}
        <!-- status messages -->
        <div role="alert" class="status message">
          <h3 class="message-title">
            {% blocktrans with platform_name=platform_name %}
                We're sorry, {{ platform_name }} enrollment is not available in your region
            {% endblocktrans %}
          </h3>
        </div>

        {% if err_msg %}
        <div role="alert" class="status message submission-error" style="display: block;">
        {% else %}
        <div role="alert" class="status message submission-error" style="display: none;">
        {% endif %}
          <h3 class="message-title">{% trans "The following errors occurred while processing your registration: " %}</h3>
          <ul class="message-copy">
            {% if err_msg %}
              <li>{{err_msg}}</li>
            {% else %}
              <li>{% trans "You must complete all fields." %}</li>
              <li>{% trans "The two password fields didn't match." %}</li>
            {% endif %}
          </ul>
        </div>

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

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

        <fieldset class="group group-form group-form-requiredinformation">
          <legend class="sr">{% trans "Required Information" %}</legend>

          <ol class="list-input">
            <li class="field required password" id="field-new_password1">
              <label for="new_password1">{% trans "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">{% trans "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">{% trans "Change My Password" %}</button>
        </div>
      </form>

      {% else %}

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

      {% endif %}
    </section>

    <aside role="complementary">
      <header>
      <h3 class="sr">{% trans "Password Reset Help" %}</h3>
      </header>

      <div class="cta cta-help">
        <h3>{% trans "Need Help?" %}</h3>
        <p>
          {% blocktrans with start_link='<a href="{{MKTG_URL_FAQ}}">' end_link='</a>' %}
              View our {{ start_link }}help section for contact information and answers to commonly asked questions{{ end_link }}
          {% endblocktrans %}
        </p>
      </div>
    </aside>
  </section>
{% endblock %}
