{% macro comment_toggle_url(target_type, target_id, include_children, include_related, flip) %}
{%- set base = '/' ~ ({'area':'areas','planting':'plantings','species':'species','variety':'varieties','station':'stations','year':'years','plant':'plants'}[target_type]) ~ '/' ~ target_id -%}
{%- if flip == 'children' -%}
{{ base }}?children={{ 0 if include_children else 1 }}{% if include_related %}&related=1{% endif %}#commentary
{%- elif flip == 'related' -%}
{{ base }}?{% if include_children %}children=1&{% endif %}related={{ 0 if include_related else 1 }}#commentary
{%- endif -%}
{% endmacro %}

{% macro render_comments(comments, target_type, target_id, back_url,
                         include_children=true, include_related=false,
                         supports_children=true) %}
{% set next_url = back_url ~ ('&' if '?' in back_url else '?') ~ ('children=' ~ (1 if include_children else 0) ~ '&related=' ~ (1 if include_related else 0)) ~ '#commentary' %}
<section id="commentary" class="section commentary">
  <h2>Field notes <a class="overview-history-link" href="/timeline/{{ target_type }}/{{ target_id }}">timeline</a></h2>

  <div class="comment-toggles">
    {% if supports_children %}
    <a href="{{ comment_toggle_url(target_type, target_id, include_children, include_related, 'children') }}"
       class="comment-toggle {% if include_children %}on{% else %}off{% endif %}">
      {% if include_children %}✓{% else %}○{% endif %} child notes
    </a>
    {% endif %}
    <a href="{{ comment_toggle_url(target_type, target_id, include_children, include_related, 'related') }}"
       class="comment-toggle {% if include_related %}on{% else %}off{% endif %}">
      {% if include_related %}✓{% else %}○{% endif %} related notes
    </a>
  </div>

  {% if comments %}
  <ul class="comment-list">
    {% for c in comments %}
    <li id="comment-{{ c.id }}" class="comment{% if not c.is_primary %} comment-indirect{% endif %}{% if c.is_archived %} is-archived{% endif %}">
      <div class="comment-head">
        <span class="comment-title">
          <time class="comment-date">{{ c.comment_date }}</time>
          <span class="comment-dash">—</span>
          {% if c.primary_url %}
          <a href="{{ c.primary_url }}" class="chip type-{{ c.primary_type }}">{{ c.primary_type }}: {{ c.primary_short_label }}</a>
          {% endif %}
          {% if c.kind %}<span class="chip-kind kind-{{ c.kind }}">{{ c.kind }}</span>{% endif %}
          {% if c.is_archived %}<span class="archived-chip">Archived</span>{% endif %}
        </span>
        <div class="comment-actions">
          <a href="/comments/{{ c.id }}/edit?next={{ next_url }}" class="link">edit</a>
          {% if c.is_archived %}
          <form method="post" action="/unarchive/comment/{{ c.id }}" class="inline">
            <input type="hidden" name="next" value="{{ next_url }}">
            <button type="submit" class="link">unarchive</button>
          </form>
          {% else %}
          <form method="post" action="/archive/comment/{{ c.id }}" class="inline">
            <input type="hidden" name="next" value="{{ next_url }}">
            <button type="submit" class="link">archive</button>
          </form>
          {% endif %}
          <form method="post" action="/comments/{{ c.id }}/delete" class="inline" onsubmit="return confirm('Delete this note?')">
            <input type="hidden" name="next" value="{{ next_url }}">
            <button type="submit" class="link danger">delete</button>
          </form>
        </div>
      </div>
      {% if c.body %}<div class="comment-body">{{ c.body }}</div>{% endif %}
      {% if c.audio_path %}
      <audio class="comment-audio" controls preload="none" src="/notes/{{ c.audio_path }}"></audio>
      {% endif %}
      {% if c.photos %}
      <div class="comment-photos">
        {% for p in c.photos %}
        <a href="/notes/{{ p }}" target="_blank" rel="noopener" class="comment-photo-thumb">
          <img src="/notes/{{ p }}" alt="photo" loading="lazy">
        </a>
        {% endfor %}
      </div>
      {% endif %}
      {% if c.other_targets %}
      <div class="comment-also">
        {% for t in c.other_targets %}
        <span class="chip-pill type-{{ t.type }}" title="{{ t.type }}: {{ t.label }}">
          <a href="{{ t.url }}" class="chip-pill-link">{{ t.short_label }}</a>
          <form method="post" action="/comments/{{ c.id }}/targets/{{ t.type }}/{{ t.id }}/delete" class="chip-pill-form">
            <input type="hidden" name="next" value="{{ next_url }}">
            <button type="submit" class="chip-pill-remove" aria-label="Remove link to {{ t.label }}">×</button>
          </form>
        </span>
        {% endfor %}
      </div>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="empty small">No notes yet.</p>
  {% endif %}
</section>
{% endmacro %}