{% extends "base.html" %}
{% block layout_style %}
<style>
    /* 應用外殼：左側固定側邊欄 + 右側主內容區；窄屏折疊為頂欄 */
    .shell { display: flex; min-height: 100vh; min-height: 100dvh; }
    .sidebar {
        box-sizing: border-box;
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: 15rem;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.4rem 1rem;
        overflow-y: auto;
        border-right: 1px solid color-mix(in srgb, currentColor 20%, transparent);
        background: color-mix(in srgb, currentColor 4%, transparent);
    }
    .sidebar .brand h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
    .sidebar .brand a { color: inherit; text-decoration: none; }
    .sidebar .brand p { margin: .25rem 0 0; font-size: .78rem; opacity: .65; }
    .sidebar nav { display: flex; flex-direction: column; gap: .25rem; }
    .sidebar nav a {
        padding: .5rem .8rem;
        border-radius: 6px;
        color: inherit;
        text-decoration: none;
    }
    .sidebar nav a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
    .sidebar nav a[aria-current="page"] {
        font-weight: 600;
        background: color-mix(in srgb, currentColor 14%, transparent);
    }
    .sidebar-footer {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: .6rem;
        padding-top: 1rem;
        border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
        font-size: .85rem;
    }
    .sidebar-footer form { margin: 0; }
    .sidebar-footer .footer-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .6rem;
    }
    .sidebar-footer .footer-actions a {
        font: inherit;
        padding: .3rem .9rem;
        border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 6px;
        color: inherit;
        text-decoration: none;
    }
    .sidebar-footer .footer-actions a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
    .sidebar-footer button {
        font: inherit;
        padding: .3rem .9rem;
        border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 6px;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    .sidebar-footer button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
    .main {
        box-sizing: border-box;
        flex: 1;
        min-width: 0;
        max-width: 56rem;
        padding: 2.5rem 3rem;
    }
    @media (max-width: 48rem) {
        .shell { display: block; min-height: auto; }
        .sidebar {
            position: static;
            height: auto;
            width: auto;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: .75rem 1.25rem;
            padding: .8rem 1rem;
            border-right: none;
            border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
            overflow: visible;
        }
        .sidebar .brand p { display: none; }
        .sidebar nav { flex-direction: row; gap: .25rem; }
        .sidebar-footer {
            margin-top: 0;
            margin-left: auto;
            flex-direction: row;
            align-items: center;
            gap: .8rem;
            padding-top: 0;
            border-top: none;
            font-size: .8rem;
        }
        .main { padding: 1.5rem 1rem; }
    }
</style>
{% endblock %}
{% block content %}
<div class="shell">
    <aside class="sidebar">
        <div class="brand">
            <h1><a href="/">alterdb</a></h1>
            <p>以 SQLite 為底層存儲的自定義數據庫引擎</p>
        </div>
        <nav aria-label="主導航">
            <a href="/"{% if nav_active == "index" %} aria-current="page"{% endif %}>首頁</a>
            <a href="/databases"{% if nav_active == "databases" %} aria-current="page"{% endif %}>數據庫</a>
        </nav>
        <div class="sidebar-footer">
            <span>已登入：<strong>{{ user_display_name }}</strong>{% if user_display_name != user_username %} <code>{{ user_username }}</code>{% endif %}</span>
            <div class="footer-actions">
                <button type="button" class="theme-toggle" data-theme-toggle>深色模式</button>
                <a href="/password">變更密碼</a>
                <form method="post" action="/logout">
                    <button type="submit">登出</button>
                </form>
            </div>
        </div>
    </aside>
    <main class="main">
        {% block page %}{% endblock %}
    </main>
</div>
{% endblock %}