{% extends "base.html" %}
{% block title %}Change Password — CoderAI{% endblock %}

{% block content %}
<div class="centered-wrap">
  <div class="centered-card">
    <h1>Change Password</h1>
    <p class="sub">
      {% if must_change %}You must set a new password before continuing.
      {% else %}Update your account password.{% endif %}
    </p>

    {% if error %}
    <div class="alert alert-error">{{ error }}</div>
    {% endif %}

    <form method="post" action="/admin/change-password">
      {% if not must_change %}
      <div class="form-row">
        <label class="form-label" for="old_password">Current Password</label>
        <input class="form-input" type="password" id="old_password" name="old_password"
               placeholder="••••••••" required autocomplete="current-password">
      </div>
      {% endif %}
      <div class="form-row">
        <label class="form-label" for="new_password">New Password</label>
        <input class="form-input" type="password" id="new_password" name="new_password"
               placeholder="••••••••" required minlength="8" autocomplete="new-password">
        <span class="form-hint">At least 8 characters</span>
      </div>
      <div class="form-row">
        <label class="form-label" for="confirm_password">Confirm Password</label>
        <input class="form-input" type="password" id="confirm_password" name="confirm_password"
               placeholder="••••••••" required minlength="8" autocomplete="new-password">
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Update password</button>
        {% if not must_change %}
        <a href="/admin" class="btn btn-ghost">Cancel</a>
        {% endif %}
      </div>
    </form>
  </div>
</div>
{% endblock %}