<!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&family=Indie+Flower&family=Lobster&family=Roboto&display=swap" rel="stylesheet">
    <title>Todo App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="/style.css" />
    
</head>
<body>
    <section class = "todo-container">
        <h2> To Do List </h2>
        <div class ="todo">
            <form action="/" method="POST" class="todo-header">
            <input type="text" name="title" value="title">
            <textarea rows="6" cols="45" name="content">content</textarea>
            <button type="submit">submit<span class ="fas fa-plus"></span></button>
            </form>
            <ul class="todo-list">
                <% todoTask.forEach(data => { %>
                <li class="todo-list-item">
                   <div class = "todo-list-item-title">
                        <%= data.title %> 
                   </div>
                   <div class = "todo-list-item-content">
                    <%= data.content %> 
               </div>
               <a href="/edit/<%=data._id%>" class="edit"
                ><span><i class="fa-solid fa-pen-to-square"></i></span>
               </a>
               <a href="/remove/<%=data._id%>" class="remove">
                <span><i class="fa-solid fa-xmark"></i></span>   
               </a>
                 </li>
               <% }) %>
            </ul>
        </div>
    </section>
    

<script>
</script>
</body>
</html>