{% extends 'base.html' %}

{% block title %}Login{% endblock %}

{% block content %}
    <div class="login-box">
        <h2 style="text-align: center">Login</h2>
    
        <form class="login-form" id="loginForm">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" placeholder="Enter username" required>

            <label for="accessToken">OpenAI API KEY</label>
            <input type="password" class="token-input" id="accessToken" name="accessToken" placeholder="Enter Token Key" required>

            <button type="submit" class="login-button">Login</button>
        </form>
    </div>
    <div class="loading-container">
        <div class="loader">
            <p>Authenticating OpenAI Token ...</p>
            <p>Initializing chatbot ...</p>
        </div>
    </div>
{% endblock %}