{# Bulk-code modal body: vendor typeahead (a change repopulates the default account via a
   whole-form swap), status select, and the expense-account grid. All wiring, the status
   options, and the field-wrapper classes are literal here; only data (selected values,
   resolved labels, errors) comes from the view-model. #}
<div class="space-y-4 p-4">
  <div class="grid grid-cols-2 gap-4">
    <div hx-trigger="change" hx-post="{{ urls.changed }}" hx-vals='{"op":"vendor-changed"}' hx-target="#bulk-code-form" hx-select="#bulk-code-form" hx-swap="outerHTML" hx-sync="this:replace" hx-include="closest form">
      <div class="group {% if vendor.has_error %}has-error {% endif %}">
        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Vendor</label>
        {% with width="w-96" x_data=vendor.ta.x_data x_model=vendor.ta.x_model key=vendor.ta.key disabled=vendor.ta.disabled a_xinit=vendor.ta.a_xinit 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="group {% if status.has_error %}has-error {% endif %}">
        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status</label>
        <select name="approval-status" class="bg-gray-50 border text-sm rounded-lg block p-2.5 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 group-[.has-error]:bg-red-50 group-[.has-error]:border-red-500 group-[.has-error]:text-red-900 group-[.has-error]:placeholder-red-700 group-[.has-error]:focus:ring-red-500 group-[.has-error]:dark:bg-gray-700 group-[.has-error]:focus:border-red-500 group-[.has-error]:dark:text-red-500 group-[.has-error]:dark:placeholder-red-500 group-[.has-error]:dark:border-red-500">
          <option value=""{% if not status.value %} selected{% endif %}>No Change</option>
          <option value="approved"{% if status.value = "approved" %} selected{% endif %}>Approved</option>
          <option value="unapproved"{% if status.value = "unapproved" %} selected{% endif %}>Unapproved</option>
          <option value="suppressed"{% if status.value = "suppressed" %} selected{% endif %}>Suppressed</option>
          <option value="requires-feedback"{% if status.value = "requires-feedback" %} selected{% endif %}>Client Review</option>
        </select>
        <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="group">
        <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>