{% from "components/cloud_badge.html" import cloud_badge %}
{% from "components/score_donut.html" import score_donut %}
{% from "components/severity_bar.html" import severity_bar %}
<a href="/dashboard/projects/{{ project.project_id }}"
   class="block p-4 rounded-lg transition-colors"
   style="background: var(--bg-surface); border: 1px solid var(--border-default); text-decoration: none; color: var(--text-primary);">
  <div class="flex items-start justify-between mb-3">
    <div>
      <h3 class="font-semibold text-sm">{{ project.project_label }}</h3>
      <div class="flex items-center gap-2 mt-1">
        {{ cloud_badge(project.cloud) }}
        {% if project.drift_monitoring %}
          <span class="inline-block w-2 h-2 rounded-full" style="background: #16a34a;" title="Drift monitoring active"></span>
        {% else %}
          <span class="inline-block w-2 h-2 rounded-full" style="background: var(--text-muted);" title="Drift monitoring off"></span>
        {% endif %}
      </div>
    </div>
    <div class="text-right">
      {% if project.score is not none %}
        {{ score_donut(project.score, 80) }}
      {% else %}
        <span class="text-sm" style="color: var(--text-muted);">&mdash;</span>
      {% endif %}
    </div>
  </div>

  {# Score delta #}
  {% if project.score_delta is not none and project.score_delta != 0 %}
    {% if project.score_delta > 0 %}
      <span class="text-xs font-medium" style="color: #16a34a;">&#x25B2; +{{ project.score_delta }}%</span>
    {% else %}
      <span class="text-xs font-medium" style="color: var(--cf-critical);">&#x25BC; {{ project.score_delta }}%</span>
    {% endif %}
  {% elif project.score_delta is none %}
    <span class="text-xs" style="color: var(--text-muted);">&mdash;</span>
  {% else %}
    <span class="text-xs" style="color: var(--text-muted);">&mdash;</span>
  {% endif %}

  {# Severity bar #}
  <div class="mt-2">
    {{ severity_bar(project.severity_counts) }}
  </div>

  {# Last scan #}
  <div class="mt-2 text-xs" style="color: var(--text-muted);">
    {% if project.last_scan_at %}
      Last scan: {{ project.last_scan_at }}
    {% else %}
      No scans yet
    {% endif %}
  </div>

  {# Frameworks #}
  <div class="mt-1 text-xs" style="color: var(--text-secondary);">
    {{ project.frameworks | join(", ") }}
  </div>
</a>