{% 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>
        {% if farm.mastery_points_earned_total %}
        <div class="hud-stat">
            <span class="hud-label">Mastery</span>
            <span class="hud-value" data-hud-mastery>{{ farm.mastery_points }}</span>
            <span class="hud-sub">spend on Mastery upgrades</span>
        </div>
        {% endif %}
    </section>

    {% if farm.underdog_boost_seconds_remaining %}
    <p class="daily-claimed" data-underdog-banner>Underdog boost active: +25% coins for a while after raiding a much richer farm.</p>
    {% endif %}
    {% if farm.era_active %}
    <p class="daily-claimed" data-era-banner>Era "{{ farm.era_name }}" is running - you have earned <strong data-era-coins>{{ farm.era_coins }}</strong> Era coins and <strong data-era-harvests>{{ farm.era_harvests }}</strong> Era harvests so far.</p>
    {% endif %}

    <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>
                <div data-defense-host>{% include "_game_defense.html" %}</div>
                <div class="perk-grid" data-infra-host>{% include "_game_infra.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>

            {% if farm.mastery_points_earned_total %}
            <section class="game-mastery">
                <h2 class="game-section-title">Mastery</h2>
                <p class="game-legacy-note">Earned every 10 prestige past 50. Mastery upgrades open new gameplay rather than bigger numbers, and survive every refactor.</p>
                <div class="perk-grid" data-mastery-host>{% include "_game_mastery.html" %}</div>
                <div data-analytics-host>{% include "_game_analytics.html" %}</div>
            </section>
            {% endif %}

            <section class="game-cosmetics">
                <h2 class="game-section-title">Cosmetics</h2>
                <p class="game-legacy-note">Pure status, zero power.</p>
                <div class="perk-grid" data-cosmetics-host>{% include "_game_cosmetics.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">Quests &amp; contracts</h2>
                <ul class="quest-list" data-quest-host>{% include "_game_quests.html" %}</ul>
            </section>

            <section class="game-lb-section">
                <h2 class="game-section-title">Leaderboard</h2>
                <select data-lb-board aria-label="Leaderboard board">
                    <option value="score">Overall score</option>
                    <option value="prestige">Prestige</option>
                    <option value="harvests">Harvests this week</option>
                    <option value="raids">Raid efficiency</option>
                    <option value="time_to_kernel">Fastest to Kernel</option>
                    <option value="fair_play">Fair play</option>
                    <option value="era">Current Era</option>
                </select>
                <ol class="game-leaderboard" data-game-leaderboard>
                    <li class="game-lb-empty">Loading.</li>
                </ol>
            </section>
        </aside>
    </div>
</div>
{% endblock %}