<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ActionsGuard Security Report</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f5f5f5;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 2.5em;
        }

        h2 {
            color: #34495e;
            margin: 30px 0 15px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }

        h3 {
            color: #555;
            margin: 20px 0 10px 0;
        }

        .header {
            margin-bottom: 40px;
        }

        .generated-at {
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .summary-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 6px;
            border-left: 4px solid #3498db;
        }

        .summary-card h3 {
            font-size: 0.9em;
            color: #7f8c8d;
            margin: 0 0 10px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .summary-card .value {
            font-size: 2em;
            font-weight: bold;
            color: #2c3e50;
        }

        .severity-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .severity-card {
            padding: 15px;
            border-radius: 6px;
            text-align: center;
        }

        .severity-card.critical {
            background: #ffe5e5;
            border: 2px solid #e74c3c;
        }

        .severity-card.high {
            background: #fff3e0;
            border: 2px solid #f39c12;
        }

        .severity-card.medium {
            background: #fffde7;
            border: 2px solid #f1c40f;
        }

        .severity-card.low {
            background: #e8f5e9;
            border: 2px solid #27ae60;
        }

        .severity-card .count {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .severity-card .label {
            font-size: 0.9em;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .repo-card {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .repo-card.critical {
            border-left: 5px solid #e74c3c;
        }

        .repo-card.high {
            border-left: 5px solid #f39c12;
        }

        .repo-card.medium {
            border-left: 5px solid #f1c40f;
        }

        .repo-card.low {
            border-left: 5px solid #27ae60;
        }

        .repo-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .repo-name {
            font-size: 1.3em;
            font-weight: bold;
            color: #2c3e50;
        }

        .repo-name a {
            color: #3498db;
            text-decoration: none;
        }

        .repo-name a:hover {
            text-decoration: underline;
        }

        .score-badge {
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            color: white;
        }

        .score-badge.critical {
            background: #e74c3c;
        }

        .score-badge.high {
            background: #f39c12;
        }

        .score-badge.medium {
            background: #f1c40f;
            color: #333;
        }

        .score-badge.low {
            background: #27ae60;
        }

        .check-list {
            margin-top: 15px;
        }

        .check-item {
            padding: 10px;
            margin: 5px 0;
            border-radius: 4px;
            background: #f8f9fa;
        }

        .check-item.fail {
            background: #ffe5e5;
            border-left: 3px solid #e74c3c;
        }

        .check-item.warn {
            background: #fff3e0;
            border-left: 3px solid #f39c12;
        }

        .check-item.pass {
            background: #e8f5e9;
            border-left: 3px solid #27ae60;
        }

        .check-name {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .check-reason {
            font-size: 0.9em;
            color: #555;
        }

        .check-score {
            float: right;
            font-weight: bold;
        }

        .error-message {
            background: #ffebee;
            border: 1px solid #ef5350;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            color: #c62828;
        }

        .no-workflows {
            color: #7f8c8d;
            font-style: italic;
        }

        details {
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
        }

        summary {
            cursor: pointer;
            font-weight: bold;
            padding: 5px;
        }

        summary:hover {
            background: #e9ecef;
        }

        .footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            text-align: center;
            color: #7f8c8d;
            font-size: 0.9em;
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }

            h1 {
                font-size: 1.8em;
            }

            .summary-grid, .severity-grid {
                grid-template-columns: 1fr;
            }

            .repo-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .score-badge {
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🛡️ ActionsGuard Security Report</h1>
            <p class="generated-at">Generated: {{ generated_at }}</p>
        </div>

        <!-- Summary Section -->
        <section>
            <h2>Executive Summary</h2>
            <div class="summary-grid">
                <div class="summary-card">
                    <h3>Total Repositories</h3>
                    <div class="value">{{ summary.total_repos }}</div>
                </div>
                <div class="summary-card">
                    <h3>Successful Scans</h3>
                    <div class="value">{{ summary.successful_scans }}</div>
                </div>
                <div class="summary-card">
                    <h3>Failed Scans</h3>
                    <div class="value">{{ summary.failed_scans }}</div>
                </div>
                <div class="summary-card">
                    <h3>Average Score</h3>
                    <div class="value">{{ "%.1f"|format(summary.average_score) }}/10</div>
                </div>
            </div>

            <h3>Issue Severity Breakdown</h3>
            <div class="severity-grid">
                <div class="severity-card critical">
                    <div class="count">{{ summary.critical_count }}</div>
                    <div class="label">Critical</div>
                </div>
                <div class="severity-card high">
                    <div class="count">{{ summary.high_count }}</div>
                    <div class="label">High</div>
                </div>
                <div class="severity-card medium">
                    <div class="count">{{ summary.medium_count }}</div>
                    <div class="label">Medium</div>
                </div>
                <div class="severity-card low">
                    <div class="count">{{ summary.low_count }}</div>
                    <div class="label">Low</div>
                </div>
            </div>
        </section>

        <!-- Critical Risk Repositories -->
        {% if critical_repos %}
        <section>
            <h2>🔴 Critical Risk Repositories</h2>
            {% for repo in critical_repos %}
            <div class="repo-card critical">
                <div class="repo-header">
                    <div class="repo-name"><a href="{{ repo.repo_url }}" target="_blank">{{ repo.repo_name }}</a></div>
                    <div class="score-badge critical">{{ "%.1f"|format(repo.score) }}/10</div>
                </div>

                {% if repo.metadata.get('has_workflows', True) %}
                <div class="check-list">
                    {% for check in repo.checks %}
                    {% if check.status.value == 'FAIL' %}
                    <div class="check-item fail">
                        <div class="check-name">
                            ❌ {{ check.name }}
                            <span class="check-score">{{ check.score }}/10</span>
                        </div>
                        <div class="check-reason">{{ check.reason }}</div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                {% else %}
                <p class="no-workflows">No GitHub Actions workflows detected</p>
                {% endif %}
            </div>
            {% endfor %}
        </section>
        {% endif %}

        <!-- High Risk Repositories -->
        {% if high_repos %}
        <section>
            <h2>🟠 High Risk Repositories</h2>
            {% for repo in high_repos %}
            <div class="repo-card high">
                <div class="repo-header">
                    <div class="repo-name"><a href="{{ repo.repo_url }}" target="_blank">{{ repo.repo_name }}</a></div>
                    <div class="score-badge high">{{ "%.1f"|format(repo.score) }}/10</div>
                </div>

                {% if repo.metadata.get('has_workflows', True) %}
                <div class="check-list">
                    {% for check in repo.checks %}
                    {% if check.status.value in ['FAIL', 'WARN'] %}
                    <div class="check-item {{ check.status.value|lower }}">
                        <div class="check-name">
                            {% if check.status.value == 'FAIL' %}❌{% else %}⚠️{% endif %} {{ check.name }}
                            <span class="check-score">{{ check.score }}/10</span>
                        </div>
                        <div class="check-reason">{{ check.reason }}</div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                {% else %}
                <p class="no-workflows">No GitHub Actions workflows detected</p>
                {% endif %}
            </div>
            {% endfor %}
        </section>
        {% endif %}

        <!-- Medium Risk Repositories -->
        {% if medium_repos %}
        <section>
            <h2>🟡 Medium Risk Repositories</h2>
            {% for repo in medium_repos %}
            <div class="repo-card medium">
                <div class="repo-header">
                    <div class="repo-name"><a href="{{ repo.repo_url }}" target="_blank">{{ repo.repo_name }}</a></div>
                    <div class="score-badge medium">{{ "%.1f"|format(repo.score) }}/10</div>
                </div>

                <details>
                    <summary>View Details</summary>
                    {% if repo.metadata.get('has_workflows', True) %}
                    <div class="check-list">
                        {% for check in repo.checks %}
                        {% if check.status.value in ['FAIL', 'WARN'] %}
                        <div class="check-item {{ check.status.value|lower }}">
                            <div class="check-name">
                                {% if check.status.value == 'FAIL' %}❌{% else %}⚠️{% endif %} {{ check.name }}
                                <span class="check-score">{{ check.score }}/10</span>
                            </div>
                            <div class="check-reason">{{ check.reason }}</div>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="no-workflows">No GitHub Actions workflows detected</p>
                    {% endif %}
                </details>
            </div>
            {% endfor %}
        </section>
        {% endif %}

        <!-- Low Risk Repositories -->
        {% if low_repos %}
        <section>
            <h2>🟢 Low Risk Repositories</h2>
            <details>
                <summary>View {{ low_repos|length }} low-risk repositories</summary>
                {% for repo in low_repos %}
                <div class="repo-card low">
                    <div class="repo-header">
                        <div class="repo-name"><a href="{{ repo.repo_url }}" target="_blank">{{ repo.repo_name }}</a></div>
                        <div class="score-badge low">{{ "%.1f"|format(repo.score) }}/10</div>
                    </div>
                </div>
                {% endfor %}
            </details>
        </section>
        {% endif %}

        <!-- Failed Scans -->
        {% if error_repos %}
        <section>
            <h2>💥 Failed Scans</h2>
            {% for repo in error_repos %}
            <div class="repo-card">
                <div class="repo-name"><a href="{{ repo.repo_url }}" target="_blank">{{ repo.repo_name }}</a></div>
                <div class="error-message">
                    <strong>Error:</strong> {{ repo.error }}
                </div>
            </div>
            {% endfor %}
        </section>
        {% endif %}

        <div class="footer">
            <p>Generated by <strong>ActionsGuard</strong> - GitHub Actions Security Scanner</p>
        </div>
    </div>
</body>
</html>
