{% extends "components/shell.html" %}

{% block content %}
<section class="login-container site-section site-section--change-password">
  <h1 class="site-section__heading">Change Password</h1>

  <form
    id="change_password_form"
    class="form"
    method="POST"
    action="{{ url_for('account.change_password') }}"
  >
    <div class="form__section">
      <label class="form__label" for="current-password">Current password:</label>
      <input id="current-password" class="form__input form__input--password" type="password" name="current-password" autocomplete="current-password">
      <ul>
        <li id="password-char-count" class="form__hint">5+ characters</li>
      </ul>
    </div>

    <div class="form__section">
      <label class="form__label" for="new-password">New password:</label>
      <input id="new-password" class="form__input form__input--password" type="password" name="new-password" autocomplete="new-password">
      <ul>
        <li id="new-password-char-count" class="form__hint">5+ characters</li>
      </ul>
    </div>

    <div class="form__section">
      <label class="form__label" for="new-password-confirmation">Confirm new password:</label>
      <input id="new-password-confirmation" class="form__input form__input--password" type="password" name="new-password-confirmation" autocomplete="new-password">
      <ul>
        <li id="password-confirm-matches" class="form__hint">Matches password</li>
      </ul>
    </div>

    <div class="form__section">
      <button id="submit" class="form__button form__button--submit" type="submit" disabled>
        Change password
      </button>
    </div>
  </form>
</section>
{% endblock %}
