{% extends "base.html" %}
{% block title %}Change Password — Bid Checker{% endblock %}
{% block content %}
<div class="page-header"><h1 class="page-title">🔑 Change Password</h1></div>
<div class="card" style="max-width:480px">
  <div class="modal-body">
    {% if success %}<div class="alert alert-success">{{ success }}</div>{% endif %}
    {% if error   %}<div class="alert alert-danger">{{ error }}</div>{% endif %}
    <form method="post" action="{{ url_for('auth.change_password_view') }}">
      <div class="form-group">
        <label class="form-label">Current Password</label>
        <input class="form-control" type="password" name="old_password" required>
      </div>
      <div class="form-group">
        <label class="form-label">New Password</label>
        <input class="form-control" type="password" name="new_password" id="new-password" required>
        <div class="pw-strength-wrap">
          <div class="pw-strength-bar"><div class="pw-strength-fill" id="pw-fill"></div></div>
          <small class="pw-strength-label" id="pw-label"></small>
        </div>
        <small class="text-muted">Min 8 chars, uppercase, number, special character.</small>
      </div>
      <div class="form-group">
        <label class="form-label">Confirm New Password</label>
        <input class="form-control" type="password" name="confirm_password" required>
      </div>
      <button class="btn btn-primary" type="submit">Change Password</button>
    </form>
  </div>
</div>
{% endblock %}
{% block scripts %}<script>attachPasswordStrength('new-password', 'pw-fill', 'pw-label');</script>{% endblock %}