<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoBot — Create Account</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>
        .info-box {
            background: #e8f5e9;
            border-left: 4px solid #28a745;
            padding: 14px 16px;
            border-radius: 4px;
            margin-bottom: 22px;
            color: #2e7d32;
            font-size: 14px;
            line-height: 1.5;
        }
        .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">Create Coach Account</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) { %>
                <% if (email) { %>
                    <div class="info-box">
                        <span class="material-icons" style="font-size:16px;vertical-align:middle;margin-right:6px;">person</span>
                        Creating account for <strong><%= email %></strong>
                    </div>
                <% } %>

                <form method="POST" action="/admin/coach/setup/<%= token %>">
                    <div class="form-group">
                        <label for="password">Choose 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">Repeat 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>
                        Create Account
                    </button>
                </form>
            <% } else { %>
                <p style="text-align:center;color:#666;margin-top:10px;font-size:14px;">
                    Invalid or expired link. Please request a new invite.
                </p>
            <% } %>
        </div>
    </div>
</body>
</html>
