{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/game.css') }}">
{% endblock %}
{% block content %}
<div class="game-page" data-game-root data-mode="own" data-username="{{ farm.owner_username }}">
    <header class="game-header">
        <div class="game-title">
            <h1>Code Farm</h1>
            <p class="game-subtitle">Plant projects, let them build, harvest coins and XP, complete quests, upgrade perks, and water your friends' builds.</p>
        </div>
    </header>

    <section class="game-hud" data-game-hud aria-label="Farm status">
        <div class="hud-stat">
            <span class="hud-label">Coins</span>
            <span class="hud-value" data-hud-coins>{{ farm.coins }}</span>
        </div>
        <div class="hud-stat">
            <span class="hud-label">Level</span>
            <span class="hud-value" data-hud-level>{{ farm.level }}</span>
            <div class="hud-xp-bar"><span class="hud-xp-fill" data-hud-xp-fill style="--hud-xp: {% if farm.level_span %}{{ (100 * farm.level_into / farm.level_span)|round(0, 'floor') }}{% else %}100{% endif %}%"></span></div>
            <span class="hud-sub" data-hud-xp>{% if farm.level_is_max %}max level{% else %}{{ farm.level_into }} / {{ farm.level_span }} XP{% endif %}</span>
        </div>
        <div class="hud-stat">
            <span class="hud-label">CI Tier</span>
            <span class="hud-value" data-hud-ci>{{ farm.ci_tier }}</span>
            <span class="hud-sub" data-hud-ci-label>{{ farm.ci_label }} ({{ farm.ci_speed }}x)</span>
        </div>
        <div class="hud-stat">
            <span class="hud-label">Prestige</span>
            <span class="hud-value" data-hud-prestige>{{ farm.prestige }}</span>
            <span class="hud-sub" data-hud-prestige-mult>+{{ (farm.prestige_multiplier * 100 - 100)|round|int }}% coins</span>
        </div>
        <div class="hud-stat">
            <span class="hud-label">Stars</span>
            <span class="hud-value" data-hud-stars>{{ farm.stars }}</span>
            <span class="hud-sub">spend on Legacy</span>
        </div>
    </section>

    <div class="game-layout">
        <div class="game-main">
            <h2 class="game-section-title">Your plots</h2>
            <div data-game-grid-host>
                {% include "_game_grid.html" %}
            </div>

            <section class="game-shop">
                <h2 class="game-section-title">Infrastructure</h2>
                <div data-shop-host>{% include "_game_shop.html" %}</div>
            </section>

            <section class="game-perks">
                <h2 class="game-section-title">Perks</h2>
                <div class="perk-grid" data-perk-host>{% include "_game_perks.html" %}</div>
            </section>

            <section class="game-legacy">
                <h2 class="game-section-title">Legacy (Stars)</h2>
                <p class="game-legacy-note">Earn Stars every Refactor. Legacy upgrades are permanent and survive every refactor.</p>
                <div class="perk-grid" data-legacy-host>{% include "_game_legacy.html" %}</div>
            </section>
        </div>

        <aside class="game-side">
            <section class="game-daily">
                <h2 class="game-section-title">Daily bonus</h2>
                <div data-daily-host>{% include "_game_daily.html" %}</div>
            </section>

            <section class="game-quests">
                <h2 class="game-section-title">Daily quests</h2>
                <ul class="quest-list" data-quest-host>{% include "_game_quests.html" %}</ul>
            </section>

            <section class="game-lb-section">
                <h2 class="game-section-title">Top farmers</h2>
                <ol class="game-leaderboard" data-game-leaderboard>
                    <li class="game-lb-empty">Loading.</li>
                </ol>
            </section>
        </aside>
    </div>
</div>
{% endblock %}