{% 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="view" data-username="{{ farm.owner_username }}">
    <header class="game-header">
        <div class="game-title">
            <h1>{{ farm.owner_username }}'s Code Farm</h1>
            <p class="game-subtitle">Water their growing builds to speed them up and earn coins yourself.</p>
        </div>
        <a href="/game" class="btn btn-sm">Back to your farm</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">Level</span>
            <span class="hud-value" data-hud-level>{{ farm.level }}</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 }}</span>
        </div>
        <div class="hud-stat">
            <span class="hud-label">Harvests</span>
            <span class="hud-value" data-hud-harvests>{{ format_exact(farm.total_harvests) }}</span>
        </div>
    </section>

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