{% extends "base.html" %}
{% from '_picker.html' import area_drilldown_picker %}
{% block content %}
{% if area %}
<nav class="breadcrumbs">
  <a href="/">Areas</a>
  <span class="sep">&rsaquo;</span>
  <a href="/areas/{{ area.id }}">{{ area.name }}</a>
  <span class="sep">&rsaquo;</span>
  <span class="current">Edit</span>
</nav>
{% endif %}
<h1>{% if area %}Edit area{% else %}New area{% endif %}</h1>
<form method="post" action="{% if area %}/areas/{{ area.id }}{% else %}/areas{% endif %}" enctype="multipart/form-data">
  <label>Name
    <input type="text" name="name" value="{{ area.name if area else '' }}" required autofocus>
  </label>
  <label>Parent area
    {{ area_drilldown_picker('parent_id', selected_parent_id, area_tree, allow_none=true, none_label='— None (top-level) —', placeholder='— None (top-level) —') }}
  </label>
  <label>Short name / abbreviation
    <input type="text" name="short_name" value="{{ area.short_name if area and area.short_name else '' }}" placeholder="e.g. BY, GP, R1 (optional, for compact display)">
  </label>
  <div class="form-row">
    <label>Length (ft)
      <input type="number" step="0.01" name="length_ft" value="{{ area.length_ft if area and area.length_ft else '' }}" placeholder="0">
    </label>
    <label>Width (ft)
      <input type="number" step="0.01" name="width_ft" value="{{ area.width_ft if area and area.width_ft else '' }}" placeholder="0">
    </label>
    <label>Garden area (sq ft)
      <input type="number" step="0.01" name="garden_area_sqft" value="{{ area.garden_area_sqft if area and area.garden_area_sqft else '' }}" placeholder="0">
    </label>
  </div>
  <fieldset class="sketch-rotation-field">
    <legend>Sketch orientation</legend>
    <p class="meta small">Rotate the sketch (in 45&deg; steps) to match how this area sits on the ground. Compass convention matches a standard satellite view: <strong>north on top, east on the right, south on bottom, west on the left</strong>. <strong>0&deg;</strong> = length runs east-west. <strong>315&deg;</strong> tilts the long axis from lower-left (SW) to upper-right (NE) &mdash; the standard alignment of this property. Try <strong>45&deg;</strong> for the opposite (NW&ndash;SE) tilt.</p>
    {%- set current_rot = (area.sketch_rotation if area and area.sketch_rotation is not none else 0) | int -%}
    <div class="rotation-radio-group">
      {% for deg in SKETCH_ROTATION_STEPS %}
      <label class="rotation-radio">
        <input type="radio" name="sketch_rotation" value="{{ deg }}" {% if current_rot == deg %}checked{% endif %}>
        <span>{{ deg }}&deg;</span>
      </label>
      {% endfor %}
    </div>
  </fieldset>
  <label>Structure &amp; features
    <textarea name="structure_features" rows="3" placeholder="Beds, containers, paths, fences, trellises, etc.">{{ area.structure_features if area and area.structure_features else '' }}</textarea>
  </label>
  <label>Sunlight
    <textarea name="sunlight" rows="2" placeholder="Sun/shade pattern through the day.">{{ area.sunlight if area and area.sunlight else '' }}</textarea>
  </label>
  <label>Soil &amp; environment
    <textarea name="soil_environment" rows="2" placeholder="Soil type, drainage, wildlife, pests, microclimate.">{{ area.soil_environment if area and area.soil_environment else '' }}</textarea>
  </label>
  <fieldset class="featured-image-field">
    <legend>Featured image</legend>
    {% if area and area.featured_image_path %}
    <div class="featured-image-current">
      <img src="/notes/{{ area.featured_image_path }}" alt="Current featured image for {{ area.name }}">
      <label class="checkbox">
        <input type="checkbox" name="remove_featured_image" value="1">
        <span>Remove current image</span>
      </label>
    </div>
    <p class="meta small">Choose a new file below to replace the current image.</p>
    {% endif %}
    <input type="file" name="featured_image" accept="image/*">
  </fieldset>
  <label>Overview
    {% if area %}<a class="overview-history-link" href="/overview-history/area/{{ area.id }}">history</a>{% endif %}
    <textarea name="notes" rows="10" placeholder="What you'd want a new gardener to know about this area: how you use it, sun/soil/drainage, intent. Edit as your understanding evolves. For dated observations, use Commentary on the area page.">{{ area.notes if area else '' }}</textarea>
  </label>
  <div class="form-actions">
    <button type="submit" class="btn primary">Save</button>
    {% if area %}
    <a href="/areas/{{ area.id }}" class="btn ghost">Cancel</a>
    {% else %}
    <a href="/" class="btn ghost">Cancel</a>
    {% endif %}
  </div>
</form>
{% if area %}
<form method="post" action="/areas/{{ area.id }}/delete" class="danger-zone" onsubmit="return confirm('Delete {{ area.name }} AND all its sub-areas AND all their plants?')">
  <button type="submit" class="btn danger">Delete area (cascade)</button>
</form>
{% endif %}
{% endblock %}
{% block scripts %}
<script src="/static/area-drilldown.js" defer></script>
{% endblock %}