<!-- bedrock_server_manager//web/templates/login.html -->
{# Extends the base layout template #}
{% extends "base.html" %}

{# --- Page Title Block --- #}
{% block title %}{{ super() }} - Login{% endblock %}

{# --- Main Content Block --- #}
{% block content %}
    {# Wrapper for login form styling and centering (defined in forms.css) #}
<div class="login-wrapper">

    {# Page Heading (Optional, header in base.html might suffice) #}
    <h2 style="text-align: center; margin-bottom: 20px;">Login</h2>

    {# Flash messages area (Included from base.html - displays above this block) #}
    {# Server-side flash messages (e.g., 'Invalid credentials') appear here via query params #}

    {# Login Form #}
    {# Form submission is handled by js/auth.js -> handleLoginAttempt #}
    {# The action attribute can be set to the FastAPI token endpoint as a fallback or for clarity #}
    <form id="login-form" class="login-form" novalidate onsubmit="return false;" action="/auth/token" method="POST">

        {# --- Username Field --- #}
        <div class="form-group">
            <label for="username" class="form-label">Username</label>
            <input type="text" id="username" name="username" class="form-input" placeholder="Enter your username" required autofocus autocomplete="username">
            {# Validation errors will be handled by auth.js and displayed, potentially in #status-message-area or #query-param-messages #}
        </div>

        {# --- Password Field --- #}
        <div class="form-group">
            <label for="password" class="form-label">Password</label>
            <input type="password" id="password" name="password" class="form-input" placeholder="Enter your password" required autocomplete="current-password">
            {# Validation errors will be handled by auth.js #}
        </div>

        {# --- Submit Button --- #}
        {# Use form-actions and login-actions classes for layout/styling #}
        <div class="form-actions login-actions">
            <button type="submit" class="action-button start-button">
                Log In
            </button>
        </div>

    </form> {# --- End Login Form --- #}
    {# A dedicated area for login errors, targeted by auth.js #}
    {# This is different from the general #query-param-messages in base.html #}
    <div id="login-error-message" class="message-box message-error" style="display:none; margin-top:15px;"></div>

</div> {# --- End .login-wrapper --- #}
{% endblock %}

{% block body_scripts %}
<script src="{{ request.url_for('static', path='js/auth.js') }}" defer></script>
{% endblock %}