<!DOCTYPE html>
<html>
<head>
    <title>{{ result.protocol }} {{ result.version }} Report</title>
    <style>
        @page { size: portrait; margin: 20mm; }
        body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 20px; color: #333; }
        h1 { color: #2c3e50; font-size: 24px; margin-bottom: 5px; }
        h2 { color: #34495e; font-size: 16px; margin-top: 25px; }
        .subtitle { font-size: 14px; color: #7f8c8d; margin-bottom: 20px; }
        .stars { font-size: 36px; color: #f1c40f; letter-spacing: 4px; }
        .overall { background: #2c3e50; color: white; padding: 20px; border-radius: 8px; margin: 20px 0; text-align: center; }
        .overall h2 { color: white; margin: 0; }
        .overall .score { font-size: 28px; font-weight: bold; margin: 10px 0; }
        .test-info { background: #f8f9fa; padding: 15px; border-radius: 5px; margin: 15px 0; font-size: 12px; }
        table { border-collapse: collapse; width: 100%; margin-top: 15px; }
        th { background-color: #2c3e50; color: white; padding: 10px; text-align: left; font-size: 11px; text-transform: uppercase; }
        td { border: 1px solid #ddd; padding: 8px; font-size: 12px; }
        tr:nth-child(even) { background-color: #f8f9fa; }
        .badge { display: inline-block; padding: 3px 10px; border-radius: 3px; color: white; font-weight: bold; font-size: 11px; text-transform: uppercase; min-width: 60px; text-align: center; }
        .badge-green { background-color: #2ecc71; }
        .badge-yellow { background-color: #f1c40f; color: #333; }
        .badge-orange { background-color: #e67e22; }
        .badge-brown { background-color: #8B4513; }
        .badge-red { background-color: #e74c3c; }
        .badge-good { background-color: #2ecc71; }
        .badge-acceptable { background-color: #f1c40f; color: #333; }
        .badge-marginal { background-color: #e67e22; }
        .badge-poor { background-color: #e74c3c; }
        .value { font-family: 'Courier New', monospace; font-weight: bold; }
        .footer { margin-top: 30px; padding-top: 10px; border-top: 1px solid #ddd; font-size: 9px; color: #999; }
    </style>
</head>
<body>
    <h1>{{ result.protocol }} {{ result.version }}</h1>
    <div class="subtitle">Rating Report</div>

    {% if metadata %}
    <div class="test-info">
        {% if metadata.test_number %}<strong>Test:</strong> {{ metadata.test_number }} &nbsp;|&nbsp;{% endif %}
        {% if metadata.vehicle.make %}<strong>Vehicle:</strong> {{ metadata.vehicle.year }} {{ metadata.vehicle.make }} {{ metadata.vehicle.model }} &nbsp;|&nbsp;{% endif %}
        {% if metadata.dummy.dummy_type %}<strong>Dummy:</strong> {{ metadata.dummy.dummy_type }} &nbsp;|&nbsp;{% endif %}
        {% if metadata.impact.test_type %}<strong>Type:</strong> {{ metadata.impact.test_type }}{% endif %}
    </div>
    {% endif %}

    <div class="overall">
        {% if result.stars is not none %}
        <div class="stars">
            {% for i in range(result.stars) %}&#9733;{% endfor %}{% for i in range(5 - result.stars) %}&#9734;{% endfor %}
        </div>
        {% endif %}
        <div class="score">{{ result.overall_rating }}</div>
        {% if result.max_points > 0 %}
        <div>{{ "%.1f"|format(result.total_points) }} / {{ "%.1f"|format(result.max_points) }} points ({{ "%.0f"|format(result.percentage) }}%)</div>
        {% endif %}
    </div>

    <h2>Body Region Results</h2>
    <table>
        <thead>
            <tr>
                <th>Region</th>
                <th>Criterion</th>
                <th>Value</th>
                <th>Rating</th>
                <th>Points</th>
            </tr>
        </thead>
        <tbody>
            {% for rs in result.region_scores %}
            <tr>
                <td>{{ rs.region }}</td>
                <td>{{ rs.criterion }}</td>
                <td class="value">{{ "%.2f"|format(rs.value) }} {{ rs.unit }}</td>
                <td>
                    {% if rs.color %}
                    <span class="badge badge-{{ rs.color.value }}">{{ rs.color.value }}</span>
                    {% elif rs.rating %}
                    <span class="badge badge-{{ rs.rating.value }}">{{ rs.rating.value }}</span>
                    {% endif %}
                </td>
                <td>{% if rs.max_points > 0 %}{{ "%.1f"|format(rs.points) }}/{{ "%.1f"|format(rs.max_points) }}{% endif %}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <div class="footer">
        Generated by Impakt &mdash; {{ result.protocol }} {{ result.version }}
    </div>
</body>
</html>
