{% extends "base.html" %}

{% block title %}Reset password — EVOLUM{% endblock %}

{% block extra_head %}
<style>
body { background: var(--bg); min-height: 100vh; }
.rp { max-width: 480px; margin: 80px auto; padding: 40px 32px; }
.rp-eyebrow {
    font-family: var(--mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--gold); margin-bottom: 14px;
}
.rp h1 {
    font-family: var(--serif); font-style: italic; font-size: clamp(32px, 5vw, 44px);
    font-weight: 700; letter-spacing: -1.2px; line-height: 1; color: var(--cream); margin-bottom: 14px;
}
.rp h1 em { font-style: normal; color: var(--gold); }
.rp-lede { color: var(--muted); font-size: 15px; line-height: 1.65; margin-bottom: 36px; }
.rp-email { font-family: var(--mono); font-size: 11px; color: var(--gold); }
.rp-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.rp-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--muted);
}
.rp-input {
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
    padding: 13px 16px; font-size: 15px; font-family: var(--serif); font-style: italic;
    transition: border-color 0.15s;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
.rp-input:focus { outline: none; border-color: var(--gold); }
.rp-submit {
    background: var(--gold); border: none; color: var(--bg-card);
    padding: 14px 30px; font-family: var(--mono); font-size: 11px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: background 0.15s; margin-top: 8px;
}
.rp-submit:hover { background: var(--gold-bright); }
.rp-err {
    background: rgba(184,64,64,0.12); border-left: 3px solid var(--red);
    padding: 12px 16px; font-size: 13px; color: var(--text); margin-bottom: 20px;
}
.rp-back {
    display: inline-block; margin-top: 28px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text-mute); text-decoration: none;
}
.rp-back:hover { color: var(--gold); }
</style>
{% endblock %}

{% block content %}
<div class="rp">
    <div class="rp-eyebrow">EVOLUM · Password Reset</div>

    {% if link_dead %}
        <h1>Link <em>expired</em>.</h1>
        <p class="rp-lede">{{ error }}</p>
        <a class="rp-submit" href="/sign-in" style="text-decoration:none;display:inline-block;">Back to sign in →</a>
    {% else %}
        <h1>Set a <em>new</em> password.</h1>
        <p class="rp-lede">For <span class="rp-email">{{ email }}</span>. Choose something at least 8 characters.</p>

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

        <form method="POST" action="/reset-password/{{ token }}">
            <div class="rp-field">
                <label class="rp-label" for="password">New password</label>
                <input class="rp-input" type="password" id="password" name="password" placeholder="At least 8 characters" minlength="8" required autofocus autocomplete="new-password">
            </div>
            <div class="rp-field">
                <label class="rp-label" for="confirm">Confirm new password</label>
                <input class="rp-input" type="password" id="confirm" name="confirm" placeholder="Enter it again" minlength="8" required autocomplete="new-password">
            </div>
            <button class="rp-submit" type="submit">Set password &amp; sign in →</button>
        </form>

        <a class="rp-back" href="/sign-in">← Back to sign in</a>
    {% endif %}
</div>
{% endblock %}