<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - Dewy Oracle</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="auth-container">
        <div class="auth-card">
            <h1>Create Account</h1>
            <p class="auth-subtitle">Get started with AI-powered book recommendations</p>

            <div id="message" class="message hidden"></div>

            <form id="register-form" method="POST" action="/api/auth/register">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input
                        type="text"
                        id="username"
                        name="username"
                        required
                        autofocus
                        placeholder="Choose a username"
                    >
                </div>

                <div class="form-group">
                    <label for="email">Email</label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        required
                        placeholder="your@email.com"
                    >
                </div>

                <div class="form-group">
                    <label for="display_name">Display Name (optional)</label>
                    <input
                        type="text"
                        id="display_name"
                        name="display_name"
                        placeholder="Your display name"
                    >
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        required
                        placeholder="Choose a strong password"
                    >
                </div>

                <div class="form-section">
                    <h3>Audiobookshelf Connection</h3>
                    <p class="form-help">Connect your Audiobookshelf account to sync your listening history.</p>

                    <div class="form-group">
                        <label for="abs_url">Audiobookshelf URL</label>
                        <input
                            type="url"
                            id="abs_url"
                            name="abs_url"
                            required
                            placeholder="https://your-audiobookshelf-server.com"
                        >
                        <small>The URL of your Audiobookshelf server</small>
                    </div>

                    <div class="form-group">
                        <label for="abs_api_token">API Token</label>
                        <input
                            type="password"
                            id="abs_api_token"
                            name="abs_api_token"
                            required
                            placeholder="Your Audiobookshelf API token"
                        >
                        <small>Get your token from Audiobookshelf Settings > Users > [Your User] > Generate API Token</small>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-full">Create Account</button>
            </form>

            <div class="auth-footer">
                <p>Already have an account? <a href="/login">Sign in here</a></p>
            </div>
        </div>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>
