{% extends 'base.html' %}
{% block title %}修改密码{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb mb-0">
  <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">首页</a></li>
  <li class="breadcrumb-item active">修改密码</li>
</ol>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-md-6 col-lg-5">
    <div class="card shadow-sm">
      <div class="card-header"><h5 class="mb-0"><i class="bi bi-key me-2"></i>修改密码</h5></div>
      <div class="card-body p-4">
        <form method="POST" novalidate>
          {{ form.hidden_tag() }}

          {% macro pw_field(f, label, id) %}
          <div class="mb-3">
            <label class="form-label">{{ label }}</label>
            <div class="input-group">
              {{ f(class='form-control' + (' is-invalid' if f.errors else ''),
                   id=id) }}
              <button class="btn btn-outline-secondary" type="button"
                      onclick="togglePwd('{{ id }}', this)">
                <i class="bi bi-eye"></i>
              </button>
            </div>
            {% for err in f.errors %}
              <div class="text-danger small">{{ err }}</div>
            {% endfor %}
          </div>
          {% endmacro %}

          {{ pw_field(form.old_password, '当前密码', 'oldPwd') }}
          {{ pw_field(form.new_password, '新密码（至少 8 位）', 'newPwd') }}
          {{ pw_field(form.new_password2, '确认新密码', 'newPwd2') }}

          <button type="submit" class="btn btn-primary w-100">保存修改</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function togglePwd(id, btn) {
  const input = document.getElementById(id);
  const icon = btn.querySelector('i');
  input.type = input.type === 'password' ? 'text' : 'password';
  icon.className = input.type === 'text' ? 'bi bi-eye-slash' : 'bi bi-eye';
}
</script>
{% endblock %}