{% extends "config/chromeless_base.html" %}

{% block title %}Sign in · Pychestrate{% endblock %}

{% block extra_css %}
<style>
    .login-container {
        max-width: 400px;
        margin: 100px auto;
        padding: 40px;
        background: var(--pyc-color-surface);
        border-radius: 8px;
        box-shadow: var(--pyc-shadow-elevated, 0 4px 20px rgba(0, 0, 0, 0.1));
    }
    .login-header {
        text-align: center;
        margin-bottom: 30px;
    }
    .login-mark {
        display: block;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 auto 0.75rem;
    }
    .login-brand {
        margin: 0 0 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--pyc-color-on-surface-muted);
    }
    .login-header h1 {
        margin: 0 0 10px;
        font-size: 1.5rem;
        color: var(--pyc-color-on-surface);
    }
    .login-container .alert {
        max-width: none;
        margin: 0 0 20px;
    }
    .login-header p {
        color: var(--pyc-color-on-surface-muted);
        margin: 0;
    }
    .login-form .form-group {
        margin-bottom: 20px;
    }
    .login-form .btn {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
    }
</style>
{% endblock %}

{% block flashes %}{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-header">
        <img class="login-mark" src="/static/favicon.svg" alt="" width="40" height="40">
        <p class="login-brand">Pychestrate</p>
        <h1>Sign in to Pychestrate</h1>
        <p>Enter your username and password.</p>
    </div>

    {% if flashes %}
    {#- The error sits in the card, where the eye is, and is announced at once. #}
    {% for category, message in flashes %}
    <div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
    {% endfor %}
    {% endif %}

    <form method="post" action="/login" class="login-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        {% if next_target %}
        <input type="hidden" name="next" value="{{ next_target }}">
        {% endif %}
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" class="form-control"
                   required {% if not username %}autofocus{% endif %} autocomplete="username" placeholder="Enter your username"
                   value="{{ username }}">
        </div>
        
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" class="form-control"
                   required {% if username %}autofocus{% endif %} autocomplete="current-password" placeholder="Enter your password">
        </div>
        
        <button type="submit" class="btn btn-primary">Sign In</button>
    </form>
    <p class="muted small mt">Forgot your password? Ask a Pychestrate administrator for a reset link.</p>
</div>
{% endblock %}