{# inline_edit.html — phase-based cell editor, ux-architect/primitives/inline-edit contract
   Context: edit_row_id (str), edit_col (ColumnContext), edit_value (str)
   Phases: Display → Editing → Saving → Success/Error → Cancel
   Rendered inside <td> via x-if in table_rows.html. No DaisyUI classes.

   v0.62 CSS refactor: inline Tailwind → semantic .dz-inline-edit-* classes
   (components/fragments.css). The 4 input variants (text/bool/badge-select/
   date) all share the same chrome — error vs default border keyed off
   `data-dz-edit-error="true"` attribute via Alpine `:data-dz-edit-error`. #}
<div class="dz-inline-edit">

  {# ── Text input (col type: text / default) ──────────────────────────────── #}
  {% if edit_col.type not in ["bool", "badge", "date"] %}
  <input type="text"
         name="{{ edit_col.key }}"
         :value='editing ? editing.originalValue : {{ edit_value | tojson }}'
         :disabled="editing && editing.saving"
         x-init="$el.focus(); $el.select()"
         @keydown.enter.prevent="commitEdit($el.value)"
         @keydown.tab.prevent="commitEdit($el.value)"
         @keydown.escape.prevent="cancelEdit()"
         :data-dz-edit-error="!!(editing && editing.error)"
         class="dz-inline-edit-input"
         aria-label="Edit {{ edit_col.label }}" />

  {# ── Boolean checkbox (col type: bool) ─────────────────────────────────── #}
  {% elif edit_col.type == "bool" %}
  <div class="dz-inline-edit-bool-row">
    <input type="checkbox"
           name="{{ edit_col.key }}"
           :checked="editing ? (editing.originalValue === 'true' || editing.originalValue === true) : {{ 'true' if edit_value else 'false' }}"
           :disabled="editing && editing.saving"
           x-init="$el.focus()"
           @change="commitEdit($el.checked)"
           @keydown.escape.prevent="cancelEdit()"
           class="dz-inline-edit-checkbox"
           aria-label="Edit {{ edit_col.label }}" />
    <label class="dz-inline-edit-bool-label">{{ edit_col.label }}</label>
  </div>

  {# ── Enum select (col type: badge) ──────────────────────────────────────── #}
  {% elif edit_col.type == "badge" %}
  <select name="{{ edit_col.key }}"
          :disabled="editing && editing.saving"
          x-init="$el.focus()"
          @change="commitEdit($el.value)"
          @keydown.escape.prevent="cancelEdit()"
          :data-dz-edit-error="!!(editing && editing.error)"
          class="dz-inline-edit-input dz-inline-edit-select"
          aria-label="Edit {{ edit_col.label }}">
    {% for opt in edit_col.filter_options %}
    <option value="{{ opt.value }}"
            {% if opt.value == (edit_value | string) %}selected{% endif %}>
      {{ opt.label }}
    </option>
    {% endfor %}
  </select>

  {# ── Date input (col type: date) ────────────────────────────────────────── #}
  {% elif edit_col.type == "date" %}
  <input type="date"
         name="{{ edit_col.key }}"
         :value='editing ? editing.originalValue : {{ edit_value | tojson }}'
         :disabled="editing && editing.saving"
         x-init="$el.focus()"
         @keydown.enter.prevent="commitEdit($el.value)"
         @keydown.tab.prevent="commitEdit($el.value)"
         @keydown.escape.prevent="cancelEdit()"
         :data-dz-edit-error="!!(editing && editing.error)"
         class="dz-inline-edit-input"
         aria-label="Edit {{ edit_col.label }}" />
  {% endif %}

  {# ── Saving spinner (phase 3: Commit) ───────────────────────────────────── #}
  <div x-show="editing && editing.saving"
       aria-hidden="true"
       class="dz-inline-edit-spinner">
    <svg class="dz-inline-edit-spinner-icon"
         viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle class="opacity-25" cx="12" cy="12" r="10"
              stroke="currentColor" stroke-width="2"/>
      <path class="opacity-75" fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
    </svg>
  </div>

  {# ── Error message (phase 4: Error) ─────────────────────────────────────── #}
  <div x-show="editing && editing.error"
       x-text="editing && editing.error"
       role="alert"
       class="dz-inline-edit-error">
  </div>

</div>