{% extends "_shell.html" %}
{% block title %}變更密碼 — alterdb{% endblock %}
{% block style %}
<style>
    .password-card {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        max-width: 22rem;
        padding: 1.6rem;
        border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
        border-radius: 10px;
    }
    .password-card h2 { margin: 0; }
    .password-card label {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        font-weight: 600;
    }
    .password-card input {
        font: inherit;
        padding: .5rem .65rem;
        border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 6px;
        background: transparent;
        color: inherit;
    }
    .password-card button {
        font: inherit;
        font-weight: 600;
        padding: .55rem 1rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        color: inherit;
        background: color-mix(in srgb, currentColor 12%, transparent);
    }
    .password-card button:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
    .password-card .error {
        margin: 0;
        padding: .5rem .75rem;
        border-radius: 6px;
        color: light-dark(#b3261e, #ffb4ab);
        background: color-mix(in srgb, currentColor 8%, transparent);
    }
    .password-card .hint { font-size: .85rem; opacity: .7; margin: 0; }
</style>
{% endblock %}
{% block page %}
<form class="password-card" method="post" action="/password">
    <h2>變更密碼</h2>
    {% if let Some(message) = error %}
    <p class="error" role="alert">{{ message }}</p>
    {% endif %}
    <label>原密碼
        <input type="password" name="current_password" required autocomplete="current-password">
    </label>
    <label>新密碼
        <input type="password" name="new_password" required minlength="8" maxlength="128" autocomplete="new-password">
    </label>
    <label>確認新密碼
        <input type="password" name="confirm_password" required minlength="8" maxlength="128" autocomplete="new-password">
    </label>
    <button type="submit">更新密碼</button>
    <p class="hint">新密碼至少 8 個字符；更新成功後所有會話會失效，需以新密碼重新登入。</p>
</form>
{% endblock %}