{# Bulk-code modal body: vendor typeahead (a change repopulates the default account via a
   whole-form swap), status select, and the expense-account grid. Each field inlines the
   validated-field wrapper (label + error <p>) and pulls its control in from the shared
   component partials; all data comes from the form view-model. #}
<div class="space-y-4 p-4">
  <div class="grid grid-cols-2 gap-4">
    <div {{ vendor.changed_attrs|safe }}>
      <div class="{{ vendor.field_classes }}">
        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Vendor</label>
        {% with x_data=vendor.ta.x_data x_model=vendor.ta.x_model key=vendor.ta.key disabled=vendor.ta.disabled a_class=vendor.ta.a_class a_xinit=vendor.ta.a_xinit search_class=vendor.ta.search_class placeholder=vendor.ta.placeholder hidden_attrs=vendor.ta.hidden_attrs %}{% include "templates/components/typeahead.html" %}{% endwith %}
        <p class="mt-2 text-xs text-red-600 dark:text-red-500 h-4">{{ vendor.error }}</p>
      </div>
    </div>
    <div>
      <div class="{{ status.field_classes }}">
        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status</label>
        {% with name=status.name classes=status.classes attrs=status.attrs options=status.options %}{% include "templates/components/select.html" %}{% endwith %}
        <p class="mt-2 text-xs text-red-600 dark:text-red-500 h-4">{{ status.error }}</p>
      </div>
    </div>
    <div class="col-span-2 pt-4">
      <h3 class="text-lg font-medium mb-3">Expense Accounts</h3>
      <div class="{{ accounts.field_classes }}">
        <div id="account-entries" class="space-y-3">{% include "templates/transaction-bulk-code/account-grid.html" %}</div>
        <p class="mt-2 text-xs text-red-600 dark:text-red-500 h-4">{{ accounts.error }}</p>
      </div>
    </div>
  </div>
</div>