<div class="overflow-x-auto">
  <table class="w-full text-sm" style="color: var(--text-primary);">
    <thead>
      <tr style="border-bottom: 1px solid var(--border-default);">
        <th class="text-left py-2 px-3 font-medium" style="color: var(--text-secondary);">Scan Date</th>
        <th class="text-left py-2 px-3 font-medium" style="color: var(--text-secondary);">Frameworks</th>
        <th class="text-left py-2 px-3 font-medium" style="color: var(--text-secondary);">Score</th>
        <th class="text-left py-2 px-3 font-medium" style="color: var(--text-secondary);">Delta</th>
        <th class="text-left py-2 px-3 font-medium" style="color: var(--text-secondary);">Severity</th>
        <th class="text-left py-2 px-3 font-medium" style="color: var(--text-secondary);">Type</th>
      </tr>
    </thead>
    <tbody>
      {% for scan in scans %}
      <tr style="border-bottom: 1px solid var(--border-default);">
        <td class="py-2 px-3">{{ scan.scanned_at }}</td>
        <td class="py-2 px-3">{{ scan.frameworks | join(", ") }}</td>
        <td class="py-2 px-3">{{ scan.score }}%</td>
        <td class="py-2 px-3">
          {% if scan.score_delta is not none and scan.score_delta > 0 %}
            <span style="color: #16a34a;">+{{ scan.score_delta }}%</span>
          {% elif scan.score_delta is not none and scan.score_delta < 0 %}
            <span style="color: var(--cf-critical);">{{ scan.score_delta }}%</span>
          {% else %}
            <span style="color: var(--text-muted);">&mdash;</span>
          {% endif %}
        </td>
        <td class="py-2 px-3">
          {% if scan.severity_counts %}
            C:{{ scan.severity_counts.get("critical", 0) }}
            H:{{ scan.severity_counts.get("high", 0) }}
            M:{{ scan.severity_counts.get("medium", 0) }}
            L:{{ scan.severity_counts.get("low", 0) }}
          {% endif %}
        </td>
        <td class="py-2 px-3">{{ scan.scan_type }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if has_more %}
<div class="mt-4 text-center">
  <button hx-get="/dashboard/partials/scan-history/{{ project_id }}?page={{ page + 1 }}&per_page={{ per_page }}"
          hx-target="#tab-content"
          hx-swap="innerHTML"
          class="px-4 py-2 text-sm rounded"
          style="background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border-default);">
    Load more
  </button>
</div>
{% endif %}
