{# Floating chat-bubble + modal. Two modes:
   - Note: pill + capture widget, posts a comment (existing behavior).
   - Chat: AI assistant — Gemini with garden grounding + tools.
   Modes share the bubble + modal frame. The currently-active mode is
   tracked by the `data-mode` attr on #floating-capture-modal. #}

{% from '_capture_widget.html' import capture_widget %}

<button id="floating-capture-bubble" type="button"
        class="floating-bubble" aria-label="Add field note or chat"
        title="Add field note or chat">
  <span aria-hidden="true">✎</span>
</button>

<div id="floating-capture-modal" class="floating-modal" hidden
     data-mode="note"
     role="dialog" aria-modal="true" aria-labelledby="floating-capture-title">
  <div class="floating-modal-backdrop" data-floating-close></div>
  <div class="floating-modal-panel" role="document">
    <header class="floating-modal-head">
      <div class="floating-modal-tabs" role="tablist">
        <button type="button" class="floating-mode-tab" data-mode-tab="note"
                role="tab" aria-selected="true">Note</button>
        <button type="button" class="floating-mode-tab" data-mode-tab="chat"
                role="tab" aria-selected="false">Chat</button>
      </div>
      <button type="button" class="floating-modal-close" data-floating-close
              aria-label="Close">×</button>
    </header>

    {# ---- NOTE PANEL ---- #}
    <div class="floating-modal-body" data-mode-panel="note">
      <h2 id="floating-capture-title" class="visually-hidden">Add field note</h2>
      <div class="floating-target-row">
        <span class="floating-target-label">Attached to:</span>
        <span id="floating-target-pill" class="floating-target-pill"
              data-target-type="" data-target-id="" data-target-label="">
          <button type="button" class="floating-target-pill-body"
                  id="floating-target-pill-body"
                  aria-label="Change attachment">
            <span class="floating-target-pill-type" id="floating-target-pill-type"></span>
            <span class="floating-target-pill-name" id="floating-target-pill-name">…</span>
          </button>
          <button type="button" class="floating-target-pill-x"
                  id="floating-target-pill-x"
                  aria-label="Remove attachment (revert to current year)">×</button>
        </span>
      </div>

      <div id="floating-inferred-row" class="floating-inferred-row" hidden>
        <span class="floating-inferred-label">Will also link to:</span>
        <span id="floating-inferred-chips" class="floating-inferred-chips"></span>
      </div>

      <div id="floating-target-picker" class="floating-target-picker" hidden>
        <label class="floating-target-picker-label">
          <span id="floating-target-picker-prompt">Pick a different attachment</span>
          <select id="floating-target-picker-select">
            <option value="">— select —</option>
          </select>
        </label>
        <div class="floating-target-picker-actions">
          <button type="button" class="btn small ghost" id="floating-target-picker-cancel">Cancel</button>
        </div>
      </div>

      {{ capture_widget('floating',
                        mode='comment',
                        target_type='',
                        target_id='',
                        save_label='Post note',
                        placeholder="What's happening, what you did, observations…") }}
    </div>

    {# ---- CHAT PANEL ---- #}
    <div class="floating-modal-body chat-panel" data-mode-panel="chat" hidden>
      <div class="chat-stream" id="chat-stream" aria-live="polite">
        <p class="chat-empty">Ask a question about your garden, or anything gardening-general.</p>
      </div>
      <div class="chat-thumbs" id="chat-thumbs"></div>
      <div class="chat-input-row">
        <textarea id="chat-input" class="chat-input" rows="2"
                  placeholder="Ask anything…"></textarea>
        <div class="chat-input-actions">
          <label class="btn ghost small chat-photo-pick" title="Attach photo">
            📷
            <input id="chat-photo-input" type="file" accept="image/*" multiple hidden>
          </label>
          <button type="button" id="chat-send-btn" class="btn primary small" disabled>Send</button>
        </div>
      </div>
      <div id="chat-status" class="chat-status meta small"></div>
    </div>
  </div>
</div>