{# Reusable capture widget — used by /capture (saves to /api/notes) and by
   the comment form on every entity detail page (saves to /comments).

   Usage:
     {% from '_capture_widget.html' import capture_widget %}
     {{ capture_widget('comment-area-1') }}

   The `prefix` arg becomes the id-suffix for every interactive element so
   multiple widgets can coexist on the same page. The `data-capture-root`
   attribute lets capture.js auto-discover and initialize each widget. The
   wiring (where to POST, what fields to attach) is handled by capture.js
   reading data-* attributes on the root element. #}
{% macro capture_widget(prefix, mode='capture', target_type='', target_id='', save_label='Save note', placeholder="What's going on?") %}
<div class="capture-widget"
     data-capture-root
     data-capture-prefix="{{ prefix }}"
     data-capture-mode="{{ mode }}"
     data-target-type="{{ target_type }}"
     data-target-id="{{ target_id }}">
  <div class="capture-row">
    <button id="rec-btn-{{ prefix }}" type="button" class="rec-btn" aria-pressed="false">
      <span class="rec-dot"></span>
      <span class="rec-label">Record</span>
    </button>
    <span id="rec-timer-{{ prefix }}" class="rec-timer">0:00</span>
  </div>
  <div id="rec-status-{{ prefix }}" class="rec-status muted">Tap Record to start. Tap again to stop.</div>
  <audio id="rec-preview-{{ prefix }}" controls hidden></audio>

  <label class="capture-textarea">
    <span class="muted">{% if mode == 'comment' %}Note body (typed or auto-transcribed){% else %}Notes (typed or auto-transcribed){% endif %}</span>
    <textarea id="note-text-{{ prefix }}" rows="3" placeholder="{{ placeholder }}"></textarea>
  </label>

  <div class="capture-row">
    <label class="btn ghost photo-pick">
      Take photo
      <input id="camera-input-{{ prefix }}" type="file" accept="image/*" capture="environment" multiple hidden>
    </label>
    <label class="btn ghost photo-pick">
      From gallery
      <input id="photo-input-{{ prefix }}" type="file" accept="image/*" multiple hidden>
    </label>
    <span id="photo-count-{{ prefix }}" class="muted"></span>
  </div>
  <div id="photo-drop-{{ prefix }}" class="photo-drop">
    Drag &amp; drop photos here, or paste from clipboard.
  </div>
  <div id="photo-thumbs-{{ prefix }}" class="photo-thumbs"></div>

  {% if mode == 'comment' %}
  <div class="capture-row capture-extra">
    <label class="capture-date-label">Date
      <input type="date" id="comment-date-{{ prefix }}" class="capture-date date-default-today">
    </label>
    <label class="capture-kind-label">Kind
      <select id="comment-kind-{{ prefix }}" class="capture-kind">
        {% for k in COMMENT_KINDS %}
          <option value="{{ k }}">{{ k or '—' }}</option>
        {% endfor %}
      </select>
    </label>
  </div>
  {% endif %}

  <div class="capture-row capture-actions">
    <button id="save-btn-{{ prefix }}" type="button" class="btn primary" disabled>{{ save_label }}</button>
    <button id="clear-btn-{{ prefix }}" type="button" class="btn ghost">Clear</button>
  </div>
  <div id="save-status-{{ prefix }}" class="muted save-status"></div>
</div>
{% endmacro %}