<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoBot — New Password</title>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="/admin/css/style.css">
    <style>
        .password-hint {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        .login-subtitle {
            color: #888;
            font-size: 13px;
            text-align: center;
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-box">
            <div class="logo">
                <h1>EcoBot</h1>
                <p class="login-subtitle">New Password</p>
            </div>

            <% if (error) { %>
                <div class="error-message" style="display:block;margin-bottom:20px;">
                    <span class="material-icons" style="font-size:16px;vertical-align:middle;margin-right:6px;">error_outline</span>
                    <%= error %>
                </div>
            <% } %>

            <% if (token) { %>
                <form method="POST" action="/admin/reset-password/<%= token %>">
                    <div class="form-group">
                        <label for="password">New Password</label>
                        <input type="password" id="password" name="password"
                               placeholder="Minimum 6 characters" required minlength="6" autocomplete="new-password">
                        <p class="password-hint">Minimum 6 characters</p>
                    </div>
                    <div class="form-group">
                        <label for="passwordConfirm">Confirm Password</label>
                        <input type="password" id="passwordConfirm" name="passwordConfirm"
                               placeholder="Repeat your password" required minlength="6" autocomplete="new-password">
                    </div>
                    <button type="submit" class="btn-login">
                        <span class="material-icons" style="font-size:18px;vertical-align:middle;margin-right:6px;">lock</span>
                        Save New Password
                    </button>
                </form>
            <% } else { %>
                <p style="text-align:center;color:#666;margin-top:10px;font-size:14px;">
                    This link is invalid or has expired. Please request a new one.
                </p>
                <p style="text-align:center;margin-top:20px;">
                    <a href="/admin/forgot-password" style="color:#28a745;font-size:14px;">Request new link</a>
                </p>
            <% } %>
        </div>
    </div>
</body>
</html>
