{# table_rows.html — inline-editable row cells, row states, Tab navigation.
   Requires: dzTable Alpine controller (editing, selected, isEditing, startEdit, toggleRow)
   Row height: 36px dense.

   v0.62 CSS refactor: inline Tailwind → semantic .dz-tr-* classes
   (components/fragments.css). Row state matrix (.is-selected /
   .is-saving / .is-error) driven by `:class="{...}"` Alpine binds —
   one-token swaps instead of 4 different `bg-/border-/opacity-`
   Tailwind expressions per modifier. #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% if table and table.rows %}
{% set _row_label_col = namespace(key="id") %}
{% for col in table.columns %}{% if col.type not in ["ref", "badge", "bool", "currency"] and _row_label_col.key == "id" %}{% set _row_label_col.key = col.key %}{% endif %}{% endfor %}
{% for item in table.rows %}
{% set _row_label = item[_row_label_col.key] | default(item.id) %}
{% set _row_label = _row_label | ref_display if _row_label is mapping else _row_label %}
<tr id="row-{{ item.id }}"
    data-dazzle-row="{{ table.entity_name }}"
    data-dz-row-id="{{ item.id }}"
    :class="{
      'is-selected': selected.has('{{ item.id }}'),
      'is-saving': editing && editing.rowId === '{{ item.id }}' && editing.saving,
      'is-error': editing && editing.rowId === '{{ item.id }}' && editing.error
    }"
    class="dz-tr-row group"
    {% if table.detail_url_template %}
    hx-get="{{ table.detail_url_template.replace('{id}', item.id | string) }}"
    hx-push-url="true"
    hx-target="body"
    hx-swap="innerHTML"
    {% endif %}>

  {# ── Checkbox cell ─────────────────────────────────────────────────────── #}
  {% if table.bulk_actions %}
  <td class="dz-tr-checkbox-cell" onclick="event.stopPropagation()">
    <label class="visually-hidden" for="row-check-{{ item.id }}">Select {{ _row_label }}</label>
    <input type="checkbox"
           id="row-check-{{ item.id }}"
           class="dz-tr-checkbox"
           :checked="selected.has('{{ item.id }}')"
           @change="toggleRow('{{ item.id }}')"
           aria-label="Select {{ _row_label }}" />
  </td>
  {% endif %}

  {# ── Data cells ────────────────────────────────────────────────────────── #}
  {% for col in table.columns %}
  {% if not col.hidden %}
  <td data-dz-col="{{ col.key }}"
      x-show="isColumnVisible('{{ col.key }}')"
      class="dz-tr-cell{% if col.type in ['currency', 'percentage'] %} is-numeric{% endif %}"
      onclick="event.stopPropagation()">

    {# ── Inline editable cell ──────────────────────────────────────────── #}
    {% if table.inline_editable and col.key in table.inline_editable %}

    {# Edit mode: input rendered via inline_edit.html #}
    <template x-if="isEditing('{{ item.id }}', '{{ col.key }}')">
      {% with edit_row_id=item.id, edit_col=col, edit_value=item[col.key] | default("") %}
      {% include 'fragments/inline_edit.html' with context %}
      {% endwith %}
    </template>

    {# Display mode: double-click to enter edit #}
    <template x-if="!isEditing('{{ item.id }}', '{{ col.key }}')">
      <span class="dz-tr-cell-display"
            {% set _edit_val = item[col.key] %}
            @dblclick='startEdit("{{ item.id }}", "{{ col.key }}", {{ (_edit_val if _edit_val is not none else "") | tojson }})'
            title="{% if _edit_val is not none %}{{ _edit_val }}{% endif %}">
        {% if col.type == "badge" %}
          {{ render_status_badge(value=item[col.key]) }}
        {% elif col.type == "bool" %}
          {{ item[col.key] | bool_icon }}
        {% elif col.type == "date" %}
          {{ item[col.key] | dateformat }}
        {% else %}
          {{ item[col.key] | default("") | truncate_text }}
        {% endif %}
      </span>
    </template>

    {# ── Non-editable cell — type-specific rendering ───────────────────── #}
    {% else %}
    {% if col.type == "badge" %}
      {{ render_status_badge(value=item[col.key]) }}
    {% elif col.type == "bool" %}
      {{ item[col.key] | bool_icon }}
    {% elif col.type == "date" %}
      {{ item[col.key] | dateformat }}
    {% elif col.type == "currency" %}
      {{ item[col.key] | currency(col.currency_code or "GBP") }}
    {% elif col.type == "sensitive" %}
      {% set raw = item[col.key] | default("") | string %}
      {% if raw | length > 4 %}{{ "****" ~ raw[-4:] }}{% elif raw %}****{% else %}{% endif %}
    {% elif col.type == "ref" %}
      {{ item.get(col.key ~ "_display", "") or (item[col.key] | ref_display) }}
    {% elif col.type == "percentage" %}
      {% set _pct_val = item[col.key] %}
      {% if _pct_val is none %}—{% else %}{{ _pct_val }}%{% endif %}
    {% else %}
      <span class="dz-tr-cell-truncate">{{ item[col.key] | default("") | truncate_text }}</span>
    {% endif %}
    {% endif %}

  </td>
  {% endif %}
  {% endfor %}

  {# ── Row actions — revealed on hover ──────────────────────────────────────── #}
  <td class="dz-tr-actions-cell" onclick="event.stopPropagation()">
    <div class="dz-tr-actions">

      {# View action #}
      {% if table.detail_url_template %}
      <a href="{{ table.detail_url_template.replace('{id}', item.id | string) }}"
         data-dazzle-action="{{ table.entity_name }}.view"
         aria-label="View {{ _row_label }}"
         class="dz-tr-action">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg">
          <path d="M7 2.5C4.5 2.5 2.5 5 2.5 7s2 4.5 4.5 4.5S11.5 9 11.5 7 9.5 2.5 7 2.5z"
                stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
          <circle cx="7" cy="7" r="1.5" stroke="currentColor" stroke-width="1.25"/>
        </svg>
      </a>

      {# Edit action #}
      <a href="{{ table.detail_url_template.replace('{id}', item.id | string) }}/edit"
         data-dazzle-action="{{ table.entity_name }}.edit"
         aria-label="Edit {{ _row_label }}"
         class="dz-tr-action">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg">
          <path d="M9.5 2.5l2 2L4 12H2v-2L9.5 2.5z"
                stroke="currentColor" stroke-width="1.25"
                stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </a>
      {% endif %}

      {# Delete action #}
      <button type="button"
              data-dazzle-action="{{ table.entity_name }}.delete"
              aria-label="Delete {{ _row_label }}"
              hx-delete="{{ table.api_endpoint }}/{{ item.id }}"
              hx-confirm="Delete this {{ table.entity_name | lower }}?"
              hx-target="closest tr"
              hx-swap="outerHTML swap:300ms"
              class="dz-tr-action is-destructive">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg">
          <path d="M2 3.5h10M5.5 3.5V2.5h3v1M5.5 6v4M8.5 6v4M3 3.5l.5 8h7l.5-8"
                stroke="currentColor" stroke-width="1.25"
                stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>
  </td>

</tr>
{% endfor %}
{% else %}
<tr>
  <td colspan="{{ (table.columns | length) + (2 if table.bulk_actions else 1) if table else 1 }}"
      class="dz-tr-empty-cell"
      data-dz-empty-kind="{{ table.empty_kind | default('collection') if table else 'collection' }}">
    {#
      Typed empty-state picker (#807).

      Pick the most specific per-case message, then fall back to the
      legacy `empty_message` (which was already populated with a
      reasonable default at compile time). Each case carries a
      different default + affordance:

        collection → "No X yet." + link to the create surface
        filtered   → "No X match the current filters." + clear-filters link
        forbidden  → "You can't see any X with your current role."
        loading    → "Couldn't load X. Try again." (fetch errored)
    #}
    {% set _kind = table.empty_kind | default('collection') if table else 'collection' %}
    {% if _kind == 'filtered' %}
      {{ (table.empty_filtered if table and table.empty_filtered else
           "No " + (table.entity_name|default('items'))|lower + " match the current filters.") }}
      {% set _has_params = table and table.filter_values %}
      {% if _has_params and request is defined %}
        <a href="{{ request.url.path }}"
           hx-get="{{ table.api_endpoint }}"
           hx-target="#{{ table.table_id }}-body"
           hx-swap="innerHTML"
           hx-push-url="{{ request.url.path }}"
           class="dz-tr-empty-link">
          Clear filters
        </a>
      {% endif %}
    {% elif _kind == 'loading' %}
      {{ "Couldn't load " + (table.entity_name|default('items'))|lower + ". Try reloading." if table
         else "Couldn't load items. Try reloading." }}
    {% elif _kind == 'forbidden' and table and table.empty_forbidden %}
      {{ table.empty_forbidden }}
    {% else %}
      {# 'collection' case OR any unknown kind — use per-case copy if
         available, otherwise the long-standing default. #}
      {{ (table.empty_collection if table and table.empty_collection else
           (table.empty_message if table and table.empty_message else
              "No " + (table.entity_name|default('items'))|lower + " found.")) }}
      {% if table and table.create_url %}
        <a href="{{ table.create_url }}" class="dz-tr-empty-link">
          Add one
        </a>
      {% endif %}
    {% endif %}
  </td>
</tr>
{% endif %}