{# Cloud Intelligence partial — Team+ only, shown on project detail page #}
{% if cloud_intelligence %}
<div class="cloud-intelligence-section" style="border: 1px solid var(--border-default); border-radius: 8px; padding: 16px; margin-top: 16px;">
  <h3 style="margin: 0 0 12px 0; color: var(--text-primary);">Cloud Intelligence</h3>

  {# IAM Analysis #}
  <div x-data="{ open: false }" style="margin-bottom: 8px;">
    <button @click="open = !open" class="section-toggle" style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer; color: var(--text-primary); font-weight: 500;">
      <span>IAM Analysis</span>
      {% if cloud_intelligence.iam_analysis %}
        <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--cf-high); color: #fff;">{{ cloud_intelligence.iam_analysis.over_provisioned_count }} over-provisioned</span>
      {% else %}
        <span class="text-xs" style="color: var(--text-muted);">Not available</span>
      {% endif %}
    </button>
    <div x-show="open" x-transition style="padding: 12px; background: var(--bg-surface); border: 1px solid var(--border-default); border-top: 0; border-radius: 0 0 6px 6px;">
      {% if cloud_intelligence.iam_analysis %}
        <p style="margin: 4px 0; color: var(--text-secondary);">Principals scanned: <strong>{{ cloud_intelligence.iam_analysis.principals_scanned }}</strong></p>
        <p style="margin: 4px 0; color: var(--text-secondary);">Over-provisioned: <strong>{{ cloud_intelligence.iam_analysis.over_provisioned_count }}</strong></p>
        <p style="margin: 4px 0; color: var(--text-secondary);">Unused roles: <strong>{{ cloud_intelligence.iam_analysis.unused_role_count }}</strong></p>
      {% else %}
        <p style="color: var(--text-muted);">Run <code style="background: var(--bg-surface-hover); padding: 2px 6px; border-radius: 4px;">complyform assess --iam-analysis</code> with API scan to enable.</p>
      {% endif %}
    </div>
  </div>

  {# Cross-Validation #}
  <div x-data="{ open: false }" style="margin-bottom: 8px;">
    <button @click="open = !open" class="section-toggle" style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer; color: var(--text-primary); font-weight: 500;">
      <span>Cross-Validation</span>
      {% if cloud_intelligence.cross_validation %}
        <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--cf-medium); color: #fff;">Score: {{ cloud_intelligence.cross_validation.score }}%</span>
      {% else %}
        <span class="text-xs" style="color: var(--text-muted);">Not available</span>
      {% endif %}
    </button>
    <div x-show="open" x-transition style="padding: 12px; background: var(--bg-surface); border: 1px solid var(--border-default); border-top: 0; border-radius: 0 0 6px 6px;">
      {% if cloud_intelligence.cross_validation %}
        <p style="margin: 4px 0; color: var(--text-secondary);">Validation score: <strong>{{ cloud_intelligence.cross_validation.score }}%</strong></p>
        <p style="margin: 4px 0; color: var(--text-secondary);">Confirmed: <strong>{{ cloud_intelligence.cross_validation.confirmed_count }}</strong></p>
        <p style="margin: 4px 0; color: var(--text-secondary);">ComplyForm only: <strong>{{ cloud_intelligence.cross_validation.complyform_only_count }}</strong></p>
        <p style="margin: 4px 0; color: var(--text-secondary);">Native only: <strong>{{ cloud_intelligence.cross_validation.native_only_count }}</strong></p>
        <p style="margin: 4px 0; color: var(--text-secondary);">Native tool: <strong>{{ cloud_intelligence.cross_validation.native_tool }}</strong></p>
      {% else %}
        <p style="color: var(--text-muted);">Run <code style="background: var(--bg-surface-hover); padding: 2px 6px; border-radius: 4px;">complyform assess --cross-validate</code> with API scan to enable.</p>
      {% endif %}
    </div>
  </div>

  {# Cost Impact #}
  <div x-data="{ open: false }" style="margin-bottom: 8px;">
    <button @click="open = !open" class="section-toggle" style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer; color: var(--text-primary); font-weight: 500;">
      <span>Cost Impact</span>
      {% if cloud_intelligence.cost_impact %}
        <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--bg-surface-hover); color: var(--text-secondary);">${{ cloud_intelligence.cost_impact.total_monthly_delta }}/mo ({{ cloud_intelligence.cost_impact.confidence }})</span>
      {% else %}
        <span class="text-xs" style="color: var(--text-muted);">Not available</span>
      {% endif %}
    </button>
    <div x-show="open" x-transition style="padding: 12px; background: var(--bg-surface); border: 1px solid var(--border-default); border-top: 0; border-radius: 0 0 6px 6px;">
      {% if cloud_intelligence.cost_impact %}
        <p style="margin: 4px 0; color: var(--text-secondary);">Monthly delta: <strong>${{ cloud_intelligence.cost_impact.total_monthly_delta }}</strong></p>
        <p style="margin: 4px 0; color: var(--text-secondary);">Annual delta: <strong>${{ cloud_intelligence.cost_impact.total_annual_delta }}</strong></p>
        <p style="margin: 4px 0; color: var(--text-secondary);">Confidence: <strong>{{ cloud_intelligence.cost_impact.confidence }}</strong></p>
      {% else %}
        <p style="color: var(--text-muted);">Run <code style="background: var(--bg-surface-hover); padding: 2px 6px; border-radius: 4px;">complyform assess --estimate-cost</code> with API scan to enable.</p>
      {% endif %}
    </div>
  </div>

  {# Landing Zone #}
  <div x-data="{ open: false }">
    <button @click="open = !open" class="section-toggle" style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer; color: var(--text-primary); font-weight: 500;">
      <span>Landing Zone</span>
      {% if cloud_intelligence.landing_zone %}
        <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--bg-surface-hover); color: var(--text-secondary);">{{ cloud_intelligence.landing_zone.type }} ({{ cloud_intelligence.landing_zone.inherited_policies_count }} policies)</span>
      {% else %}
        <span class="text-xs" style="color: var(--text-muted);">Not detected</span>
      {% endif %}
    </button>
    <div x-show="open" x-transition style="padding: 12px; background: var(--bg-surface); border: 1px solid var(--border-default); border-top: 0; border-radius: 0 0 6px 6px;">
      {% if cloud_intelligence.landing_zone %}
        <p style="margin: 4px 0; color: var(--text-secondary);">Type: <strong>{{ cloud_intelligence.landing_zone.type }}</strong></p>
        <p style="margin: 4px 0; color: var(--text-secondary);">Inherited policies: <strong>{{ cloud_intelligence.landing_zone.inherited_policies_count }}</strong></p>
      {% else %}
        <p style="color: var(--text-muted);">No landing zone detected. Run <code style="background: var(--bg-surface-hover); padding: 2px 6px; border-radius: 4px;">complyform scan --source=api</code> to detect.</p>
      {% endif %}
    </div>
  </div>
</div>
{% else %}
<div class="cloud-intelligence-section empty" style="border: 1px solid var(--border-default); border-radius: 8px; padding: 16px; margin-top: 16px;">
  <h3 style="margin: 0 0 8px 0; color: var(--text-primary);">Cloud Intelligence</h3>
  <p style="color: var(--text-muted);">Run <code style="background: var(--bg-surface-hover); padding: 2px 6px; border-radius: 4px;">complyform assess --source=api --iam-analysis --cross-validate --estimate-cost</code> to enable cloud intelligence features.</p>
</div>
{% endif %}