<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none'">
  <title>Shared Scan — ComplyForm</title>
  <link rel="stylesheet" href="/static/vendor/tailwind-3.4.17.min.css">
  <style>
    :root {
      --bg-primary: #f9fafb;
      --bg-surface: #ffffff;
      --bg-surface-hover: #f3f4f6;
      --border-default: #e5e7eb;
      --text-primary: #111827;
      --text-secondary: #6b7280;
      --text-muted: #9ca3af;
      --accent: #2563eb;
      --cf-critical: #dc2626;
      --cf-high: #ea580c;
      --cf-medium: #854d0e;
      --cf-low: #2563eb;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg-primary: #0f172a;
        --bg-surface: #1e293b;
        --bg-surface-hover: #334155;
        --border-default: #334155;
        --text-primary: #f1f5f9;
        --text-secondary: #94a3b8;
        --text-muted: #64748b;
        --accent: #3b82f6;
        --cf-critical: #dc2626;
        --cf-high: #ea580c;
        --cf-medium: #854d0e;
        --cf-low: #2563eb;
      }
    }

    body { background: var(--bg-primary); color: var(--text-primary); }
  </style>
</head>
<body>
  <div class="max-w-5xl mx-auto px-4 py-6">

    {# Logo #}
    <div class="mb-6">
      <span class="text-lg font-bold" style="color: var(--accent);">ComplyForm</span>
      <span class="text-sm ml-2" style="color: var(--text-muted);">Shared Scan Report</span>
    </div>

    {% if password_required %}
    {# Password form #}
    <div class="max-w-sm mx-auto mt-16">
      <div class="p-6 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
        <h2 class="text-lg font-semibold mb-4" style="color: var(--text-primary);">Password Required</h2>
        {% if password_error %}
        <div class="text-sm mb-3" style="color: var(--cf-critical);">{{ password_error }}</div>
        {% endif %}
        <form method="POST">
          <input type="password" name="password" required
                 class="text-sm px-3 py-2 rounded w-full mb-3"
                 style="background: var(--bg-primary); border: 1px solid var(--border-default); color: var(--text-primary);"
                 placeholder="Enter password">
          <button type="submit" class="px-4 py-2 text-sm rounded w-full" style="background: var(--accent); color: #fff;">
            View Scan
          </button>
        </form>
      </div>
    </div>

    {% else %}

    {# Scan header #}
    <div class="mb-6">
      <h1 class="text-xl font-semibold" style="color: var(--text-primary);">{{ project_label }}</h1>
      <div class="flex items-center gap-3 mt-1">
        <span class="text-xs px-2 py-0.5 rounded" style="background: var(--bg-surface-hover); color: var(--text-secondary);">{{ cloud }}</span>
        <span class="text-xs" style="color: var(--text-muted);">Scanned {{ scanned_at }}</span>
        <span class="text-xs" style="color: var(--text-secondary);">{{ frameworks | join(", ") }}</span>
      </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);">
      <div>
        <div class="text-3xl font-bold" style="color: var(--accent);">{{ "%.1f"|format(score) }}%</div>
        <div class="text-xs" style="color: var(--text-muted);">Compliance Score</div>
      </div>
      <div class="flex items-center gap-4">
        {% for sev_name, sev_var in [("Critical", "--cf-critical"), ("High", "--cf-high"), ("Medium", "--cf-medium"), ("Low", "--cf-low")] %}
        <div class="text-center">
          <div class="text-sm font-semibold" style="color: var({{ sev_var }});">{{ severity_counts.get(sev_name|lower, 0) }}</div>
          <div class="text-xs" style="color: var(--text-muted);">{{ sev_name }}</div>
        </div>
        {% endfor %}
      </div>
    </div>

    {# Findings #}
    {% if findings %}
    <h2 class="text-sm font-semibold mb-3" style="color: var(--text-primary);">Findings ({{ findings | length }})</h2>
    <div class="space-y-3">
      {% for finding in findings %}
      <div class="p-3 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
        <div class="flex items-center gap-2 mb-1">
          {% if finding.severity == "critical" %}
            <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--cf-critical); color: #fff;">CRITICAL</span>
          {% elif finding.severity == "high" %}
            <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--cf-high); color: #fff;">HIGH</span>
          {% elif finding.severity == "medium" %}
            <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--cf-medium); color: #fff;">MEDIUM</span>
          {% elif finding.severity == "low" %}
            <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--cf-low); color: #fff;">LOW</span>
          {% endif %}
        </div>
        <div class="text-sm font-medium" style="color: var(--text-primary);">
          {{ finding.control_id }} — {{ finding.control_title }}
        </div>
        <div class="text-xs mt-1" style="color: var(--text-muted);">
          {{ finding.resource }}
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="p-4 text-center text-sm" style="color: var(--text-muted);">
      No findings in this scan.
    </div>
    {% endif %}

    {% endif %}

    {# Footer #}
    <div class="mt-12 pt-6 text-center text-xs" style="border-top: 1px solid var(--border-default); color: var(--text-muted);">
      Powered by <a href="https://complyform.dev" style="color: var(--accent); text-decoration: none;">ComplyForm</a> — Cloud compliance, automated.
    </div>
  </div>
</body>
</html>
