{% import "macros.html" as ui %}
{# The planner (plans → features → tasks, drawn as a graph) and the notes (guidelines, memory).
   Buttons open modals (/notes/form); every form posts to /notes/<action>, which calls the same methods
   as the MCP tools, with the source "wiki", and returns this page redrawn. #}
{% macro open_form(query, label, extra="") -%}
<button type="button" class="notes-button {{ extra }}" hx-target="#notes-dialog-body"
        hx-get="/notes/form?{{ query }}&tab={{ tab }}&filter_type={{ note_type }}&filter_status={{ note_status }}&plans={{ plans }}&selected={{ selected }}">{{ label }}</button>
{%- endmacro %}

<div class="notes-page">
  {{ ui.view_header("notes", "AGENT NOTES",
     "Plan the work and keep what the project knows. Agents do it through the MCP tools; you can do it here, with the same functions.") }}
  <nav class="notes-tabs">
    {% for name, label in (("planner", "Planner"), ("guidelines", "Guidelines"), ("memory", "Memory")) %}
    <a class="notes-tab{% if tab == name %} current{% endif %}" {{ ui.nav_url("/notes?tab=" ~ name) }}>{{ label }}</a>
    {% endfor %}
  </nav>
  {% if error %}<p class="notes-error">{{ error }}</p>{% endif %}

  {% if tab == "planner" %}
  {# Plans on top: a click adds a plan to the chosen ones or takes it out. #}
  {% include "notes_cards.html" %}
  <div class="graph-toolbar">
    <div class="graph-legend">
      {% for level in ("plan", "feature", "task") %}<span><i class="level-icon level-{{ level }}"></i>{{ level }}</span>{% endfor %}
      <span class="legend-gap"></span>
      {% for state, label in (("todo", "to do"), ("doing", "in progress"), ("blocked", "blocked"), ("late", "late"), ("done", "done")) %}
      <span><i class="notes-swatch state-{{ state }}"></i>{{ label }}</span>
      {% endfor %}
      <span><i class="line imports"></i>waits for (hover: why)</span>
    </div>
  </div>
  {# Left: the chosen plans; right: the plan, feature or task clicked (the first chosen plan at first). #}
  <div class="planner-layout">
    {{ ui.view_canvas("planner", data_url) }}
    <div class="planner-splitter" role="separator" aria-orientation="vertical" title="Drag to make one side wider"></div>
    <aside id="planner-detail" class="planner-detail"
           {% if selected %}hx-get="/notes/form?item={{ selected }}&panel=1&tab=planner&plans={{ plans }}" hx-trigger="load"{% endif %}>
      <p class="empty">{% if selected %}Loading…{% else %}Choose a plan above.{% endif %}</p>
    </aside>
  </div>

  {% else %}
  <div class="graph-toolbar">
    {{ open_form("kind=note&type=" ~ note_groups[tab][0], "New note", "primary") }}
    <form class="notes-filter" hx-get="/notes" hx-target="#content" hx-push-url="true" hx-trigger="change">
      <input type="hidden" name="tab" value="{{ tab }}">
      <label>Type
        <select name="type">
          <option value="">All</option>
          {% for name in note_groups[tab] %}<option value="{{ name }}"{% if name == note_type %} selected{% endif %}>{{ name }}</option>{% endfor %}
        </select>
      </label>
      <label>Status
        <select name="status">
          {% for value, label in (("active", "Active"), ("superseded", "Superseded"), ("", "All")) %}
          <option value="{{ value }}"{% if value == note_status %} selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
    </form>
  </div>
  {# What the group is for; the ? opens, on hover, when to write each type, with an example. #}
  <div class="notes-help">
    <span class="help-hover" tabindex="0" aria-label="When to write each type"><i class="help-icon"></i>
      <span class="help-box" role="tooltip">
        <dl>
          {% for name in note_groups[tab] %}
          <dt>{{ name }}</dt><dd>{{ note_types[name] }} {{ note_type_uses[name][0] }}<em>E.g. “{{ note_type_uses[name][1] }}”</em></dd>
          {% endfor %}
        </dl>
        <span class="help-box-foot">{{ not_a_note }}</span>
      </span>
    </span>
    <strong>{{ note_group_texts[tab][0] }}</strong> {{ note_group_texts[tab][1] }}
  </div>
  {# Left: the notes of the group as a tree (types, then their notes); right: the note clicked. #}
  <div class="planner-layout">
    {% include "notes_tree.html" %}
    <div class="planner-splitter" role="separator" aria-orientation="vertical" title="Drag to make one side wider"></div>
    <aside id="planner-detail" class="planner-detail"
           {% if selected %}hx-get="/notes/form?note={{ selected[5:] }}&panel=1&tab={{ tab }}&selected={{ selected }}" hx-trigger="load"{% endif %}>
      <p class="empty">{% if selected %}Loading…{% else %}Click a note to read and change it.{% endif %}</p>
    </aside>
  </div>
  {% endif %}

  <dialog id="notes-dialog" class="notes-dialog"><div id="notes-dialog-body"></div></dialog>
</div>