{% extends "head.html" %}

{% block title %}Buying a Used Car? Check it!{% 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 lead-main">
            <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 justify-content-center">
        <div class="col-md-8">
            <form id="search_bar" action="/decode" method="post" class="mb-4">
                <div class="card">
                    <div class="card-header text-center">
                        <h2 class="h4 mb-0">ENTER <a href="https://en.wikipedia.org/wiki/Vehicle_Identification_Number" target="_blank" class="text-decoration-none">VIN</a> OF YOUR CAR</h2>
                    </div>
                    <div class="card-body">
                        <div class="input-group">
                            <input type="text" id="vininput" name="q" 
                                   class="form-control" 
                                   style="width: 80%;"
                                   autocomplete="off" 
                                   placeholder="Enter VIN number"
                                   autofocus required 
                                   validate="length_between,17,17">
                            <button class="btn btn-primary g-recaptcha d-flex align-items-center justify-content-center" 
                                    type="submit" 
                                    data-sitekey="{{capcha_site}}" 
                                    id="go_button" 
                                    data-callback='onSubmit' 
                                    data-action='submit'>Check It</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <h2 class="text-center mb-4">Over {{ cnt }} salvage vehicles added.</h2>
    <div class="text-center">
        <img src="static/vin-position1.gif" class="img-fluid" alt="VIN position diagram">
    </div>
</div>

<script>
   function onSubmit(token) {
     document.getElementById("search_bar").submit();
   }
</script>
        
{% endblock %}

            