<!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><%= noteName %></title>

    <%- include('spa-partials/head') %>
</head>

<body class="h-screen bg-gradient-to-br from-amber-400 to-amber-300">
    <div class="p-3 m-5 border border-slate-900 rounded-lg bg-slate-700 bg-opacity-60 whitespace-no-wrap">
      <h1 class="text-3xl font-semibold"><%= noteName %></h1>
      <p>Created On <%= createdOn %></p>
    </div>
    <div class="p-3 m-5 border border-slate-900 rounded-lg bg-slate-700 bg-opacity-60 whitespace-no-wrap">
      <div class="text-lg flex h-auto justify-around md:justify-start sm:justify-normal">
        <a href="/notes/edit/<%= id %>" class="">Edit <i class="fa-solid fa-pencil"></i></a>
        <div class="bg-slate-900 w-[0.75] mx-3"></div>
        <a href="/notes/delete/<%= id %>" class="float-right justify-end">Delete <i class="fa-solid fa-trash"></i></a>
      </div>
    </div>
  <div class="p-3 m-5 border border-slate-900 rounded-lg bg-slate-700 bg-opacity-60 whitespace-no-wrap">
    <% var noteCon = noteContent; noteCon.replace('\n', '<br>')%>
      <p><%- noteCon.replace('\r', '<br>') %></p>
  </div>
</body>

</html>