{% if not imports %}
  <div class="panel text-label-2 text-sm">No imports yet.</div>
{% else %}
  <form id="bulk-imports-form"
        hx-post="/imports/bulk-delete"
        hx-target="#imports-table"
        hx-swap="innerHTML"
        hx-confirm="Remove the selected imports? Wash sales will be recomputed."
        x-data="{
          count: 0,
          allSelected: false,
          refresh() {
            const boxes = this.$root.querySelectorAll('input[name=ids]');
            const checked = this.$root.querySelectorAll('input[name=ids]:checked');
            this.count = checked.length;
            this.allSelected = boxes.length > 0 && checked.length === boxes.length;
          },
          toggleAll(ev) {
            this.$root.querySelectorAll('input[name=ids]').forEach(c => { c.checked = ev.target.checked; });
            this.refresh();
          }
        }"
        x-init="refresh()">
    <div class="flex items-center justify-end mb-2">
      <button type="submit"
              class="btn-ghost text-confirmed border-confirmed/30 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
              :disabled="count === 0"
              x-text="count === 0 ? 'Delete selected' : 'Delete ' + count + ' selected'">
        Delete selected
      </button>
    </div>
    <div class="panel overflow-x-auto" style="padding:0;">
      <table class="net-table">
        <thead>
          <tr>
            <th></th>
            <th class="px-3 py-2">
              <input type="checkbox"
                     aria-label="Select all imports"
                     :checked="allSelected"
                     @change="toggleAll($event)"/>
            </th>
            <th>ID</th>
            <th>Imported at</th>
            <th>Account</th>
            <th>Filename</th>
            <th>Summary</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for imp in imports %}
            {% set has_dates = imp.min_trade_date and imp.max_trade_date %}
            {% set total_units = (imp.trade_count or 0) + (imp.gl_lot_count or 0) + (imp.cash_event_count or 0) %}
            <tr id="import-row-{{ imp.id }}" class="align-top">
              <td class="px-3 py-2">
                <button class="text-label-3 hover:text-primary text-xs"
                        hx-get="/imports/{{ imp.id }}/detail"
                        hx-target="#import-detail-{{ imp.id }}"
                        hx-swap="innerHTML"
                        onclick="this.classList.toggle('rotate-90')">▸</button>
              </td>
              <td class="px-3 py-2">
                <input type="checkbox"
                       name="ids"
                       value="{{ imp.id }}"
                       aria-label="Select import #{{ imp.id }}"
                       @change="refresh()"/>
              </td>
              <td class="px-3 py-2 font-mono">#{{ imp.id }}</td>
              <td class="px-3 py-2 font-mono text-xs">{{ imp.imported_at.strftime("%Y-%m-%d %H:%M") }}</td>
              <td class="px-3 py-2">{{ imp.account_display }}</td>
              <td class="px-3 py-2">{{ imp.csv_filename }}</td>
              <td class="px-3 py-2 text-xs text-label-2">
                {%- if has_dates -%}
                  {{ imp.min_trade_date }} → {{ imp.max_trade_date }} ·
                {%- endif -%}
                {%- if imp.trade_count -%}
                  {{ imp.trade_count }} trade{{ "s" if imp.trade_count != 1 else "" }}
                {%- endif -%}
                {%- if imp.gl_lot_count -%}
                  {%- if imp.trade_count %} · {% endif -%}
                  {{ imp.gl_lot_count }} G/L lot{{ "s" if imp.gl_lot_count != 1 else "" }}
                {%- endif -%}
                {%- if imp.cash_event_count -%}
                  {%- if imp.trade_count or imp.gl_lot_count %} · {% endif -%}
                  {{ imp.cash_event_count }} cash event{{ "s" if imp.cash_event_count != 1 else "" }}
                {%- endif -%}
                {%- if imp.duplicate_trades -%}
                  {%- if imp.trade_count or imp.gl_lot_count or imp.cash_event_count %} · {% endif -%}
                  <span class="text-label-2">skipped {{ imp.duplicate_trades }} duplicate{{ "s" if imp.duplicate_trades != 1 else "" }}</span>
                {%- endif -%}
                {%- if not total_units and not imp.duplicate_trades -%}<span class="text-label-2">no records</span>{%- endif -%}
              </td>
              <td class="px-3 py-2">
                <button class="btn-ghost text-confirmed border-confirmed/30"
                        hx-delete="/imports/{{ imp.id }}"
                        hx-confirm="Remove import #{{ imp.id }} ({{ imp.trade_count }} trades, {{ imp.gl_lot_count }} G/L lots, {{ imp.cash_event_count or 0 }} cash events)? Wash sales will be recomputed."
                        hx-target="#imports-table"
                        hx-swap="innerHTML">
                  Remove
                </button>
              </td>
            </tr>
            <tr id="import-detail-{{ imp.id }}" class="bg-surface-2">
              <!-- Empty initially; HTMX swaps in _imports_detail_row.html on first expand. -->
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </form>
{% endif %}