<%- include('partials/html-start.ejs') %>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
       <a class="navbar-brand"><%= pageTitle %></a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
         <span class="navbar-toggler-icon"></span>
         </button>
     <div class="collapse navbar-collapse" id="collapsibleNavbar">
       <ul class="navbar-nav">
         <li class="nav-item">
           <a class="nav-link" target="foxtrotcode" href="https://github.com/cnorwood10/stunning-octo-enigma-quebec">Source Code</a>
         </li>
         <li>
           <a class="nav-link" target="blank" href="https://github.com/cnorwood10">About Me</a>
         </li>
       </ul>
     </div>
     </div>
   </nav>

   <h1>Vehicle Registration Center</h1>
    <% for (var i=0; i< vehicleData.length; i++ ) { %>
        <hr>
        
        <div class="row">
            <div class="card col-md-4 ">
                <h3>Current Vehicles</h3>
                <p>Owner of Vehicle: <%= vehicleData[i].name %></p>

                <p>Make: <%= vehicleData[i].vehicleMake %></p>

                <p>Model: <%= vehicleData[i].vehicleModel %></p>

                <p>Year: <%= vehicleData[i].vehicleYear %></p>

                <p>Mileage: <%= vehicleData[i].vehicleMileage %></p>
            </div>
        
        
        <br>

        
            <div class="card col-md-4">
                <h3>Update your Vehicle Registration</h3>

                <%= console.log(vehicleData) %>


                    <form method="POST">
                        <input type="hidden" id="id" name="id" value="<%= vehicleData[i]._id %>"></input>
                        <label for="name">New Owner: </label>
                        <input type="text" id="name" name="name" value="<%= vehicleData[i].name %>"></input>
                        <br></br>
                        <label for="vehicleMileage">New Mileage: </label>
                        <input type="number" id="vehicleMileage" name="vehicleMileage"value="<%= vehicleData[i].vehicleMileage %>">
                        <br><br>
                        <button class="btn btn-primary" type="submit" formaction="/updateVehicleData">Update VehicleData</button>
                        <button class="btn btn-danger" type="submit" formaction="/deleteVehicleData">Delete Vehicle Data</button>
                    </form>
                    <br>
            </div>
        </div>
        <% } %>
        <br><br>
            <div class="row">
                <div class="card col-md-4">
                    <h3>New Vehicle</h3>
                    <form method="POST" action="/addRegistration">
                        <label for="name">Owner of Vehicle: </label>
                        <input name="name" placeholder="Name">
                        <br><br>
                        <label for="vehicleMake">Make: </label>
                        <input name="vehicleMake" placeholder="Make">
                        <br><br>
                        <label for="vehicleModel">Model: </label>
                        <input name="vehicleModel" placeholder="Model">
                        <br><br>
                        <label for="vehicleYear">Year: </label>
                        <input name="vehicleYear" placeholder="Year">
                        <br><br>
                        <label for="vehicleMileage">Miles: </label>
                        <input name="vehicleMileage" placeholder="Miles">
                        <br><br>
                        <button class="btn btn-success" type="submit">Add Vehicle</button>
                    </form>
                </div>
            </div>

            </footer>

            <%- include('partials/html-end.ejs') %>