<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/main.css" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="flex flex-col h-screen bg-zinc-900">
  <header class="sticky top-0 z-10 flex flex-row content-center justify-between flex-shrink-0 w-full px-5 h-14 bg-zinc-800">
    <div class="flex flex-row content-center">
      <a href="/" class="flex self-center px-2 text-2xl font-normal text-zinc-300">
        yam
      </a>
    </div>
    <form class="flex flex-row content-center py-2 text-center">
      <input class="pl-2 pr-10 border rounded-l-sm outline-none w-96 text-zinc-100 bg-zinc-900 focus:border-zinc-600 border-zinc-700" type="text" placeholder="Search" />
      <button type="submit" class="px-5 bg-zinc-700">
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="w-6 h-6">
          <g>
            <path class="fill-zinc-300" d="M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z"></path>
          </g>
        </svg>
      </button>
    </form>
    <div class="flex flex-row content-center justify-end ">
      <% if(locals.user) { %>
      <div id="user" class="flex h-full">
        <a href="#user" class="self-center px-2 text-xl font-normal text-zinc-300">
          <%= user %>
        </a>
        <div class="fixed top-0 left-0 flex w-screen h-screen popup">
          <a href="#" class="fixed top-0 left-0 z-10 flex w-full h-full cursor-default"></a>
          <div class="fixed z-20 flex flex-col p-1 pt-0 rounded-b w-52 top-14 right-3 bg-zinc-800">
            <a href="/me" class="self-center w-full px-3 py-2 text-base font-normal rounded cursor-pointer text-zinc-300 hover:bg-zinc-700">
              Profile
            </a>
            <a href="/orders" class="self-center w-full px-3 py-2 text-base font-normal rounded cursor-pointer text-zinc-300 hover:bg-zinc-700">
              Orders
            </a>
            <a href="/sell#0" class="self-center w-full px-3 py-2 text-base font-normal rounded cursor-pointer text-zinc-300 hover:bg-zinc-700">
              Sell
            </a>
            <form action="/logout" method="post" class="flex border-t border-t-zinc-700">
              <button type="submit" class="self-center w-full px-3 py-2 text-base font-normal text-left rounded cursor-pointer text-zinc-300 hover:bg-zinc-700">
                Log out
              </button>
          </div>
        </div>
      </div>
      <% } else { %>
      <a href="/login" class="flex flex-row items-center content-center gap-2 px-3 my-2 border rounded-sm border-emerald-400 text-emerald-400">
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="w-6 h-6">
          <g>
            <path class="fill-emerald-400" d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,3c4.96,0,9,4.04,9,9 c0,1.42-0.34,2.76-0.93,3.96c-1.53-1.72-3.98-2.89-7.38-3.03C14.57,12.6,16,10.97,16,9c0-2.21-1.79-4-4-4C9.79,5,8,6.79,8,9 c0,1.97,1.43,3.6,3.31,3.93c-3.4,0.14-5.85,1.31-7.38,3.03C3.34,14.76,3,13.42,3,12C3,7.04,7.04,3,12,3z M9,9c0-1.65,1.35-3,3-3 s3,1.35,3,3c0,1.65-1.35,3-3,3S9,10.65,9,9z M12,21c-3.16,0-5.94-1.64-7.55-4.12C6.01,14.93,8.61,13.9,12,13.9 c3.39,0,5.99,1.03,7.55,2.98C17.94,19.36,15.16,21,12,21z" class="style-scope yt-icon"></path>
          </g>
        </svg>
        <span class="text-sm font-semibold tracking-wide uppercase">
          Sign In
        </span>
      </a>
      <% } %>
    </div>
  </header>
  <%-body%>
</body>

</html>