{{ header }}

<main id="account-password" class="franklin-account-page franklin-change-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="change-password-shell">

      <div class="change-password-visual">
        <span class="change-password-eyebrow">
          <i class="bi bi-shield-lock-fill"></i>
          Account Security
        </span>

        <div class="change-password-visual-icon">
          <i class="bi bi-key-fill"></i>
        </div>

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

        <p>
          Update your password regularly to keep your Franklin customer account secure.
        </p>

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

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

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

        <div class="change-password-security-note">
          <i class="bi bi-shield-check"></i>
          <span>Your password is transmitted securely and is never shown to other users.</span>
        </div>
      </div>

      <section class="change-password-card">
        <div class="change-password-card-icon">
          <i class="bi bi-lock"></i>
        </div>

        <div class="change-password-card-heading">
          <span>Password Settings</span>
          <h2>{{ text_password }}</h2>
          <p>Enter your new password and confirm it before saving.</p>
        </div>

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

          <fieldset>

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

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

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

                <button type="button"
                        class="change-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="change-password-group required">
              <label for="input-confirm">{{ entry_confirm }}</label>

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

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

                <button type="button"
                        class="change-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>

          </fieldset>

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

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

        </form>

        <div class="change-password-help">
          <i class="bi bi-info-circle"></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"><!--
$('.change-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 }}