{# One snapshot-import report card (Bootstrap styled). Context: `imp` (SnapshotImport row),
   `imported_id` (highlight the just-completed import). #}

<!-- Import report card wrapper -->
<div id="import-{{ imp.id }}" class="card shadow-sm mb-3 {% if imp.id == imported_id %}border-success border-2{% endif %}">
  <!-- Card header with action badge, import ID, timestamp, source -->
  <div class="card-header d-flex align-items-center justify-content-between gap-2 flex-wrap">
    <div class="d-flex align-items-center gap-2">
      <span class="badge text-bg-secondary"><i class="bi bi-download"></i> Imported</span>
      <span class="fw-semibold">Import report #{{ imp.id }}</span>
      {% if imp.source_machine_id %}
        <span class="text-muted small">from machine <code>{{ imp.source_machine_id[:8] }}</code></span>
      {% endif %}
    </div>

    <!-- Timestamp (right-aligned, muted) -->
    <span class="text-muted small" title="{{ imp.created_at.strftime('%Y-%m-%d %H:%M:%S') if imp.created_at else '' }}">
      {{ imp.created_at.strftime('%Y-%m-%d %H:%M') if imp.created_at else '' }}
    </span>
  </div>

  <!-- Card body: counts and overwrites -->
  <div class="card-body">
    <!-- Entity counts table -->
    {% if imp.counts %}
    <div class="mb-3">
      <h6 class="text-muted small mb-2">Summary</h6>
      <div class="table-responsive">
        <table class="table table-sm table-hover mb-0">
          <thead class="table-light">
            <tr>
              <th>Entity</th>
              <th class="text-end">Inserted</th>
              <th class="text-end">Updated</th>
              <th class="text-end">Unchanged</th>
            </tr>
          </thead>
          <tbody>
            {% for entity, c in imp.counts.items() %}
            <tr>
              <td>{{ entity.replace('_', ' ') }}</td>
              <td class="text-end text-success"><strong>{{ c.inserted }}</strong></td>
              <td class="text-end text-info">{{ c.updated }}</td>
              <td class="text-end text-muted">{{ c.unchanged }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

    <!-- Overwritten records (collapsible) -->
    {% set ns = namespace(total=0) %}
    {% for entity, rows in (imp.overwrites or {}).items() %}{% set ns.total = ns.total + rows|length %}{% endfor %}
    {% if ns.total %}
    <details>
      <summary class="cursor-pointer mb-2">
        <i class="bi bi-chevron-right"></i> Overwritten local records ({{ ns.total }})
      </summary>
      <div class="mt-3">
        {% for entity, rows in imp.overwrites.items() %}
        {% if rows %}
        <h6 class="text-muted small mb-2">{{ entity.replace('_', ' ') }}</h6>
        <div class="table-responsive mb-3">
          <table class="table table-sm table-hover mb-0">
            <thead class="table-light">
              <tr>
                <th>Record</th>
                <th>Field</th>
                <th>Local (overwritten)</th>
                <th>Incoming</th>
              </tr>
            </thead>
            <tbody>
              {% for row in rows %}
              {% for field, change in row.fields.items() %}
              <tr>
                <td class="small"><code>{{ row.id or row.uuid or row.key }}</code></td>
                <td class="small text-muted">{{ field }}</td>
                <td class="small"><span class="text-danger">{{ change.local if change.local is not none else '—' }}</span></td>
                <td class="small"><span class="text-success">{{ change.incoming if change.incoming is not none else '—' }}</span></td>
              </tr>
              {% endfor %}
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% endif %}
        {% endfor %}
      </div>
    </details>
    {% else %}
    <p class="text-muted small mb-0">No local records were overwritten.</p>
    {% endif %}

    <!-- Footer note -->
    <p class="text-muted small mt-3 mb-0">
      Per-transaction category/tag changes are also recorded in the
      <a href="/rules/history" class="link-secondary">rules History</a> (action: import).
    </p>
  </div>
</div>