{% extends "base.html" %}
{% from '_comments.html' import render_comments %}
{% from '_featured_image.html' import featured_image_block %}
{% from '_archive.html' import archive_button, archived_chip %}
{% block title %}{{ planting.name }} — Garden{% endblock %}
{% block content %}
<nav class="breadcrumbs">
  <a href="/plantings">Plantings</a>
  <span class="sep">&rsaquo;</span>
  <span class="current">{{ planting.name }}{{ archived_chip(planting.is_archived) }}</span>
</nav>

{{ featured_image_block('planting', planting.id, planting.featured_image_path, planting.name) }}

{%- set year_options = [] -%}
{%- for y in year_list -%}{%- set _ = year_options.append([y.id, y.year|string]) -%}{%- endfor -%}

<div class="zone-header">
  <h1>
    <span class="editable" data-entity="planting" data-id="{{ planting.id }}"
          data-field="year_id" data-type="fk" data-nullable="1"
          data-options='{{ year_options | tojson }}'
          data-current-value="{{ planting.year_id or '' }}">{{ planting.year_value or '— year —' }}</span>
    —
    <span class="editable" data-entity="planting" data-id="{{ planting.id }}"
          data-field="name" data-type="text"
          data-current-value="{{ planting.name }}">{{ planting.name }}</span>
  </h1>
  <div class="zone-header-actions">
    {{ archive_button('planting', planting.id, planting.is_archived, '/plantings/' ~ planting.id) }}
  </div>
</div>

<div class="planting-meta">
  <span class="chip status-{{ planting.status or 'planted' }}">{{ planting.status or 'planted' }}</span>
  {% for target in PLANTING_STATUSES if target != (planting.status or 'planted') %}
  <form method="post" action="/plantings/{{ planting.id }}/status" class="inline">
    <input type="hidden" name="status" value="{{ target }}">
    <input type="hidden" name="next" value="/plantings/{{ planting.id }}">
    <button type="submit" class="btn ghost small">&rarr; {{ target }}</button>
  </form>
  {% endfor %}
  <span class="chip">Source:
    <span class="editable" data-entity="planting" data-id="{{ planting.id }}"
          data-field="source" data-type="text"
          data-current-value="{{ planting.source or '' }}"
          data-placeholder="— add —">{{ planting.source or '— add —' }}</span>
  </span>
</div>

<section class="section">
  <h2>Overview <a class="overview-history-link" href="/overview-history/planting/{{ planting.id }}">history</a></h2>
  <div class="overview-block current">
    <span class="editable editable-block" data-entity="planting" data-id="{{ planting.id }}"
          data-field="notes" data-type="textarea"
          data-current-value="{{ planting.notes or '' }}"
          data-placeholder="+ add overview">{{ planting.notes or '+ add overview' }}</span>
  </div>
</section>

<section class="section">
  <h2>Plants{% if group_count %} ({{ group_count }} group{{ '' if group_count == 1 else 's' }}, {{ total_qty }} total){% endif %}</h2>

  <div class="plant-detail-list" id="plant-list">
    {% for p in plants %}
    {% set back_url = '/plantings/' ~ planting.id %}
    <form method="post" action="/plants/{{ p.id }}" class="plant-editable-card" data-plant-id="{{ p.id }}">
      <input type="hidden" name="next" value="{{ back_url }}">

      <div class="plant-summary" role="button" tabindex="0">
        <div class="plant-detail-main">
          <span class="plant-detail-qty">{{ p.quantity or '1' }}&times;</span>
          <span class="plant-detail-name">
            {% if p.variety_name %}{{ p.variety_name }}{% endif %}
            {% if p.species_name %}<span class="plant-detail-species">{{ p.species_name }}</span>{% endif %}
            {% if not p.variety_name and not p.species_name %}<span class="plant-detail-tbd">TBD</span>{% endif %}
          </span>
          {% if p.status %}<span class="status status-{{ p.status | replace(' ', '-') }}">{{ p.status }}</span>{% endif %}
          {% if p.notes %}<span class="chip chip-muted" title="{{ p.notes }}">overview</span>{% endif %}
          <a href="/plants/{{ p.id }}" class="plant-detail-page-link" onclick="event.stopPropagation()">open &rsaquo;</a>
          <span class="plant-expand-caret" aria-hidden="true">&rsaquo;</span>
        </div>
        {% if p.area_id %}
        <span class="plant-detail-area">
          {% if p.area_parent %}<span class="area-dd-parent">{{ p.area_parent }}</span>{% endif %}
          <span>{{ p.area_name }}</span>
        </span>
        {% endif %}
      </div>

      <div class="plant-editor" hidden>
        <div class="plant-card-row">
          <label class="plant-field plant-qty">
            <span class="plant-label">Qty</span>
            <input type="text" name="quantity" value="{{ p.quantity }}" inputmode="numeric" placeholder="#">
          </label>
          <label class="plant-field plant-species">
            <span class="plant-label">Species</span>
            <div class="field-with-add">
              <select name="species_id" class="species-select">
                <option value="">--</option>
                {% for s in species_list %}
                <option value="{{ s.id }}" {% if p.species_id == s.id %}selected{% endif %}>{{ s.name }}</option>
                {% endfor %}
              </select>
              <button type="button" class="add-inline-btn" data-type="species" title="New species">+</button>
            </div>
          </label>
        </div>
        <div class="plant-card-row">
          <label class="plant-field plant-variety">
            <span class="plant-label">Variety</span>
            <div class="field-with-add">
              <select name="variety_id" class="variety-select">
                <option value="">--</option>
                {% for v in variety_list %}
                <option value="{{ v.id }}" data-species-id="{{ v.species_id or '' }}" {% if p.variety_id == v.id %}selected{% endif %}>{{ v.name }}</option>
                {% endfor %}
              </select>
              <button type="button" class="add-inline-btn" data-type="variety" title="New variety">+</button>
            </div>
          </label>
        </div>
        <div class="plant-card-row">
          <label class="plant-field plant-area">
            <span class="plant-label">Area</span>
            <input type="hidden" name="area_id" value="{{ p.area_id or '' }}" class="area-hidden">
            <input type="text" class="area-search" value="{{ p.area_path }}" placeholder="Search areas..." autocomplete="off">
            <ul class="area-dropdown"></ul>
          </label>
        </div>
        <div class="plant-card-row">
          <label class="plant-field plant-notes">
            <span class="plant-label">Overview <a class="overview-history-link" href="/overview-history/plant/{{ p.id }}">history</a></span>
            <textarea name="notes" rows="3" placeholder="What's important about this plant group: intent, considerations, anything you'd want a new gardener to know.">{{ p.notes }}</textarea>
          </label>
        </div>
        <div class="plant-editor-actions">
          <button type="submit" class="btn primary small">Save</button>
          <button type="button" class="btn ghost small plant-cancel">Cancel</button>
          <button type="submit" class="btn danger small" style="margin-left:auto"
                  formaction="/plants/{{ p.id }}/delete" formnovalidate
                  onclick="return confirm('Delete this plant?')">Delete</button>
        </div>
      </div>
    </form>
    {% endfor %}
  </div>

  <div class="plant-add-row">
    <button type="button" class="btn primary small" id="add-plant-btn">+ Add plant</button>
  </div>
</section>

{{ render_comments(planting_comments, 'planting', planting.id, '/plantings/' ~ planting.id, include_children=include_children, include_related=include_related, supports_children=supports_children) }}

<form method="post" action="/plantings/{{ planting.id }}/delete" class="danger-zone"
      onsubmit="return confirm('Delete planting {{ planting.name }}? Plant groups will be deleted too.');">
  <button type="submit" class="btn danger">Delete planting</button>
</form>

<!-- Inline creation modal (species/variety) -->
<div id="inline-modal" class="inline-modal" hidden>
  <div class="inline-modal-content">
    <h3 id="inline-modal-title">New</h3>
    <label id="inline-modal-species-label" class="modal-hidden">
      <span>Species</span>
      <select id="inline-modal-species-select"></select>
    </label>
    <label>
      <span>Name</span>
      <input type="text" id="inline-modal-name" placeholder="Name" autocomplete="off">
    </label>
    <div class="inline-modal-actions">
      <button type="button" id="inline-modal-save" class="btn primary small">Add</button>
      <button type="button" id="inline-modal-cancel" class="btn ghost small">Cancel</button>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.AREA_OPTIONS = {{ area_options | tojson }};
  window.SPECIES_LIST = {{ species_list | tojson }};
  window.VARIETY_LIST = {{ variety_list | tojson }};
  window.PLANTING_ID = {{ planting.id }};
  window.PLANTING_BACK_URL = "/plantings/{{ planting.id }}";
</script>
<script src="/static/plant-cards-inline.js" defer></script>
{% endblock %}