<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <style>
        @page { size: landscape; margin: 15mm; }
        body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 20px; color: #333; }
        .header { border-bottom: 2px solid #2c3e50; padding-bottom: 10px; margin-bottom: 15px; }
        .header h1 { margin: 0; font-size: 18px; color: #2c3e50; }
        .meta-row { display: flex; gap: 30px; font-size: 11px; color: #666; margin-top: 5px; }
        .plot-container { width: 100%; }
        .footer { margin-top: 15px; padding-top: 8px; border-top: 1px solid #ddd; font-size: 9px; color: #999; }
    </style>
</head>
<body>
    <div class="header">
        <h1>{{ title }}</h1>
        {% if metadata %}
        <div class="meta-row">
            {% if metadata.test_number %}<span>Test: {{ metadata.test_number }}</span>{% endif %}
            {% if metadata.vehicle.make %}<span>Vehicle: {{ metadata.vehicle.year }} {{ metadata.vehicle.make }} {{ metadata.vehicle.model }}</span>{% endif %}
            {% if metadata.dummy.dummy_type %}<span>Dummy: {{ metadata.dummy.dummy_type }}</span>{% endif %}
            {% if metadata.impact.test_type %}<span>Type: {{ metadata.impact.test_type }}</span>{% endif %}
        </div>
        {% endif %}
    </div>

    <div class="plot-container">
        {{ plot_html | safe }}
    </div>

    <div class="footer">
        Generated by Impakt
    </div>
</body>
</html>
