<!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" />
  <script src="https://cdn.tailwindcss.com"></script>
  <title>NOTES</title>
</head>

<body>
  <div class="main w-full min-h-screen bg-zinc-900 text-white">
    <div class="form">
      <form action="/create" method="post" class="p-10">
        <input class="block px-5 py-2 w-full rounded-md outline-none bg-zinc-800" type="text"
          placeholder="Title goes here" name="title" />
        <textarea class="block px-5 mt-2 py-2 w-full rounded-md outline-none resize-none bg-zinc-800"
          placeholder="Write your task here" name="details"></textarea>
        <input class="mt-2 bg-blue-600 px-5 py-2 rounded-md" type="submit" value="create task" />
      </form>
    </div>
    <div class="tasks flex gap-3 flex-wrap p-10">

      <% if (files.length> 0) { %>
        <% files.forEach(function(val){ %>
          <div class="task min-w-72 px-3 py-4 rounded-md bg-zinc-800">
            <h1 class="text-whit text-3xl tracking-tighter">
              <%= val %>
            </h1>
            <div class="mt-3 flex w-full justify-between item-center">
              <a href="/file/<%=val%>" class="text-blue-500 inline-block ">Read More...</a>
              <a href="/edit/<%= val %>" class="text-zinc-600">Rename File</a>
            </div>

          </div>
          <% }) %>
            <% } else { %>

              <h3 class="text-zinc-600">No Task Yet.</h3>
              <% } %>
    </div>
  </div>
</body>

</html>