<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vehicle History Report</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #333;
            padding-bottom: 20px;
        }
        .header h1 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .header p {
            font-size: 14px;
            color: #666;
        }
        .report-date {
            text-align: right;
            font-size: 12px;
            margin-bottom: 20px;
        }
        .section {
            margin-bottom: 30px;
        }
        .section-title {
            font-size: 18px;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #ddd;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .footer {
            margin-top: 50px;
            text-align: center;
            font-size: 12px;
            color: #666;
            border-top: 1px solid #ddd;
            padding-top: 20px;
        }
        .disclaimer {
            font-size: 10px;
            margin-top: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Vehicle History Report</h1>
            <p>SALVAGEDB.COM - Comprehensive Vehicle History Check</p>
        </div>
        
        <div class="report-date">
            <p>Report Date: {{report_date}}</p>
            <p>Report ID: {{report_id}}</p>
        </div>
        
        <div class="section">
            <h2 class="section-title">Vehicle Information</h2>
            <table>
                <tbody>
                    <tr>
                        <td><strong>VIN</strong></td>
                        <td>{{vin}}</td>
                    </tr>
                    <tr>
                        <td><strong>Make</strong></td>
                        <td>{{det[0][1]}}</td>
                    </tr>
                    <tr>
                        <td><strong>Model</strong></td>
                        <td>{{det[0][2]}}</td>
                    </tr>
                    <tr>
                        <td><strong>Year</strong></td>
                        <td>{{det[0][3]}}</td>
                    </tr>
                    <tr>
                        <td><strong>Body Style</strong></td>
                        <td>{{det[0][4]}}</td>
                    </tr>
                    <tr>
                        <td><strong>Engine</strong></td>
                        <td>{{det[0][5]}}</td>
                    </tr>
                    <tr>
                        <td><strong>Cylinders</strong></td>
                        <td>{{det[0][6]}}</td>
                    </tr>
                    <tr>
                        <td><strong>Drive</strong></td>
                        <td>{{det[0][7]}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        {% if his %}
        <div class="section">
            <h2 class="section-title">Salvage History</h2>
            <table>
                <thead>
                    <tr>
                        <th>VIN</th>
                        <th>Title</th>
                        <th>Odometer</th>
                        <th>Odometer Status</th>
                        <th>Primary Damage</th>
                        <th>Secondary Damage</th>
                    </tr>
                </thead>
                <tbody>
                    {% for it in his %}
                    <tr>
                        <td>{{it[1]}}</td>
                        <td>{{it[2]}}</td>
                        <td>{{it[3]}}</td>
                        <td>{{it[4]}}</td>
                        <td>{{it[5]}}</td>
                        <td>{{it[6]}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="section">
            <div class="alert-warning" style="padding: 15px; background-color: #fcf8e3; border: 1px solid #faebcc; color: #8a6d3b;">
                <h2 style="font-size: 16px; margin: 0;">Salvage history not found.</h2>
            </div>
        </div>
        {% endif %}
        
        <div class="disclaimer">
            <p><strong>Disclaimer:</strong> This report provides information about salvage or junk vehicles; damage from hail, flood or fire; mileage discrepancies or odometer rollback; and gray market vehicles. We do not claim that the car got in our databank has salvage title, but the fact that it has been damaged for sure. Our site helps people avoid buying a damaged vehicle in the past.</p>
        </div>
        
        <div class="footer">
            <p>&copy; {{current_year}} SalvageDB.com - All Rights Reserved</p>
            <p>This report is provided as is without any guarantees or warranty. For additional assistance, please contact us.</p>
        </div>
    </div>
</body>
</html> 