{% extends "base.html" %}

{% block title %}{{ t.login_heading }} | {{ t.site_name }}{% endblock title %}

{% block head_extra %}
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
    .login-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 2rem 2.5rem; width: 100%; max-width: 400px; }
    .login-card h1 { margin-bottom: 1.5rem; font-size: 1.5rem; text-align: center; }
    .login-card label { display: block; margin-bottom: .25rem; font-weight: 600; font-size: .9rem; }
    .login-card input[type="text"],
    .login-card input[type="password"] { width: 100%; padding: .5rem .7rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; font-size: .95rem; }
    .login-card button,
    .login-card .sso-btn { display: block; width: 100%; padding: .6rem; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; text-align: center; text-decoration: none; }
    .login-card button { background: #1a1a2e; color: #fff; }
    .login-card button:hover { background: #16213e; }
    .login-card .sso-btn { background: #4a90d9; color: #fff; margin-top: .75rem; }
    .login-card .sso-btn:hover { background: #357abd; }
    .login-card .divider { text-align: center; margin: 1rem 0; color: #999; font-size: .85rem; }
    .login-card .message { text-align: center; color: #666; margin-bottom: 1rem; }
    .login-card .flash { color: #856404; background: #fff3cd; padding: .5rem .75rem; border-radius: 4px; margin-bottom: 1rem; text-align: center; font-size: .9rem; }
</style>
{% endblock head_extra %}

{% block body %}
<div class="login-card">
    <h1>{{ t.login_heading }}</h1>

    {% if !message.is_empty() %}
    <div class="flash">{{ message }}</div>
    {% endif %}

    {% if !auth_password_enabled && !auth_sso_enabled %}
    <p class="message">{{ t.login_disabled }}</p>
    {% endif %}

    {% if auth_password_enabled %}
    <form method="post" action="/login">
        <label for="username">{{ t.login_username }}</label>
        <input type="text" name="username" id="username" required>
        <label for="password">{{ t.login_password }}</label>
        <input type="password" name="password" id="password" required>
        <button type="submit">{{ t.login_submit }}</button>
    </form>
    {% endif %}

    {% if auth_password_enabled && auth_sso_enabled %}
    <div class="divider">&mdash; or &mdash;</div>
    {% endif %}

    {% if auth_sso_enabled %}
    <a class="sso-btn" href="/auth/oidc/start">{{ oidc_button_text }}</a>
    {% endif %}
</div>
{% endblock body %}