{% import 'macro/accordion.html' as accordion %}

{# The bag tables are heavy (hundreds of rows/inputs), so only the accordion
   shell renders with the page; the tables are fetched from bags_tables()
   the first time the accordion is opened (see bag-missing-sync.js). #}
{{ accordion.header('Bags', 'bags-inventory', 'set-details', quantity=sidecar_bags | length, icon='archive-line', class='p-0') }}
  <div id="bags-lazy" data-bags-src="{{ url_for('set.bags_tables', id=item.fields.id) }}">
    <div class="text-center p-4">
      <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden">Loading bags…</span>
      </div>
    </div>
  </div>
{{ accordion.footer() }}