<!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 - {{report_id}}</title>
    <style>
        @media print {
            body {
                font-family: Arial, sans-serif;
                line-height: 1.6;
                color: #333;
                margin: 0;
                padding: 0;
            }
            .no-print {
                display: none !important;
            }
            @page {
                size: A4;
                margin: 10mm;
            }
        }
        
        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;
        }
        .print-controls {
            background-color: #f5f5f5;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
            border-radius: 5px;
        }
        .btn {
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            user-select: none;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: 0.25rem;
            text-decoration: none;
            margin-right: 10px;
            cursor: pointer;
        }
        .btn-primary {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-secondary {
            color: #fff;
            background-color: #6c757d;
            border-color: #6c757d;
        }
        .error-message {
            background-color: #f8d7da;
            color: #721c24;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
            border: 1px solid #f5c6cb;
        }
        .error-details {
            font-family: monospace;
            font-size: 12px;
            background: #f8f9fa;
            padding: 10px;
            border: 1px solid #ddd;
            max-height: 200px;
            overflow: auto;
            margin-top: 10px;
        }
    </style>
    <script>
        function printReport() {
            window.print();
        }
        
        function generatePDF() {
            // Уведомляем пользователя, что используем встроенную функцию браузера
            alert("Используйте функцию 'Сохранить как PDF' в диалоговом окне печати вашего браузера.");
            window.print();
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="print-controls no-print">
            <button class="btn btn-primary" onclick="printReport()">Print Report</button>
            <button class="btn btn-secondary" onclick="generatePDF()">Save as PDF</button>
            <a class="btn btn-secondary" href="javascript:history.back()">Back to Vehicle Details</a>
        </div>
        
        {% if error_message %}
        <div class="error-message no-print">
            <h3>PDF Generation Error</h3>
            <p>The system encountered an error while generating the PDF. You can print this page or save it as PDF using your browser's print function.</p>
            <div class="error-details">
                {{ error_message }}
            </div>
            <p>Note: To install WeasyPrint dependencies on Windows, see the <a href="https://doc.courtbouillon.org/weasyprint/stable/first_steps.html#windows" target="_blank">installation instructions</a>.</p>
        </div>
        {% endif %}
        
        <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> 