{# Active-filter chips — each removes itself by swapping to a narrower URL. #}
{% if chips %}
<div class="chips mb-3">
  {% for chip in chips %}
  <a class="chip" href="/transactions/table?{{ chip.remove }}"
     hx-get="/transactions/table?{{ chip.remove }}"
     hx-target="#txn-table" hx-swap="innerHTML"
     hx-push-url="/{% if chip.remove %}?{{ chip.remove }}{% endif %}">
    {{ chip.label }} <i class="bi bi-x" aria-hidden="true"></i>
  </a>
  {% endfor %}
  <a class="chip chip-clear" href="/"
     hx-get="/transactions/table" hx-target="#txn-table" hx-swap="innerHTML"
     hx-push-url="/">Clear all</a>
</div>
{% endif %}

{% if not page.total and not chips %}
{# First-run hint: an empty database with no filters applied (spec FR10.1). #}
<div class="first-run-hint">
  <p><strong>No transactions yet.</strong> Import your history from a legacy abn-analyst database with:</p>
  <p><code>abn-combined migrate-legacy /path/to/abn_analyst.db</code></p>
  <p>…or use the <a href="/upload">Upload</a> or <a href="/download">Download</a> tabs.</p>
</div>
{% endif %}

<p class="txn-count">
  {% if page.total %}
  Showing <strong>{{ page.start_index }}–{{ page.end_index }}</strong> of <strong>{{ page.total }}</strong> transactions
  {% elif chips %}
  No transactions match these filters.
  {% endif %}
</p>

<!-- Summary statistics for the current filtered view -->
{% if page.total %}
<div class="card bg-light border-0 mb-3">
  <div class="card-body py-2 px-3">
    <div class="d-flex flex-wrap justify-content-between align-items-center" style="gap: 0.5rem 1.5rem;">
      <span>
        <span class="text-muted">Transactions:</span>
        <span class="fw-semibold">{{ page.total }}</span>
      </span>
      <span>
        <span class="text-muted">Total:</span>
        <span class="fw-semibold text-end {% if summary.total_amount < 0 %}neg{% else %}pos{% endif %}">
          {{ '%.2f'|format(summary.total_amount) }}
        </span>
      </span>
      {% if summary.date_from and summary.date_to %}
      <span>
        <span class="text-muted">Date range:</span>
        <span class="fw-semibold">
          {{ summary.date_from.isoformat() }}
          {% if summary.date_to != summary.date_from %} – {{ summary.date_to.isoformat() }}{% endif %}
        </span>
      </span>
      {% endif %}
    </div>
  </div>
</div>
{% else %}
<div class="alert alert-light border mb-3 py-2 px-3">
  No transactions{% if chips %} match these filters{% endif %}.
</div>
{% endif %}

{% macro sort_th(column, label, extra_class="") %}
{% set state = filter.sort_state_for_column(column) %}
<th class="sortable-th {{ extra_class }} {% if state %}sort-active{% endif %}">
  <a href="/transactions/table?{{ filter.sort_url_for_column(column) }}"
     hx-get="/transactions/table?{{ filter.sort_url_for_column(column) }}"
     hx-target="#txn-table" hx-swap="innerHTML"
     hx-push-url="/?{{ filter.sort_url_for_column(column) }}"
     aria-label="Sort by {{ label }}">
    {{ label }}
    {% if state == 'asc' %}<i class="bi bi-chevron-up sort-icon"></i>
    {% elif state == 'desc' %}<i class="bi bi-chevron-down sort-icon"></i>
    {% else %}<i class="bi bi-chevron-expand sort-icon"></i>
    {% endif %}
  </a>
</th>
{% endmacro %}

<div x-data='{ selected: [], pageIds: [{% for row in rows %}{{ row.txn.id | tojson }}{% if not loop.last %}, {% endif %}{% endfor %}] }'>
  <!-- Bulk-tag action bar: appears once at least one row is checked. Tags are
       merged (additive, de-duplicated) into each selected transaction's
       existing effective tags — never a wholesale replace — see
       api/transactions.py:bulk_set_tags. -->
  <div class="bulk-action-bar d-flex flex-wrap align-items-center gap-2 mb-2 p-2"
       x-show="selected.length > 0" x-cloak>
    <span class="fw-semibold" x-text="selected.length + ' selected'"></span>
    <form class="d-flex align-items-center gap-2 flex-grow-1"
          hx-post="/transactions/bulk-tags"
          hx-target="#txn-table" hx-swap="innerHTML"
          @htmx:after-request="if ($event.detail.successful) selected = []"
          hx-on::before-request="this.querySelector('.save-error').hidden = true"
          hx-on::response-error="this.querySelector('.save-error').hidden = false"
          hx-on::send-error="this.querySelector('.save-error').hidden = false">
      <!-- hx-vals' "js:" prefix evaluates in the global scope, not Alpine's
           component scope, so it can't see `selected` — a real hidden field
           kept in sync via x-bind, submitted as normal form data, works
           reliably instead. -->
      <input type="hidden" name="transaction_ids" x-bind:value="JSON.stringify(selected)">
      <input name="tags" list="known-tags" class="form-control form-control-sm" style="max-width: 260px;"
             placeholder="Add tag(s), comma-separated" autocomplete="off" required>
      <button type="submit" class="btn btn-sm btn-primary">Apply to selected</button>
      <small class="save-error text-danger text-nowrap" hidden role="alert">Save failed — try again</small>
    </form>
    <button type="button" class="btn btn-sm btn-outline-secondary" @click="selected = []">Clear selection</button>
  </div>

  <table class="table table-hover align-middle txn-table">
    <thead>
      <tr>
        <th style="width: 32px;">
          <input type="checkbox" class="form-check-input" aria-label="Select all on this page"
                 :checked="pageIds.length > 0 && selected.length >= pageIds.length"
                 @change="selected = $event.target.checked ? [...pageIds] : []">
        </th>
        <th style="width: 40px;"></th>
        {{ sort_th('date', 'Date') }}
        <th>Account</th>
        {{ sort_th('description', 'Description') }}
        {{ sort_th('amount', 'Amount', 'num') }}
        {{ sort_th('category', 'Category') }}
        {{ sort_th('tags', 'Tags') }}
        <th>Source</th>
        <th style="width: 60px;"></th>
      </tr>
    </thead>
    {% for row in rows %}
      {% include "_transactions_row.html" %}
    {% else %}
    <tbody><tr><td colspan="10" class="text-center text-muted py-4"><em>Nothing here.</em></td></tr></tbody>
    {% endfor %}
  </table>
</div>

<!-- Table footer: transaction count and net total -->
{% if page.total %}
<div class="px-3 py-2 bg-light border-top" style="font-size: 0.9rem;">
  <div class="d-flex justify-content-between">
    <span><strong>{{ page.total }} transaction{{ 's' if page.total != 1 else '' }}</strong></span>
    <span class="text-muted">{{ page.start_index }}–{{ page.end_index }} shown</span>
  </div>
</div>
{% endif %}

<!-- Pagination -->
{% if page.pages > 1 %}
<nav class="pagination" aria-label="Pagination">
  <a role="button" class="btn btn-sm btn-outline-secondary {% if not page.has_prev %}disabled{% endif %}"
     {% if page.has_prev %}
     hx-get="/transactions/table?{{ filter.with_page(page.page - 1).to_query_string() }}"
     hx-target="#txn-table" hx-swap="innerHTML"
     hx-push-url="/?{{ filter.with_page(page.page - 1).to_query_string() }}"
     href="/?{{ filter.with_page(page.page - 1).to_query_string() }}"
     {% endif %}>
    <i class="bi bi-chevron-left"></i> Prev
  </a>
  <span class="page-indicator">Page {{ page.page }} / {{ page.pages }}</span>
  <a role="button" class="btn btn-sm btn-outline-secondary {% if not page.has_next %}disabled{% endif %}"
     {% if page.has_next %}
     hx-get="/transactions/table?{{ filter.with_page(page.page + 1).to_query_string() }}"
     hx-target="#txn-table" hx-swap="innerHTML"
     hx-push-url="/?{{ filter.with_page(page.page + 1).to_query_string() }}"
     href="/?{{ filter.with_page(page.page + 1).to_query_string() }}"
     {% endif %}>
    Next <i class="bi bi-chevron-right"></i>
  </a>
</nav>
{% endif %}