{# Shared notes panel partial — included by _row_detail.html and detail.html.
   Renders a form with a notes textarea + save button wired to HTMX.

   Variables expected in context:
     job         — the job Row (must have .dedup_key, .notes)
     notes_saved — optional bool; True shows a brief confirmation badge
#}
{% set key_safe = job.dedup_key | urlencode | replace('%', '') %}
<div id="notes-panel-{{ key_safe }}"
     class="bg-slate-800/40 rounded-lg border border-slate-700 p-3">
  <h3 class="text-xs font-semibold text-slate-400 mb-2">
    Notes
    {% if notes_saved %}
      <span class="ml-2 text-emerald-400 font-normal">&#10003; Saved</span>
    {% endif %}
  </h3>
  <form name="notes">
    <textarea name="notes"
              rows="4"
              placeholder="Add notes about this job..."
              class="w-full bg-slate-900 text-slate-300 text-sm rounded border border-slate-700 p-3 focus:outline-none focus:border-indigo-500 min-h-[80px] resize-y">{{ job.notes or "" }}</textarea>
    <div class="flex gap-2 mt-1">
      <button type="button"
              hx-post="{{ url_for('jobs.save_notes', dedup_key=job.dedup_key) }}"
              hx-include="closest form"
              hx-target="#notes-panel-{{ key_safe }}"
              hx-swap="outerHTML"
              hx-disable-elt="this"
              class="px-3 py-1 bg-emerald-600 hover:bg-emerald-500 text-white text-xs rounded transition-colors disabled:opacity-50">
        Save Notes
        <span class="htmx-indicator ml-1 inline-flex items-center gap-1">
          <span class="inline-block w-3 h-3 border-2 border-slate-400 border-t-transparent rounded-full animate-spin"></span>
        </span>
      </button>
    </div>
  </form>
</div>