{% if not imports %}
  {% with
     es_icon="download",
     es_title="No imports yet",
     es_body="Drop a Schwab Transactions or Realized G/L CSV in the zone above.",
     es_primary_label="",
     es_secondary_label=""
  %}
    {% include "_empty_state_hero.html" %}
  {% endwith %}
{% else %}
  <form id="bulk-imports-form"
        hx-post="/imports/bulk-delete?page={{ page or 1 }}"
        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 class="sticky top-0 z-10 bg-bg">
          <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 }}?page={{ page or 1 }}"
                        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>
    {% if total_pages and total_pages > 1 %}
      {% set start_idx = (page - 1) * page_size + 1 %}
      {% set end_idx = start_idx + (imports|length) - 1 %}
      <div class="flex items-center justify-between mt-2 text-xs text-label-2">
        <span>
          Showing <span class="font-mono">{{ start_idx }}–{{ end_idx }}</span>
          of <span class="font-mono">{{ total_count }}</span>
        </span>
        <div class="flex items-center gap-1">
          <button type="button"
                  class="btn-ghost text-xs disabled:opacity-30 disabled:cursor-not-allowed"
                  {% if page <= 1 %}disabled{% endif %}
                  hx-get="/imports/_legacy_page?page={{ page - 1 }}"
                  hx-target="#imports-table"
                  hx-swap="innerHTML"
                  hx-select="#imports-table > *">
            ← Prev
          </button>
          <span class="px-2 font-mono">Page {{ page }} / {{ total_pages }}</span>
          <button type="button"
                  class="btn-ghost text-xs disabled:opacity-30 disabled:cursor-not-allowed"
                  {% if page >= total_pages %}disabled{% endif %}
                  hx-get="/imports/_legacy_page?page={{ page + 1 }}"
                  hx-target="#imports-table"
                  hx-swap="innerHTML"
                  hx-select="#imports-table > *">
            Next →
          </button>
        </div>
      </div>
    {% endif %}
  </form>
{% endif %}