<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enter API Token - Bluebook</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/book.svg') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <style>
        body {
            padding-top: 0;
        }
    </style>
</head>
<body class="token-page">
    <div class="token-card">
        <img src="{{ url_for('static', filename='images/book.svg') }}" alt="Bluebook" class="token-logo">
        <h1 class="token-title">Welcome to Bluebook</h1>
        <p class="token-description">
            To get started, please enter your Gemini API token. Bluebook uses Google Gemini to generate 
            exam questions. You can obtain your free API key 
            <a href="https://ai.google.dev/gemini-api/docs/api-key" target="_blank" rel="noopener">here</a>.
        </p>

        <form action="{{ url_for('main.save_token') }}" method="POST" class="token-form">
            <div class="form-group">
                <label class="form-label" for="API_TOKEN">API Token</label>
                <input type="password" 
                       id="API_TOKEN" 
                       name="API_TOKEN" 
                       class="form-input token-input" 
                       placeholder="Enter your Gemini API key..."
                       required 
                       autocomplete="off">
            </div>
            <button type="submit" class="btn btn-primary btn-lg token-submit">Continue to Bluebook</button>
        </form>
        
        <p class="token-note">
            Your token is stored securely on your local machine. If your token is found invalid, 
            you'll be asked to enter a new one.
        </p>
    </div>
</body>
</html>
