{% extends "head.html" %}

{% block title %}Vehicle History Check{% endblock %}

{% block content %}
<div class="container-lg py-4">
    <div class="p-5 mb-4 bg-light rounded-3">
        <h1 class="display-4">Buying a Used Car? Check it!</h1>
        <p class="lead">
            <a href="https://www.salvagedb.com/" title="Salvagedb.com" rel="nofollow">Salvagedb.com</a> 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="row">
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h2 class="h5 mb-0">Vehicle Details</h2>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tbody>
                        <tr>
                            <td>Make</td>
                            <td>{{det[0][1]}}</td>
                        </tr>
                        <tr>
                            <td>Model</td>
                            <td>{{det[0][2]}}</td>
                        </tr>
                        <tr>
                            <td>Year</td>
                            <td>{{det[0][3]}}</td>
                        </tr>
                        <tr>
                            <td>Body Style</td>
                            <td>{{det[0][4]}}</td>
                        </tr>
                        <tr>
                            <td>Engine</td>
                            <td>{{det[0][5]}}</td>
                        </tr>
                        <tr>
                            <td>Cylinders</td>
                            <td>{{det[0][6]}}</td>
                        </tr>
                        <tr>
                            <td>Drive</td>
                            <td>{{det[0][7]}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            {% if his %}
            <div class="card">
                <div class="card-header">
                    <h2 class="h5 mb-0">Salvage History</h2>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                            <tr>
                                <th scope="col">VIN</th>
                                <th scope="col">Title</th>
                                <th scope="col">Odometer</th>
                                <th scope="col">Odometer Status</th>
                                <th scope="col">Primary Damage</th>
                                <th scope="col">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>
                    
                    <!-- PDF Report Download Button -->
                    <div class="mt-3">
                        <a href="/salvagereport/{{vin}}" class="btn btn-primary w-100">
                            <i class="fas fa-file-pdf me-2"></i> Download PDF Report
                        </a>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="alert alert-warning">
                <h2 class="h5 mb-0">Salvage history not found.</h2>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
