{% extends "base.html" %}
{% block content %}
{% macro render_area_nodes(nodes, selected) %}
<ul class="area-tree">
  {% for node in nodes %}
  <li>
    <label class="checkbox area-tree-row">
      <input type="checkbox" name="area_ids" value="{{ node.id }}"
             class="area-tree-cb"
             {% if node.id in selected %}checked{% endif %}
             {% if node.children %}data-has-children="1"{% endif %}>
      <span class="area-tree-name">{{ node.name }}</span>
      {% if node.children %}<span class="area-tree-count meta small">({{ node.children|length }} sub)</span>{% endif %}
    </label>
    {% if node.children %}
      {{ render_area_nodes(node.children, selected) }}
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endmacro %}

<h1>{% if station %}Edit station{% else %}New watering station{% endif %}</h1>
<form method="post" action="{% if station %}/stations/{{ station.id }}{% else %}/stations{% endif %}">
  <label>Name
    <input type="text" name="name" value="{{ station.name if station else '' }}" required autofocus placeholder="Front drip line, Back sprinkler zone A...">
  </label>
  <label>Current timer schedule
    <input type="text" name="current_schedule" value="{{ station.current_schedule if station else '' }}" placeholder="e.g. Mon/Wed/Fri 6:00am for 20min">
  </label>
  <label>Notes
    <textarea name="notes" rows="8" placeholder="Physical details: valve location, flow rate, emitter count, pressure constraints, anything useful when planning the watering schedule...">{{ station.notes if station else '' }}</textarea>
  </label>

  <fieldset class="area-tree-picker">
    <legend>Areas served by this station</legend>
    {% if not areas_tree %}
    <p class="empty small">No areas defined yet. Add areas first, then come back to assign them.</p>
    {% else %}
    <p class="meta small">Check a parent area to auto-check all sub-areas. Uncheck any individual sub-area you want to exclude.</p>
    {{ render_area_nodes(areas_tree, selected_area_ids) }}
    {% endif %}
  </fieldset>

  <div class="form-actions">
    <button type="submit" class="btn primary">Save</button>
    {% if station %}
    <a href="/stations/{{ station.id }}" class="btn ghost">Cancel</a>
    {% else %}
    <a href="/stations" class="btn ghost">Cancel</a>
    {% endif %}
  </div>
</form>
{% if station %}
<form method="post" action="/stations/{{ station.id }}/delete" class="danger-zone" onsubmit="return confirm('Delete station {{ station.name }}?')">
  <button type="submit" class="btn danger">Delete station</button>
</form>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
  (function () {
    var picker = document.querySelector('.area-tree-picker');
    if (!picker) return;
    picker.addEventListener('change', function (ev) {
      var cb = ev.target;
      if (!(cb instanceof HTMLInputElement) || cb.type !== 'checkbox') return;
      if (!cb.classList.contains('area-tree-cb')) return;
      var li = cb.closest('li');
      if (!li) return;
      var descendants = li.querySelectorAll(':scope > ul .area-tree-cb');
      descendants.forEach(function (d) { d.checked = cb.checked; });
    });
  })();
</script>
{% endblock %}