{# One expense-account row, read from a loop-bound `row` view-model (account-row-vm). The
   account typeahead, location select, and remove button all reuse the shared component
   partials (typeahead.html / location-select.html / a-icon-button via its ctx); only the
   table layout is inline. The location cell (#account-location-N) swaps just itself on
   account change; the remove button swaps the whole #bulk-code-form. #}
<tr class="{{ row.tr_classes }}"{{ row.tr_attrs|safe }}>
  <input type="hidden" name="{{ row.db_id_name }}"{% if row.db_id_value %} value="{{ row.db_id_value }}"{% endif %}>
  <td class="px-4 py-2">
    <div class="{{ row.account_field_classes }}">
      <div class="flex flex-col">{% with x_data=row.account.x_data x_model=row.account.x_model key=row.account.key disabled=row.account.disabled a_class=row.account.a_class a_xinit=row.account.a_xinit search_class=row.account.search_class placeholder=row.account.placeholder hidden_attrs=row.account.hidden_attrs %}{% include "templates/components/typeahead.html" %}{% endwith %}</div>
      <p class="mt-2 text-xs text-red-600 dark:text-red-500 h-4">{{ row.account_error }}</p>
    </div>
  </td>
  <td class="px-4 py-2" id="{{ row.location_cell_id }}">
    <div class="{{ row.location_field_classes }}"{{ row.location_field_attrs|safe }}>
      {% with name=row.location.name classes=row.location.classes options=row.location.options %}{% include "templates/components/location-select.html" %}{% endwith %}
      <p class="mt-2 text-xs text-red-600 dark:text-red-500 h-4">{{ row.location_error }}</p>
    </div>
  </td>
  <td class="px-4 py-2">
    <div class="{{ row.pct_field_classes }}">
      <input {{ row.pct_attrs|safe }}>
      <p class="mt-2 text-xs text-red-600 dark:text-red-500 h-4">{{ row.pct_error }}</p>
    </div>
  </td>
  <td class="px-4 py-2 align-top"><a class="{{ row.remove.classes }}"{{ row.remove.attrs|safe }}><div class="h-4 w-4">{% include "templates/components/svg-x.html" %}</div></a></td>
</tr>