{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/game.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/game-datacenter.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">
            <span class="farm-eyebrow">SERVER CONTROL</span>
            <h1>Code Farm</h1>
            <p class="game-subtitle">Spin up projects, harvest their rewards, and build out your server rack.</p>
        </div>
        <a class="farm-guide" href="/docs/code-farm.html">How to play <span aria-hidden="true">↗</span></a>
    </header>

    {% if game_error %}
    <p class="game-error" role="alert">{{ game_error }}</p>
    {% endif %}

    <section class="game-hud" data-game-hud aria-label="Farm status">
        <div class="hud-stat">
            <span class="hud-label"><span class="hud-symbol" aria-hidden="true">◈</span> Coins</span>
            <span class="hud-value" data-hud-coins title="{{ format_exact(farm.coins) }}">{{ format_number(farm.coins) }}</span>
        </div>
        <div class="hud-stat">
            <span class="hud-label"><span class="hud-symbol" aria-hidden="true">⬡</span> 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"><span class="hud-symbol" aria-hidden="true">ϟ</span> 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 }} ({{ format_speed(farm.ci_speed) }})</span>
        </div>
        <div class="hud-stat">
            <span class="hud-label"><span class="hud-symbol" aria-hidden="true">◇</span> 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"><span class="hud-symbol" aria-hidden="true">✦</span> Stars</span>
            <span class="hud-value" data-hud-stars>{{ format_exact(farm.stars) }}</span>
            <span class="hud-sub">Legacy currency</span>
        </div>
        <div class="hud-stat" data-hud-mastery-stat{% if not farm.mastery_points_earned_total %} hidden{% endif %}>
            <span class="hud-label">Mastery</span>
            <span class="hud-value" data-hud-mastery>{{ format_exact(farm.mastery_points) }}</span>
            <span class="hud-sub">spend on Mastery upgrades</span>
        </div>
    </section>

    <p class="daily-claimed" data-underdog-banner{% if not farm.underdog_boost_seconds_remaining %} hidden{% endif %}>Underdog boost active: +25% coins for another <strong data-underdog-countdown data-seconds="{{ farm.underdog_boost_seconds_remaining }}">{{ format_duration(farm.underdog_boost_seconds_remaining) }}</strong>.</p>
    <p class="daily-claimed" data-contract-banner{% if not farm.contract_boost_seconds_remaining %} hidden{% endif %}>Contract boost active: +20% harvest coins for another <strong data-contract-countdown data-seconds="{{ farm.contract_boost_seconds_remaining }}">{{ format_duration(farm.contract_boost_seconds_remaining) }}</strong>.</p>
    <p class="daily-claimed" data-autoharvest-banner{% if not farm.auto_harvested %} hidden{% endif %}>CI Bot collected <strong data-auto-harvest-count>{{ format_exact(farm.auto_harvested) }}</strong> ready build(s) for <strong data-auto-harvest-coins>{{ format_coins(farm.auto_harvest_coins) }}</strong> while you were away.</p>
    <p class="daily-claimed" data-era-banner{% if not farm.era_active %} hidden{% endif %}>Era "<span data-era-name>{{ farm.era_name }}</span>" is running - you have earned <strong data-era-coins>{{ format_coins(farm.era_coins) }}</strong> Era coins and <strong data-era-harvests>{{ format_exact(farm.era_harvests) }}</strong> Era harvests so far.</p>

    <nav class="farm-navigation" aria-label="Farm sections"><a class="farm-nav-current" href="#datacenter">▤ Server rack</a><a href="#game-terminal" data-terminal-link hidden>&gt;_ Terminal</a><a href="#infrastructure">ϟ Infrastructure</a><a href="#perks">⌘ Perks</a><a href="#legacy">✦ Legacy</a></nav>
    <div id="datacenter" data-game-grid-host>
        {% include "_game_grid.html" %}
    </div>
    <script type="application/json" data-game-initial-state>{{ farm|tojson }}</script>
    {% include "_game_terminal.html" %}

    <div class="game-layout">
        <div class="game-main">
            <section class="game-shop" id="infrastructure">
                <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" id="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" id="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>

            <section class="game-mastery" data-mastery-section{% if not farm.mastery_points_earned_total %} hidden{% endif %}>
                <h2 class="game-section-title">Mastery</h2>
                <p class="game-legacy-note">Earned at prestige 50 and every 5 prestige after that. 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>

            <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-grant">
                <h2 class="game-section-title">Community grant</h2>
                <div data-grant-host>{% include "_game_grant.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 %}