{% extends "base.html" %}
{% from "components/cloud_badge.html" import cloud_badge %}
{% from "components/score_donut.html" import score_donut %}
{% from "components/severity_bar.html" import severity_bar %}
{% block title %}{{ project.project_label }} — ComplyForm Dashboard{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-6">

  {# Header #}
  <div class="flex items-start justify-between mb-6">
    <div>
      <h1 class="text-xl font-semibold" style="color: var(--text-primary);">{{ project.project_label }}</h1>
      <div class="flex items-center gap-3 mt-2">
        {{ 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>
          <span class="text-xs" style="color: var(--text-muted);">Drift active</span>
        {% else %}
          <span class="inline-block w-2 h-2 rounded-full" style="background: var(--text-muted);" title="Drift monitoring off"></span>
        {% endif %}
        <span class="text-xs" style="color: var(--text-secondary);">{{ project.frameworks | join(", ") }}</span>
        {% if project.last_scan_at %}
          <span class="text-xs" style="color: var(--text-muted);">Last scan: {{ project.last_scan_at }}</span>
        {% endif %}
      </div>
    </div>
  </div>

  {# Score panel #}
  <div class="flex items-center gap-6 p-4 rounded-lg mb-6"
       style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    {% if project.score is not none %}
      {{ score_donut(project.score, 120) }}
    {% endif %}
    {{ severity_bar(project.severity_counts) }}
    <div class="text-sm" style="color: var(--text-secondary);">
      {{ summary.passed }}/{{ summary.total_controls }} controls passed
    </div>
  </div>

  {# Score trend — lazy loaded #}
  <div hx-get="/dashboard/partials/score-trend/{{ project.project_id }}" hx-trigger="load" hx-swap="innerHTML"
       class="mb-6"></div>

  {# Tabs #}
  {% set tabs = [
      ("findings", "Findings", "/dashboard/partials/findings/"),
      ("controls", "Controls", "/dashboard/partials/controls/"),
      ("history", "Scan History", "/dashboard/partials/scan-history/"),
      ("drift", "Drift", "/dashboard/partials/drift-timeline/"),
      ("intelligence", "Cloud Intel", "/dashboard/partials/cloud-intelligence/"),
      ("settings", "Settings", "/dashboard/partials/alert-config/"),
  ] %}
  <nav class="flex items-center gap-1 mb-4 border-b" style="border-color: var(--border-default);">
    {% for tab_id, tab_label, partial_path in tabs %}
    <a hx-get="{{ partial_path }}{{ project.project_id }}"
       hx-target="#tab-content"
       hx-push-url="/dashboard/projects/{{ project.project_id }}?tab={{ tab_id }}"
       class="tab-link px-3 py-2 text-sm rounded-t"
       {% if active_tab == tab_id %}aria-current="true"{% endif %}
       style="color: {% if active_tab == tab_id %}var(--accent){% else %}var(--text-secondary){% endif %}; text-decoration: none; {% if active_tab == tab_id %}border-bottom: 2px solid var(--accent);{% endif %}">
      {{ tab_label }}
    </a>
    {% endfor %}
  </nav>

  <div id="tab-content" style="view-transition-name: tab-content;">
    {% block tab_content %}{% endblock %}
  </div>

</div>
{% endblock %}