<!DOCTYPE html>
<html>
<head>
    <title>Compliance Report</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 10px;
        }
        .summary {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        .summary-item {
            display: inline-block;
            margin-right: 30px;
            font-size: 1.2em;
        }
        .summary-number {
            font-weight: bold;
            font-size: 1.5em;
        }
        .pass { color: #4CAF50; }
        .fail { color: #f44336; }
        .error { color: #ff9800; }
        .rule {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .rule-header {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .rule-detail {
            margin-left: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .footer {
            margin-top: 40px;
            color: #777;
            font-size: 0.9em;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Compliance Scan Report</h1>
    
    <div class="summary">
        <h2>Summary</h2>
        <div class="summary-item">
            <span class="summary-number">{{ summary.total }}</span> Total Rules
        </div>
        <div class="summary-item">
            <span class="summary-number pass">{{ summary.passed }}</span> Passed
        </div>
        <div class="summary-item">
            <span class="summary-number fail">{{ summary.failed }}</span> Failed
        </div>
        <div class="summary-item">
            <span class="summary-number error">{{ summary.errors }}</span> Errors
        </div>
        <p><strong>Scan Time:</strong> {{ timestamp }}</p>
    </div>

    <h2>Rule Details</h2>
    
    {% for result in results %}
    <div class="rule">
        <div class="rule-header">
            {% if result.status == 'PASS' %}
                <span class="pass">✅ PASS</span>
            {% elif result.status == 'FAIL' %}
                <span class="fail">❌ FAIL</span>
            {% else %}
                <span class="error">⚠️ ERROR</span>
            {% endif %}
            {{ result.rule_id }}: {{ result.rule_name }}
        </div>
        <div class="rule-detail">
            <p><strong>Description:</strong> {{ result.description or 'No description' }}</p>
            <p><strong>Pass Rate:</strong> {{ result.pass_rate|round(1) }}% ({{ result.passed_rows }}/{{ result.total_rows }})</p>
            
            {% if result.violations %}
            <p><strong>Violations ({{ result.failed_rows }}):</strong></p>
            <table>
                <thead>
                    <tr>
                        {% for col in result.violations[0].row_data.keys() %}
                        <th>{{ col }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for v in result.violations %}
                    <tr>
                        {% for val in v.row_data.values() %}
                        <td>{{ val }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% endif %}
            
            {% if result.error_message %}
            <p class="error"><strong>Error:</strong> {{ result.error_message }}</p>
            {% endif %}
        </div>
    </div>
    {% endfor %}
    
    <div class="footer">
        Generated by Compliance Copilot v{{ version }} on {{ timestamp }}
    </div>
</body>
</html>
