{% extends "base.html" %}
{% block content %}
<div style="max-width:26rem; margin:3rem auto">
  <div class="card">
    <h2 style="margin-top:0">{% if forced %}Choose a new password{% else %}Change password{% endif %}</h2>
    <p style="color:#94a3b8; font-size:0.85rem; margin-top:0">
      Signed in as <strong>{{ username }}</strong>
    </p>

    {% if forced %}
    <div style="padding:0.6rem 0.75rem; border-radius:0.4rem; margin-bottom:0.9rem;
                background:#422006; border:1px solid #b45309; color:#fde68a; font-size:0.85rem">
      This is the first time you have signed in. Choose a new password to continue.
    </div>
    {% endif %}

    {% if error %}
    <div style="padding:0.6rem 0.75rem; border-radius:0.4rem; margin-bottom:0.9rem;
                background:#450a0a; border:1px solid #b91c1c; color:#fecaca; font-size:0.85rem">
      {{ error }}
    </div>
    {% endif %}

    <form method="post" action="/api/change-password" style="display:flex; flex-direction:column; gap:0.7rem">
      <label style="font-size:0.8rem; color:#94a3b8">
        {% if forced %}First-use password{% else %}Current password{% endif %}
        <input type="password" name="current_password"
               autocomplete="current-password" required
               style="width:100%; margin-top:0.25rem; padding:0.5rem;
                      background:#0b1220; color:#e2e8f0;
                      border:1px solid #334155; border-radius:0.35rem">
      </label>

      <label style="font-size:0.8rem; color:#94a3b8">
        New password
        <input type="password" name="new_password"
               autocomplete="new-password" required
               style="width:100%; margin-top:0.25rem; padding:0.5rem;
                      background:#0b1220; color:#e2e8f0;
                      border:1px solid #334155; border-radius:0.35rem">
      </label>

      <label style="font-size:0.8rem; color:#94a3b8">
        Confirm new password
        <input type="password" name="confirm_password"
               autocomplete="new-password" required
               style="width:100%; margin-top:0.25rem; padding:0.5rem;
                      background:#0b1220; color:#e2e8f0;
                      border:1px solid #334155; border-radius:0.35rem">
      </label>

      <p style="color:#64748b; font-size:0.78rem; margin:0">
        More than six characters, including at least one letter and one special character.
      </p>

      <button type="submit" class="btn btn-generate" style="margin-top:0.3rem">Save password</button>
    </form>
  </div>
</div>
{% endblock %}