
<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('./partials/head') %>
    <style>
         .outline-light{
            background: #5bc0de;
            color:#f7f7f7;
            border: none;
        }
        .outline-light:hover{
            background:white;
            color:#5cb85c;
            transition: 0.1s;
        }
        .card-body-news{
            display: flex;
            justify-content: space-between;
            align-items: center!important;
        }
    </style>
  </head>
  <body style="background-color: #ffffff">
    <%- include('./partials/nav') %> 
    <br><br>
    <div class="container" style="background: #5cb85c; padding:2%; border-radius:5px">
        <h3 class="lead" style="font-weight:400;color:white"><b>Search For Upcoming Travels</b></h3><br>
        <div class="row">
            <div class="col"></div>
            <div class="col d-flex justify-content-center">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-warning my-2 my-sm-0" type="submit">Search</button>
            </div>
            <div class="col"></div>
        </div>
    </div><br><br>
    
    <div class="available_lifts container">
        <h3 class="lead" style="font-weight:400"><b>Upcomming Travels</b></h3><br>
        <% for(var i=1;i<=3;i++){ %>
            <div class="card outline-light">
                <div class="card-body">
                  <h5 class="card-title"><%= towards_data[i-1] %></h5>
                  <h6 class="card-subtitle text-muted">Comes to your location at <%= time[i-1] %></h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div><br>
        <% } %>
    </div>
    
    
    <%- include('./partials/footer')%>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
