<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Books</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
    </style>
  </head>
  <body>
    <table>
    <tr>
        <th>Book Name</th>
        <th>Author</th>
        <th>Genre</td>
        <th>Delete Book</th>
        <th>Update Book</th>
    </tr>


    <%for(let i=0; i<books.length; i++){%>
        <tr>
            <td><%=books[i].name%></td>
            <td><%=books[i].author%></td>
            <td><%=books[i].genre%></td>
            <form method="POST" action=/books/delete/<%=books[i].id%>>
            <td><input type="submit" name="book" value="Delete book" /></td> 
            </form>
            <form method="POST" action=/books/update/<%=books[i].id%>>
                <td><input type="submit" name="update" value="Update book" /></td> 
            </form>
        </tr>
    <%}%>
</table>

  </body>
</html>
