{% 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-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 %}