{{ header }}

<main id="account-reset" class="franklin-account-page franklin-password-page">
  <div class="container">

    <nav class="franklin-breadcrumb account-breadcrumb" aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
            {% if loop.last %}
              {{ breadcrumb.text }}
            {% else %}
              <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ol>
    </nav>

    {{ content_top }}

    <section class="password-recovery-shell">

      <div class="password-recovery-visual">
        <span class="password-recovery-eyebrow">
          <i class="bi bi-key-fill"></i>
          Password Security
        </span>

        <div class="password-recovery-visual-icon">
          <i class="bi bi-shield-check"></i>
        </div>

        <h1>{{ heading_title }}</h1>

        <p>Create a secure new password for your Franklin customer account.</p>

        <div class="password-strength-tips">
          <div>
            <i class="bi bi-check-circle-fill"></i>
            <span>Use a combination of letters, numbers and symbols.</span>
          </div>

          <div>
            <i class="bi bi-check-circle-fill"></i>
            <span>Avoid using your name, email address or phone number.</span>
          </div>

          <div>
            <i class="bi bi-check-circle-fill"></i>
            <span>Choose a password that you do not use on other websites.</span>
          </div>
        </div>

        <div class="password-recovery-note">
          <i class="bi bi-lock-fill"></i>
          <span>Your new password is transmitted securely and is not displayed to other users.</span>
        </div>
      </div>

      <section class="password-recovery-card">
        <div class="password-recovery-card-icon">
          <i class="bi bi-key"></i>
        </div>

        <div class="password-recovery-card-heading">
          <h2>{{ text_password }}</h2>
          <p>Enter and confirm your new account password.</p>
        </div>

        <form id="form-reset"
              action="{{ save }}"
              method="post"
              data-oc-toggle="ajax"
              class="password-recovery-form">

          <div class="password-form-group required">
            <label for="input-password">{{ entry_password }}</label>

            <div class="password-input-wrap">
              <i class="bi bi-lock"></i>

              <input type="password"
                     name="password"
                     value=""
                     id="input-password"
                     class="form-control"
                     autocomplete="new-password"/>

              <button type="button"
                      class="password-toggle"
                      data-password-target="#input-password"
                      aria-label="Show password">
                <i class="bi bi-eye"></i>
              </button>
            </div>

            <div id="error-password" class="invalid-feedback"></div>
          </div>

          <div class="password-form-group required">
            <label for="input-confirm">{{ entry_confirm }}</label>

            <div class="password-input-wrap">
              <i class="bi bi-shield-lock"></i>

              <input type="password"
                     name="confirm"
                     value=""
                     id="input-confirm"
                     class="form-control"
                     autocomplete="new-password"/>

              <button type="button"
                      class="password-toggle"
                      data-password-target="#input-confirm"
                      aria-label="Show password">
                <i class="bi bi-eye"></i>
              </button>
            </div>

            <div id="error-confirm" class="invalid-feedback"></div>
          </div>

          <div class="password-form-actions">
            <a href="{{ back }}" class="btn password-secondary-button">
              <i class="bi bi-arrow-left"></i>
              {{ button_back }}
            </a>

            <button type="submit" class="btn btn-primary password-primary-button">
              <i class="bi bi-check2-circle"></i>
              {{ button_continue }}
            </button>
          </div>

        </form>

        <div class="password-recovery-help">
          <i class="bi bi-shield-check"></i>
          <span>After saving, use your new password the next time you sign in.</span>
        </div>
      </section>

    </section>

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('.password-toggle').on('click', function() {
    var target = $($(this).data('password-target'));
    var icon = $(this).find('i');

    if (target.attr('type') === 'password') {
        target.attr('type', 'text');
        icon.removeClass('bi-eye').addClass('bi-eye-slash');
        $(this).attr('aria-label', 'Hide password');
    } else {
        target.attr('type', 'password');
        icon.removeClass('bi-eye-slash').addClass('bi-eye');
        $(this).attr('aria-label', 'Show password');
    }
});
//--></script>

{{ footer }}