<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Search Courses</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="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet'>
    <link rel="stylesheet" href="/styles/index.css">
   
</head>
<body>
<%- include('partials/header') %>

<h1>StackOps HQ</h1>
<h3>Course Library</h3> 
 <% for (var i=0; i< courseData.length; i++ ) { %>
  <form method="POST" action="/deleteCourse/<%= courseData[i]._id %>" style="display: inline-block">  
    <%= courseData[i].course_name %> <%= courseData[i].description %> <%= courseData[i].count %>(<%= courseData[i].size %>) 
    <input type="submit" value="delete"> 
  </form>
  <br/>
<% } %> 

<h3>Update the Course</h3> 
 <% for (var i=0; i< courseData.length; i++ ) { %>
  <form method="POST" action="/updateCourse/<%= courseData[i]._id %>" style="display: inline-block" id = "testing">  
    <%= courseData[i].course_name %> <%= courseData[i].description %> <%= courseData[i].count %>(<%= courseData[i].size %>) 
    <input type="submit" value="update"> 
  </form>
  <br/>
<% } %> 
<!-- update our db -->

<form method="get" action="/create">
    <h3>Add a Course</h3>
    <input type="text" placeholder="Course Number" name="course_name" value=""> <br> 
    <input type="text" placeholder="Course Name" name="description" value=""> <br> 
    <input type="text" placeholder="Languages" name="count" value=""> <br> 
    <input type="submit" onclick="document.location.reload()">
  </form>
<br> <br>

<!-- footer -->
<%- include('partials/footer') %>

  <!-- <div class="footer-dark">
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-3 item">
                    <h3>Services</h3>
                    <ul>
                        <li><a href="#">Web design</a></li>
                        <li><a href="#">Development</a></li>
                        <li><a href="#">Hosting</a></li>
                    </ul>
                </div>
                <div class="col-sm-6 col-md-3 item">
                    <h3>About</h3>
                    <ul>
                        <li><a href="#">Company</a></li>
                        <li><a href="#">Meet the Team</a></li>
                        <li><a href="#">Careers</a></li>
                    </ul>
                </div>
                <div class="col-md-6 item text">
                    <h3>CourseInsider</h3>
                    <p>CourseInsider is an application designed to provide 
                      CIS students at the University of North Alabama with specific insights about 
                      the courses they take. This comes in the form of ratings, difficulty levels, 
                      and languages/applications used.</p>
                </div>
                <div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div>
            </div>
            <p class="copyright">CourseInsider Â© 2023</p>
        </div>
    </footer>
</div> -->


<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>