<!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>Booch</title>
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/imgs/favicon-32x32.png"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../css/output.css" />
  </head>
  <body>
    <header>
      <nav class="fixed top-0 z-50 w-full border-b-2 border-slate-400 bg-slate-500">
        <div class="px-3 py-3 lg:px-5 lg:pl-3">
          <div class="flex items-center justify-between">
            <div class="flex items-center justify-start rtl:justify-end">
              <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm text-slate-700 rounded-lg sm:hidden hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-300">
                  <span class="sr-only">Open sidebar</span>
                  <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
                  </svg>
               </button>
              <a href="/profile" class="flex md:me-24">
                <img src="/imgs/logo.png" class="h-8 hover:animate-rotationalwave" alt="Logo" />
                <span class="self-center text-xl text-slate-700 font-light md:text-3xl whitespace-nowrap">Booch</span>
              </a>
            </div>
            <div class="flex items-center">
              <div class="flex items-center ms-3">
                <button id="dropdownAvatarNameButton" data-dropdown-toggle="dropdownAvatarName" class="flex items-center text-sm pe-1 font-medium text-slate-800 rounded-full" type="button">
                  <span class="sr-only">Open user menu</span>
                  <img class="object-cover w-10 h-10 me-3 rounded-full" src="<%= user.image %>" alt="user photo">
                  <span class="font-normal"><%= user.userName.toUpperCase() %></span>
                  <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                  </svg>
                </button>
                <div id="dropdownAvatarName" class="z-10 hidden bg-slate-400 divide-y divide-slate-100 border-slate-300 border-2 rounded-md shadow w-56">
                  <div class="p-3 text-sm text-slate-700">
                    <div class="truncate font-light"><%= user.email %></div>
                  </div>
                  <div class="p-3 text-slate-700" aria-labelledby="dropdownInformdropdownAvatarNameButtonationButton">
                    <button data-modal-target="user-edit" data-modal-toggle="user-edit" role="link" class="relative font-light after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-slate-200 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100">Settings</button>
                  </div>
                  <div class="p-3 text-slate-700">
                    <a href="/logout">
                      <button role="link" class="relative font-light after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-slate-200 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100">Logout</button>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>

      <aside id="logo-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-slate-700 sm:translate-x-0" aria-label="Sidebar">
        <div class="h-full px-3 pb-4 overflow-y-auto bg-slate-700">
          <ul class="space-y-4 font-extralight">
            <li class="flex justify-end">
              <a href="/profile">
                <button role="link" class="relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 text-slate-300 text-lg after:bg-slate-400 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100">Brews</button>
              </a>
            </li>
            <li class="flex justify-end">               
             <button data-modal-target="add-brew" data-modal-toggle="add-brew" role="link" class="relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 text-slate-300 text-lg after:bg-slate-400 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100">Add A Brew</button>
            </li>
            <li class="flex justify-end">
              <a href="/pastBrews">
                <button role="link" class="relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 text-slate-300 text-lg after:bg-slate-400 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100">Past Brews</button>
              </a>
            </li>
            <li class="flex justify-end">
              <a href="/recipes">
                <button role="link" class="relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 text-slate-300 text-lg after:bg-slate-400 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100">Recipes</button>
              </a>
            </li>
            <li class="flex justify-end">
             <button data-modal-target="add-recipe" data-modal-toggle="add-recipe" role="link" class="relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 text-slate-300 text-lg after:bg-slate-400 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100">Add A Recipe</button>
            </li>
          </ul>
        </div>
      </aside>
    </header>

    <!--Add Recipe Modal-->
    <div id="add-recipe" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
      <div class="relative p-4 w-full max-w-md max-h-full">
        <div class="relative bg-slate-700 border-2 border-slate-300 rounded-lg shadow">
          <div class="flex items-center justify-between p-4 md:p-5 border-b border-b-slate-200 rounded-t">
            <h3 class="text-xl font-medium text-slate-200">
              Add A New Recipe
            </h3>
            <button type="button" class="text-slate-300 bg-transparent hover:bg-slate-300 hover:text-slate-800 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="add-recipe">
              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
              </svg>
              <span class="sr-only">Close modal</span>
            </button>
          </div>
          <form action="/recipe/createRecipe" enctype="multipart/form-data" method="post" class="p-4 md:p-5">
            <div class="grid gap-4 mb-4 grid-cols-2">
              <div class="col-span-2">
                <label for="name" class="block mb-2 text-sm font-normal text-slate-200">Name</label>
                <input type="text" name="name" id="name" class="bg-slate-800 text-slate-200 text-sm rounded-lg border-slate-600 focus:ring-slate-300 focus:border-slate-300 block w-full p-2.5" required="">
              </div>
            </div>
            <div class="col-span-2">
              <label class="block mt-6 mb-2 text-sm font-normal text-slate-200" for="user_avatar">Add A Picture</label>
              <input class="block text-sm text-slate-200 border-2 border-slate-600 rounded-lg cursor-pointer bg-slate-800 focus:ring-slate-300" aria-describedby="recipe_iamge_help" id="recipe_image" name="file" type="file">
              <div class="mt-1 text-sm text-slate-400" id="recipe_image_help">2mb max. png or jpg</div>
            </div>
            <button type="submit" class="group relative inline-flex mt-6 h-8 items-center justify-center overflow-hidden rounded-md bg-slate-500 px-6 font-medium text-slate-200">
              <div class="mr-0 w-0 -translate-x-[100%] opacity-0 transition-all duration-200 group-hover:mr-1 group-hover:w-5 group-hover:translate-x-0 group-hover:opacity-100">
                <svg class="me-1 -ms-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
              </div>
              <span class="font-normal">Add Recipe</span>
            </button>
          </form>
        </div>
      </div>
    </div>  

    <!--Add Brew Modal-->
    <div id="add-brew" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
      <div class="relative p-4 w-full max-w-md max-h-full">
        <div class="relative bg-slate-700 border-2 border-slate-300 rounded-lg shadow-xl">
          <div class="flex items-center justify-between p-4 md:p-5 border-b border-b-slate-200 rounded-t">
              <h3 class="text-xl font-medium text-slate-200">Add a Brew</h3>
              <button type="button" class="text-slate-400 bg-transparent hover:bg-slate-300 hover:text-slate-800 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center" data-modal-toggle="add-brew">
                  <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                  </svg>
                  <span class="sr-only">Close modal</span>
              </button>
          </div>
          <form action="/brew/createBrew" method="post" enctype="multipart/form-data" class="p-4 md:p-5">
            <div class="grid gap-4 mb-4 grid-cols-2">
              <div class="col-span-2">
                <label for="name" class="block mb-2 text-sm font-normal text-slate-200">Name Your Brew</label>
                <input type="text" name="name" id="name" class="bg-slate-800 text-slate-200 text-sm rounded-lg border-slate-600 focus:ring-slate-300 focus:border-slate-300  block w-full p-2.5" required="">
              </div>
              <div class="col-span-2 sm:col-span-1">
                <label for="avgTemp" class="block mb-2 text-sm font-normal text-slate-200">Average Temp</label>
                <input type="number" name="avgTemp" id="avgTemp" class="bg-slate-800 border border-slate-600 text-slate-200 text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 w-full p-2.5" required="">
              </div>
              <div class="col-span-2 sm:col-span-1">
                <label for="tea" class="block mb-2 text-sm font-normal text-slate-200">Tea</label>
                <input type="text" name="tea" id="tea" class="bg-slate-800 border border-slate-600 text-slate-200 text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 w-full p-2.5" required="">
              </div>
              <div class="col-span-1 sm:col-span-1">
                <label for="recipe" class="block mb-2 text-sm font-normal text-slate-200">Pick A Recipe</label>
                <select id="recipe" name="recipe" class="bg-slate-800 border border-slate-600 text-slate-200 text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full p-2.5">
                  <option selected="">Select Recipe</option>
                  <% for(i=0; i < recipe.length; i++ ) { %>
                    <option value="<%= recipe[i].name %>"><%= recipe[i].name %></option>
                  <% } %>
                </select>
              </div>
              <div date-rangepicker datepicker-autohide class="col-span-2 flex items-center">
                <div class="relative max-w-sm mb-3">
                  <label class="block mt-2 mb-1 text-sm font-normal text-slate-200" for="brew_image">First Fermentation</label>
                  <div class="absolute mt-8 inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                    <svg class="w-4 h-4 text-slate-200 fill-slate-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
                    </svg>
                  </div>
                  <input data-date="MM/DD/YYYY" type="text" name="firstFermentStart" class="bg-slate-800 border border-slate-600 text-slate-200 text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full ps-10 p-2.5" placeholder="Start">
                </div>
                <span class="mx-2 mt-4 text-slate-500">to</span>
                <div class="relative mt-8 max-w-sm mb-3">
                  <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                    <svg class="w-4 h-4 text-slate-200 fill-slate-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
                    </svg>
                  </div>
                  <input data-date="MM/DD/YYYY" type="text" name="firstFermentEnd" class="bg-slate-800 border border-slate-600 text-slate-200 text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full ps-10 p-2.5" placeholder="End">
                </div>
              </div>
              <div class="col-span-2">
                <label class="block mt-2 mb-2 text-sm font-normal text-slate-200" for="brew_image">Add A Picture</label>
                <input class="block w-full text-sm text-slate-200 border-2 border-slate-600 rounded-lg cursor-pointer bg-slate-800 focus:ring-slate-300" aria-describedby="brew_image_help" id="brew_image" name="file" type="file">
                <div class="mt-1 text-sm text-slate-400" id="brew_image_help">2mb max. png or jpg</div>
              </div>
            </div>
            <button type="submit" class="group relative inline-flex h-10 items-center justify-center overflow-hidden rounded-md bg-slate-500 px-6 font-normal text-slate-200">
              <div class="mr-0 w-0 -translate-x-[100%] opacity-0 transition-all duration-200 group-hover:mr-1 group-hover:w-5 group-hover:translate-x-0 group-hover:opacity-100">
                <svg class="me-1 -ms-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
              </div>
              <span>Add Brew</span>
            </button>
          </form>
        </div>
      </div>
    </div>

    <%# User Edit Modal %>
    <div id="user-edit" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
      <div class="relative p-4 w-full max-w-md max-h-full">
        <div class="relative bg-slate-700 border-2 border-slate-300 rounded-lg shadow">
          <div class="flex items-center justify-between p-4 md:p-5 border-b-slate-200 border-b border-b-slate-200 rounded-t">
            <h3 class="text-lg font-semibold text-slate-200">Edit User Info</h3>
            <button type="button" class="text-slate-400 bg-transparent hover:bg-slate-300 hover:text-slate-800 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="user-edit">
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
                <span class="sr-only">Close modal</span>
            </button>
          </div>
          <form action="/login/editUser/<%= user._id %>" enctype="multipart/form-data" method="post" class="p-4 md:p-5">
            <div class="grid gap-2 mb-1 grid-cols-2">
              <div class="col-span-2">
                  <label for="name" class="block mb-1 text-sm font-normal text-slate-200">Change Username</label>
                  <input type="text" name="name" id="name" class="bg-slate-800 text-slate-200 border-slate-600 text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full p-2.5" placeholder="<%= user.userName %>" value="<%= user.userName %>">
              </div>
              <div class="col-span-2">
                <label for="email" class="block mb-1 text-sm font-normal text-slate-200">Change Email</label>
                <input type="text" name="email" id="email" class="bg-slate-800 text-slate-200 border-slate-600 text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full p-2.5" placeholder="<%= user.email %>" value="<%= user.email %>">
              </div>
              <div class="col-span-1">
                <label for="password" class="block mb-1 text-sm font-normal text-slate-200">New Password</label>
                <input type="password" name="password" id="password" placeholder="••••••••" class="bg-slate-800 text-slate-200 border-slate-600 sm:text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full p-2.5">
              </div>
              <div class="col-span-1">
                <label for="confirmPassword" class="block mb-1 text-sm font-normal text-slate-200">Confirm New Password</label>
                <input type="password" name="confirmPassword" id="confirmPassword" placeholder="••••••••" class="bg-slate-800 text-slate-200 border-slate-600 sm:text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full p-2.5">
              </div> 
            </div>
            <button type="submit" class="col-span-2 mt-2 group relative inline-flex h-10 items-center justify-center overflow-hidden rounded-md bg-slate-500 px-6 font-medium text-slate-200">
              <div class="mr-0 w-0 -translate-x-[100%] opacity-0 transition-all duration-200 group-hover:mr-1 group-hover:w-5 group-hover:translate-x-0 group-hover:opacity-100">
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
                  <path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
                </svg>
              </div>
              <span class="font-normal">Save</span>
            </button>
          </form>
          <form action="/login/editUserPicture/<%= user._id %>" enctype="multipart/form-data" method="post" class="p-4 md:p-5">
            <div class="flex flex-row items-center">
              <div>
                <label class="block mb-2 text-sm font-medium text-slate-200" for="user_avatar">Edit/Add photo</label>
                <input class="block text-sm text-slate-200 border-slate-600 border-2 rounded-lg cursor-pointer bg-slate-800 focus:ring-slate-300" aria-describedby="user_avatar_help" id="file" name="file" type="file">
                <div class="mt-1 ml-2 text-sm text-slate-400" id="user_image_help">2mb max. png or jpg</div>
              </div>
              <button type="submit" class="col-span-2 mt-1 ml-1 group relative inline-flex h-10 items-center justify-center overflow-hidden rounded-md bg-slate-500 px-6 font-medium text-slate-200">
                <div class="mr-0 w-0 -translate-x-[100%] opacity-0 transition-all duration-200 group-hover:mr-1 group-hover:w-5 group-hover:translate-x-0 group-hover:opacity-100">
                  <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
                    <path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <span class="font-normal text-xs">Save</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>   
  </body>
</html>