<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% if domain %}<meta name="fs-domain" content="{{ domain }}">{% endif %}
    <title>Component Remediation Package — {{ summary.component_name | default('Unknown') }}</title>
    <style>
        :root {
            --p0: #dc2626; --p1: #ea580c; --p2: #ca8a04; --p3: #2563eb;
            --bg: #f8fafc; --card: #ffffff; --border: #e2e8f0;
            --text: #1e293b; --muted: #64748b; --code-bg: #f1f5f9;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
               background: var(--bg); color: var(--text); line-height: 1.5; padding: 24px; }
        h1 { font-size: 1.5rem; margin-bottom: 4px; }
        h2 { font-size: 1.25rem; margin: 24px 0 12px 0; }

        .header { text-align: center; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--border); }
        .company-logo { max-height: 50px; width: auto; margin: 0 auto 12px auto; display: block; }
        .header h1 { color: var(--text); font-size: 2em; margin-bottom: 6px; }
        .header .subtitle { color: var(--muted); font-size: 1.1em; }

        .metadata { background: var(--code-bg); padding: 15px; border-radius: 8px; margin-bottom: 24px;
                    font-size: 0.9em; color: var(--muted); }

        .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-bottom: 30px; }
        .kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
                    padding: 20px; text-align: center; }
        .kpi-card .kpi-title { font-size: 0.85em; color: var(--muted); text-transform: uppercase;
                                letter-spacing: 0.5px; margin-bottom: 8px; }
        .kpi-card .kpi-value { font-size: 2.2em; font-weight: 700; color: var(--text); line-height: 1; }

        .section { margin-bottom: 32px; }
        .section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
        .section-count { background: var(--code-bg); padding: 2px 8px; border-radius: 10px;
                         font-size: 0.8rem; color: var(--muted); }

        .action-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
                       padding: 16px; margin-bottom: 12px; border-left: 4px solid var(--border); }
        .action-card.critical { border-left-color: var(--p0); }
        .action-card.high { border-left-color: var(--p1); }
        .action-card.medium { border-left-color: var(--p2); }
        .action-card.low { border-left-color: var(--p3); }

        .action-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .action-title { font-weight: 700; font-size: 1rem; }
        .action-priority { font-weight: 700; font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; color: #fff; }
        .action-priority.critical { background: var(--p0); }
        .action-priority.high { background: var(--p1); }
        .action-priority.medium { background: var(--p2); }
        .action-priority.low { background: var(--p3); }

        .action-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; }
        .action-meta span { display: inline-flex; align-items: center; gap: 4px; }

        .tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.75rem; font-weight: 600; }
        .tag-zero-day { background: #f3e8ff; color: #6b21a8; }

        .cve-item { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 6px; border-radius: 3px;
                    background: var(--code-bg); font-family: monospace; font-size: 0.8rem; }
        .cve-item.critical { background: #fee2e2; color: #991b1b; }
        .cve-item.high { background: #ffedd5; color: #9a3412; }

        .guidance { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 4px;
                    padding: 10px 12px; margin: 8px 0; font-size: 0.85rem; }

        .mitigation-list { margin: 6px 0 6px 20px; font-size: 0.85rem; }
        .mitigation-list li { margin: 2px 0; }

        .project-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
        .project-tag { display: inline-block; padding: 1px 8px; border-radius: 3px;
                       background: #dbeafe; color: #1e40af; font-size: 0.8rem; }

        .prompt-block { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px;
                       padding: 12px; margin: 8px 0; max-height: 200px; overflow-y: auto;
                       font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; }

        .suppressed-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
        .suppressed-table th, .suppressed-table td {
            padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
        .suppressed-table th {
            background: var(--code-bg); font-weight: 600; font-size: 0.8rem;
            text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

        .footer { text-align: center; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border);
                  font-size: 0.75rem; color: var(--muted); }
        .finite-state-logo { color: #007bff; font-weight: bold; }

        @media print { body { padding: 12px; } }
    </style>
</head>
<body>
    <span id="fsConnectionBadge"></span>
    <div>
        <!-- Header -->
        <div class="header">
            {% if logo_path %}
            <div class="logo-container">
                <img src="{{ logo_path }}" alt="Company Logo" class="company-logo">
            </div>
            {% else %}
            <div class="logo-container">
                <img src="data:image/webp;base64,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"
                     alt="Finite State Logo" class="company-logo">
            </div>
            {% endif %}
            <h1>Component Remediation Package</h1>
            <div class="subtitle">
                {{ summary.component_name | default('Unknown Component') }}{% if summary.version_range %} &middot; {{ summary.version_range }}{% endif %}
            </div>
        </div>

        <!-- Metadata -->
        <div class="metadata">
            <strong>Report:</strong> Component Remediation Package |
            <strong>Generated:</strong> {{ generated_at }} |
            <strong>Scope:</strong> {{ scope_label | default('All Projects') }} |
            <strong>Component:</strong> {{ summary.component_name | default('Unknown') }}
        </div>

        <!-- KPI Cards -->
        <div class="kpi-row">
            <div class="kpi-card">
                <div class="kpi-title">Total Actions</div>
                <div class="kpi-value">{{ summary.total_actions | default(0) }}</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-title">Critical</div>
                <div class="kpi-value" {% if summary.critical_actions | default(0) > 0 %}style="color: var(--p0);"{% endif %}>{{ summary.critical_actions | default(0) }}</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-title">High</div>
                <div class="kpi-value" {% if summary.high_actions | default(0) > 0 %}style="color: var(--p1);"{% endif %}>{{ summary.high_actions | default(0) }}</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-title">Affected Projects</div>
                <div class="kpi-value">{{ summary.affected_project_count | default(0) }}</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-title">Zero-Day</div>
                <div class="kpi-value" {% if summary.zero_day_actions | default(0) > 0 %}style="color: #7c3aed;"{% endif %}>{{ summary.zero_day_actions | default(0) }}</div>
            </div>
        </div>

        <!-- Action Cards -->
        {% if actions %}
        <div class="section">
            <div class="section-header">
                <h2>Action Cards</h2>
                <span class="section-count">{{ actions | length }}</span>
            </div>

            {% for action in actions %}
            {% set sev = action.max_severity | default('MEDIUM') | lower %}
            <div class="action-card {{ sev }}">
                <div class="action-header">
                    <span class="action-title">{{ action.component_name }} {{ action.component_version_name }}</span>
                    <span class="action-priority {{ sev }}">{{ action.max_severity | default('MEDIUM') }}</span>
                </div>

                <div class="action-meta">
                    <span>{{ action.finding_count | default(0) }} finding{{ 's' if action.finding_count | default(0) != 1 }}</span>
                    <span>{{ action.open_count | default(0) }} open</span>
                    <span>{{ action.affected_projects | default([]) | length }} project{{ 's' if action.affected_projects | default([]) | length != 1 }}</span>
                    <span>Priority: {{ '%.1f' | format(action.priority_score | default(0)) }}</span>
                </div>

                <!-- CVE IDs or Zero-day badge -->
                {% if action.is_zero_day %}
                <div style="margin: 6px 0;">
                    <span class="tag tag-zero-day">Zero-day — no CVE assigned</span>
                </div>
                {% endif %}
                {% if action.cve_ids %}
                <div style="margin: 6px 0;">
                    {% for cve in action.cve_ids %}
                    <span class="cve-item{% if action.max_severity | default('') == 'CRITICAL' %} critical{% elif action.max_severity | default('') == 'HIGH' %} high{% endif %}">{{ cve }}</span>
                    {% endfor %}
                </div>
                {% endif %}

                <!-- Affected projects -->
                {% if action.affected_projects %}
                <div style="margin: 8px 0;">
                    <strong style="font-size: 0.85rem;">Affected projects:</strong>
                    <div class="project-list">
                        {% for proj in action.affected_projects %}
                        <span class="project-tag">{{ proj }}</span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Upgrade recommendation -->
                {% if action.upgrade_recommendation %}
                <div class="guidance">
                    <strong>Upgrade recommendation:</strong> {{ action.upgrade_recommendation }}
                </div>
                {% endif %}

                <!-- Interim mitigations -->
                {% if action.interim_mitigations %}
                <div style="margin: 8px 0;">
                    <strong style="font-size: 0.85rem;">Interim mitigations:</strong>
                    <ul class="mitigation-list">
                        {% for m in action.interim_mitigations %}
                        <li>{{ m }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                <!-- AI guidance (LLM response) -->
                {% if action.ai_guidance %}
                <div style="margin-top: 12px; padding: 12px; background: #f0fdf4; border-left: 3px solid #16a34a; border-radius: 4px;">
                    <strong style="color: #16a34a;">AI Remediation Guidance</strong>
                    <div class="ai-guidance-content" style="margin-top: 8px; white-space: pre-wrap; font-size: 0.9rem; line-height: 1.5;">{{ action.ai_guidance }}</div>
                </div>
                {% endif %}

                <!-- AI prompt (expandable) -->
                {% if action.ai_prompt %}
                <details style="margin-top: 8px;">
                    <summary style="cursor: pointer; font-size: 0.85rem; color: var(--muted);">AI Prompt</summary>
                    {% if action.ai_prompt.system %}
                    <div class="prompt-block"><strong>System:</strong>
{{ action.ai_prompt.system }}</div>
                    {% endif %}
                    {% if action.ai_prompt.user %}
                    <div class="prompt-block"><strong>User:</strong>
{{ action.ai_prompt.user }}</div>
                    {% endif %}
                    {% if action.ai_prompt.context %}
                    <div class="prompt-block"><strong>Context:</strong>
{{ action.ai_prompt.context }}</div>
                    {% endif %}
                </details>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- AI Prompts section (standalone prompts not tied to actions) -->
        {% if ai_prompts %}
        <div class="section">
            <div class="section-header">
                <h2>AI Prompts</h2>
                <span class="section-count">{{ ai_prompts | length }}</span>
            </div>
            {% for prompt in ai_prompts %}
            <details style="margin-bottom: 8px;">
                <summary style="cursor: pointer; font-size: 0.9rem; font-weight: 600;">{{ prompt.id | default('Prompt ' ~ loop.index) }}</summary>
                {% if prompt.system %}
                <div class="prompt-block"><strong>System:</strong>
{{ prompt.system }}</div>
                {% endif %}
                {% if prompt.user %}
                <div class="prompt-block"><strong>User:</strong>
{{ prompt.user }}</div>
                {% endif %}
                {% if prompt.context %}
                <div class="prompt-block"><strong>Context:</strong>
{{ prompt.context }}</div>
                {% endif %}
            </details>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Suppressed Findings -->
        {% if suppressed %}
        <div class="section">
            <details>
                <summary style="cursor: pointer;">
                    <div class="section-header" style="display: inline-flex;">
                        <h2 style="margin: 0;">Suppressed Findings</h2>
                        <span class="section-count">{{ suppressed | length }}</span>
                    </div>
                </summary>
                <table class="suppressed-table" style="margin-top: 12px;">
                    <thead>
                        <tr>
                            <th>Component</th>
                            <th>Version</th>
                            <th>CVE</th>
                            <th>Severity</th>
                            <th>Status</th>
                            <th>Project</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in suppressed %}
                        <tr>
                            <td>{{ row.component_name }}</td>
                            <td>{{ row.component_version_name }}</td>
                            <td><code>{{ row.cve_id }}</code></td>
                            <td>{{ row.severity }}</td>
                            <td>{{ row.status }}</td>
                            <td>{{ row.project_name }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </details>
        </div>
        {% endif %}

        <!-- Footer -->
        <div class="footer">
            <p>Generated by <span class="finite-state-logo">Finite State</span> | {{ generated_at }}</p>
            <p style="font-size: 0.8em; margin-top: 4px;">Copyright &copy; 2026 Finite State, Inc.</p>
        </div>
    </div>

    {% include '_action_buttons.html' %}
</body>
</html>
