<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Search Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/styles/search.css" />
</head>

<body>
  <!-- HEADER-->
  <%- include('partials/header') %>


  <div class="container">
    <!-- search filter input row -->
    <div class="row">
      <div class="col-sm-12 mb-3">
        <input type="text" id="myFilter" class="form-control" onkeyup="myFunction()" placeholder="Search for..." />
      </div>
    </div>

    <!-- course list row -->
    <div class="row" id="myItems">
      <div class="col-sm-12 mb-3">
       
        <!-- course cards -->
        <% for (var i=0; i< courseData.length; i++ ) { %>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title"><a href="#"> <%= courseData[i].course_name %></a></h5>
              <h6 class="card-subtitle mb-2 text-muted"><%= courseData[i].description %></h6>
              <p class="card-text"><%= courseData[i].count %>(<%= courseData[i].size %>)
              </p>
            </div>
          </div>
        <% } %> 

        <!-- footer -->
  <%- include('partials/footer') %>
  <script>
    function myFunction() {
      var input, filter, cards, cardContainer, h5, title, i;
      input = document.getElementById("myFilter");
      filter = input.value.toUpperCase();
      cardContainer = document.getElementById("myItems");
      cards = cardContainer.getElementsByClassName("card");
      for (i = 0; i < cards.length; i++) {
        title = cards[i].querySelector(".card-body");
        if (title.innerText.toUpperCase().indexOf(filter) > -1) {
          cards[i].style.display = "";
        } else {
          cards[i].style.display = "none";
        }
      }
    }
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>