<div class="game-grid" data-game-grid>
    {% for plot in farm.plots %}
    <div class="game-plot game-plot-{{ plot.state }}{% if plot.is_golden %} game-plot-golden{% endif %}" data-slot="{{ plot.slot }}" data-state="{{ plot.state }}" data-ready-at="{{ plot.ready_at }}">
        {% if plot.state == 'empty' %}
        {% if farm.is_owner %}
        <form class="plot-plant-form" method="post" action="/game/plant" data-game-action="plant">
            <input type="hidden" name="slot" value="{{ plot.slot }}">
            <select name="crop" class="plot-crop-select" aria-label="Choose a project to build">
                {% for crop in farm.crops %}
                <option value="{{ crop.key }}"{% if crop.locked or crop.cost > farm.coins %} disabled{% endif %}{% if crop.locked %} title="{{ crop.locked_text }}"{% endif %}>{{ crop.icon }} {{ crop.name }} - {{ format_coins(crop.cost) }}{% if crop.locked_reason == 'mastery' %} (Mastery){% elif crop.locked_reason == 'era' %} (Era){% elif crop.locked %} (Lv {{ crop.min_level }}){% endif %}{% if crop.market_state == 'saturated' %} (saturated){% elif crop.market_state == 'boosted' %} (boosted){% endif %}</option>
                {% endfor %}
            </select>
            <button type="submit" class="btn btn-sm btn-primary">Plant</button>
        </form>
        {% else %}
        <span class="plot-empty-label">Empty plot</span>
        {% endif %}
        {% elif plot.state == 'growing' %}
        <span class="plot-icon" aria-hidden="true">{{ plot.crop_icon }}</span>
        <span class="plot-crop-name">{{ plot.crop_name }}</span>
        <span class="plot-timer" data-plot-timer data-ready-at="{{ plot.ready_at }}">{{ format_duration(plot.remaining_seconds) }}</span>
        <span class="plot-water-count">{{ plot.watered_count }}/{{ plot.max_waters }} &#128167;</span>
        {% if plot.can_water %}
        <form method="post" action="/game/farm/{{ farm.owner_username }}/water" data-game-action="water">
            <input type="hidden" name="slot" value="{{ plot.slot }}">
            <button type="submit" class="btn btn-sm">&#128167; Water</button>
        </form>
        {% endif %}
        {% if farm.is_owner and plot.fertilize_cost %}
        <form method="post" action="/game/fertilize" data-game-action="fertilize">
            <input type="hidden" name="slot" value="{{ plot.slot }}">
            <button type="submit" class="btn btn-sm">&#9889; Fertilize ({{ format_coins(plot.fertilize_cost) }})</button>
        </form>
        {% endif %}
        {% else %}
        <span class="plot-icon plot-ready-icon" aria-hidden="true">{{ plot.crop_icon }}</span>
        <span class="plot-crop-name">{{ plot.crop_name }}{% if plot.is_golden %} &#10024;{% endif %}</span>
        {% if plot.raided_pct %}<span class="plot-raided">Raided {{ plot.raided_pct }}%</span>{% endif %}
        {% if farm.is_owner %}
        <form method="post" action="/game/harvest" data-game-action="harvest">
            <input type="hidden" name="slot" value="{{ plot.slot }}">
            <button type="submit" class="btn btn-sm btn-primary">Harvest{% if plot.is_golden %} golden{% endif %}</button>
        </form>
        {% elif plot.can_steal %}
        <form method="post" action="/game/farm/{{ farm.owner_username }}/steal" data-game-action="steal">
            <input type="hidden" name="slot" value="{{ plot.slot }}">
            <button type="submit" class="btn btn-sm btn-danger" data-confirm="Steal this ready build?">Steal +{{ format_coins(plot.steal_coins) }}</button>
        </form>
        {% elif plot.steal_reason == 'stripped' %}
        <span class="plot-ready-label plot-steal-locked">Already stripped</span>
        {% elif plot.steal_reason == 'cooldown' %}
        <span class="plot-ready-label plot-steal-locked">Raid again in {{ format_duration(plot.steal_cooldown_seconds) }}</span>
        {% else %}
        <span class="plot-ready-label">Ready</span>
        {% endif %}
        {% endif %}
    </div>
    {% endfor %}
    {% if farm.is_owner and farm.plot_count < farm.max_plots %}
    <form class="game-plot game-plot-buy" method="post" action="/game/buy-plot" data-game-action="buy-plot">
        <button type="submit" class="btn btn-sm">+ New plot ({{ format_coins(farm.next_plot_cost) }})</button>
    </form>
    {% endif %}
</div>
