<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoBot — Sign Up</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;
        }
        .login-link {
            display: block;
            text-align: center;
            font-size: 13px;
            color: #888;
            text-decoration: none;
            margin-top: 18px;
        }
        .login-link a { color: #28a745; text-decoration: none; }
        .login-link a:hover { text-decoration: underline; }
    </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>
            <% } %>

            <form method="POST" action="/admin/signup">
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" placeholder="your@email.com" required autocomplete="email">
                </div>
                <div class="form-group">
                    <label for="password">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;">person_add</span>
                    Create Account
                </button>
            </form>

            <p class="login-link">Already have an account? <a href="/admin/login">Log in</a></p>
        </div>
    </div>
</body>
</html>
