{% extends "base.html" %}
{% block title %}登入 — alterdb{% endblock %}
{% block style %}
<style>
    .login-card {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        max-width: 22rem;
        margin: 3rem auto 0;
        padding: 2rem;
        border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
        border-radius: 10px;
    }
    .login-card h2 { margin: 0; }
    .login-card label {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        font-weight: 600;
    }
    .login-card input {
        font: inherit;
        padding: .5rem .65rem;
        border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 6px;
        background: transparent;
        color: inherit;
    }
    .login-card button {
        font: inherit;
        font-weight: 600;
        padding: .55rem 1rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        color: inherit;
        background: color-mix(in srgb, currentColor 12%, transparent);
    }
    .login-card button:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
    .login-card .error {
        margin: 0;
        padding: .5rem .75rem;
        border-radius: 6px;
        color: light-dark(#b3261e, #ffb4ab);
        background: color-mix(in srgb, currentColor 8%, transparent);
    }
    .login-card .notice {
        margin: 0;
        padding: .5rem .75rem;
        border-radius: 6px;
        color: light-dark(#146c2e, #6fdd8b);
        background: color-mix(in srgb, currentColor 8%, transparent);
    }
    .login-card .hint { font-size: .85rem; opacity: .7; margin: 0; }
</style>
{% endblock %}
{% block content %}
<div class="page">
<header class="site-header">
    <h1>alterdb</h1>
    <button type="button" class="theme-toggle" data-theme-toggle>深色模式</button>
</header>
<form class="login-card" method="post" action="/login">
    <h2>登入管理介面</h2>
    {% if let Some(message) = notice %}
    <p class="notice" role="status">{{ message }}</p>
    {% endif %}
    {% if let Some(message) = error %}
    <p class="error" role="alert">{{ message }}</p>
    {% endif %}
    <label>用戶名
        <input type="text" name="username" required autofocus autocomplete="username">
    </label>
    <label>密碼
        <input type="password" name="password" required autocomplete="current-password">
    </label>
    <button type="submit">登入</button>
    <p class="hint">默認管理員帳號為 <code>admin</code> / <code>admin</code>，建議登入後儘早於側邊欄變更密碼。</p>
</form>
</div>
{% endblock %}