<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Torn City MVP</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            color: #111;
            background: #fff;
            font: 16px/1.4 sans-serif;
        }

        a {
            color: inherit;
        }

        .shell {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0.75rem;
            display: grid;
            grid-template-columns: 13rem minmax(0, 1fr);
            gap: 1rem;
        }

        .sidebar,
        .main,
        .content,
        .stack {
            display: grid;
            gap: 0.75rem;
        }

        .sidebar h1,
        .panel h2,
        .panel h3,
        .card h3,
        .card h4 {
            margin: 0;
        }

        .sidebar nav {
            display: grid;
            gap: 0.2rem;
        }

        .sidebar nav a {
            padding: 0;
        }

        .sidebar nav a.active {
            font-weight: 700;
        }

        .sidebar .status-panel {
            border: 0;
            padding: 0;
        }

        .panel,
        .card,
        .flash {
            border: 1px solid #ccc;
            padding: 0.75rem;
        }

        .button,
        button {
            display: inline-block;
            padding: 0.35rem 0.55rem;
            border: 1px solid #aaa;
            background: #fff;
            color: inherit;
            font: inherit;
            cursor: pointer;
        }

        .button {
            text-decoration: none;
        }

        .button.primary,
        button.primary {
            font-weight: 700;
        }

        .button.subtle,
        button.subtle,
        .subtle {
            background: #f5f5f5;
        }

        .flash.success {
            border-color: #7aa57a;
        }

        .flash.error {
            border-color: #b97d7d;
        }

        .grid-2,
        .grid-3,
        .hero,
        .cards {
            display: grid;
            gap: 0.75rem;
        }

        .grid-2 {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }

        .grid-3,
        .cards {
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        }

        .card {
            display: grid;
            gap: 0.35rem;
        }

        .inline-form,
        .action-row,
        .field-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            align-items: center;
        }

        label {
            display: grid;
            gap: 0.35rem;
            font-size: 0.95rem;
        }

        input,
        select {
            padding: 0.35rem 0.5rem;
            border: 1px solid #aaa;
            background: #fff;
            font: inherit;
            color: inherit;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            text-align: left;
            padding: 0.45rem;
            border-bottom: 1px solid #ddd;
            vertical-align: top;
        }

        th {
            font-weight: 600;
        }

        .badge {
            display: inline-block;
            padding: 0.1rem 0.45rem;
            border: 1px solid #aaa;
            font-size: 0.82rem;
        }

        .badge.success {
            background: #eef7ee;
        }

        .badge.error {
            background: #fbeeee;
        }

        .log-list,
        .plain-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 0.5rem;
        }

        .log-list li,
        .plain-list li {
            border: 1px solid #ddd;
            padding: 0.55rem;
        }

        .mini {
            font-size: 0.9rem;
        }

        .muted {
            color: #555;
        }

        .status-panel p {
            margin: 0.15rem 0;
        }

        .status-list {
            display: grid;
            gap: 0.1rem;
        }

        @media (max-width: 820px) {
            .shell {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="shell">
        <aside class="sidebar">
            <div>
                <h1>Torn City MVP</h1>
            </div>

            {% if current_user %}
                <section class="panel status-panel">
                    <p><strong>{{ current_user.username }}</strong></p>
                    <p class="muted">{{ current_user.status }}</p>
                    <p>Level {{ current_user.level }}</p>
                    <p>Wallet: ${{ current_user.wallet_money }}</p>
                    <p>Bank: ${{ current_user.bank_money }}</p>
                    <div class="status-list">
                        <div><strong>Energy:</strong> {{ current_user.energy }}/100</div>
                        <div><strong>Nerve:</strong> {{ current_user.nerve }}/50</div>
                        <div><strong>Happy:</strong> {{ current_user.happy }}/{{ current_user.effective_happy_cap }}</div>
                        <div><strong>Life:</strong> {{ current_user.life }}/{{ current_user.max_life }}</div>
                        <div><strong>Strength:</strong> {{ current_user.effective_strength }}</div>
                        <div><strong>Speed:</strong> {{ current_user.effective_speed }}</div>
                        <div><strong>Defense:</strong> {{ current_user.effective_defense }}</div>
                        <div><strong>Dexterity:</strong> {{ current_user.effective_dexterity }}</div>
                    </div>
                    {% if current_user.hospital_seconds_left %}
                        <p class="muted">Hospital: {{ format_duration(current_user.hospital_seconds_left) }}</p>
                    {% elif current_user.jail_seconds_left %}
                        <p class="muted">Jail: {{ format_duration(current_user.jail_seconds_left) }}</p>
                    {% else %}
                        <p class="muted">Ready for crimes, gym, jobs, or attacks.</p>
                    {% endif %}
                    {% if current_user.weapon_item %}
                        <p class="mini">Weapon: {{ current_user.weapon_item.name }}</p>
                    {% endif %}
                    {% if current_user.armor_item %}
                        <p class="mini">Armor: {{ current_user.armor_item.name }}</p>
                    {% endif %}
                    {% if current_user.home_item %}
                        <p class="mini">Home: {{ current_user.home_item.name }}</p>
                    {% endif %}
                </section>
            {% else %}
                <p class="muted">Create two accounts to test attacks, mugging, and the market.</p>
            {% endif %}

            <nav>
                {% if current_user %}
                    <a href="/city" class="{{ 'active' if nav == 'city' else '' }}">City</a>
                    <a href="/profile" class="{{ 'active' if nav == 'profile' else '' }}">Profile</a>
                    <a href="/gym" class="{{ 'active' if nav == 'gym' else '' }}">Gym</a>
                    <a href="/crimes" class="{{ 'active' if nav == 'crimes' else '' }}">Crimes</a>
                    <a href="/inventory" class="{{ 'active' if nav == 'inventory' else '' }}">Inventory</a>
                    <a href="/shops" class="{{ 'active' if nav == 'shops' else '' }}">Shops</a>
                    <a href="/job" class="{{ 'active' if nav == 'job' else '' }}">Job</a>
                    <a href="/bank" class="{{ 'active' if nav == 'bank' else '' }}">Bank</a>
                    <a href="/market" class="{{ 'active' if nav == 'market' else '' }}">Market</a>
                    <a href="/players" class="{{ 'active' if nav == 'players' else '' }}">Players</a>
                    <a href="/logout">Logout</a>
                {% else %}
                    <a href="/" class="{{ 'active' if nav == 'home' else '' }}">Home</a>
                    <a href="/register" class="{{ 'active' if nav == 'register' else '' }}">Register</a>
                    <a href="/login" class="{{ 'active' if nav == 'login' else '' }}">Login</a>
                {% endif %}
            </nav>
        </aside>

        <div class="main">
            {% if flash %}
                <section class="flash {{ flash.kind }}">
                    <p>{{ flash.message }}</p>
                </section>
            {% endif %}

            <main class="content">
                {% block content %}{% endblock %}
            </main>
        </div>
    </div>
</body>
</html>
