{% extends "garden/base.html" %}
{% load static %}
{% block title %}{{ bed.name }}{% endblock %}
{% block content %}
<div class="row-between"><h1>{{ bed.name }} <span class="muted">{{ year }}</span></h1>
<form method="get" class="inline">Season <input type="number" name="year" value="{{ year }}" style="width:5.5em"> <button class="btn small">Go</button></form></div>
<p class="muted">{{ bed.width_cm }}&times;{{ bed.length_cm }} cm · {{ bed.sun_hours|floatformat:0 }}h sun · <a href="{% url 'garden_detail' bed.garden.pk %}">{{ bed.garden.name }}</a></p>

<div class="editor" id="editor" data-layout="{% url 'api_layout' bed.pk %}?year={{ year }}" data-cell="{% url 'api_cell' bed.pk %}" data-solve="{% url 'api_solve' bed.pk %}" data-year="{{ year }}" data-crops="{% url 'api_crops' %}">
  <section class="panel">
    <div class="compass" id="compass"></div>
    <div id="grid" class="bedgrid" aria-label="Bed layout"></div>
  </section>
  <aside>
    <section class="panel">
      <h2>Score <span id="score" class="score">-</span></h2>
      <p class="muted" id="status">Loading layout...</p>
      <p><button class="btn" id="solve">Auto-arrange</button> <button class="btn ghost" id="preview">Preview only</button></p>
      <div id="unplaced"></div>
    </section>
    <section class="panel">
      <h2>Brush</h2>
      <div id="brush" class="brush"></div>
      <select id="more"></select>
      <p class="muted">Click a cell to paint it. Red outlines mark bad companions side by side.</p>
    </section>
    <section class="panel">
      <h2>Plan</h2>
      <form method="post" class="form compact">{% csrf_token %}{{ form.as_div }}<button class="btn small">Add to plan</button></form>
      <ul class="plain">{% for p in plantings %}<li>{{ p.crop.icon }} {{ p.crop.name }} <span class="muted">{{ p.plant_count }} plants{% if p.succession_group %} · succession {{ p.planned_date|date:"j M" }}{% endif %}</span></li>{% endfor %}</ul>
    </section>
  </aside>
</div>
<script type="module" src="{% static 'garden/bed.js' %}"></script>
{% endblock %}