<%- include('partials/header') -%>
<div class="fixed h-screen w-full bg-slate-400">
  <div class="absolute inset-0 bg-slate-100 bg-[size:20px_20px] opacity-20 blur-[100px]"></div>
</div>
<div class="relative p-4 sm:ml-64">
  <div class="flex flex-col items-center p-4 mt-14">      
    <div class="flex flex-col md:h-96 bg-slate-700 rounded-lg mb-12 md:min-w-full shadow-xl md:flex-row">
      <button data-modal-target="edit-picture" data-modal-toggle="edit-picture" role="link" class="absolute m-2 place-self-end z-10 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">Edit</button>
      <img class="object-cover h-96 md:w-2/6 rounded-t-lg  md:rounded-tl-lg md:rounded-bl-lg md:rounded-tr-none" src="<%= recipe.image %>" alt="brew image">
      <div class="flex flex-col w-full md:w-4/6 justify-between p-4 space-y-2">
        <h1 class="text-xl md:text-4xl w-4/5 font-thin tracking-wide text-slate-300"><%= recipe.name %></h1>
        <p class="h-36 w-full text-sm md:text-lg font-light text-slate-300 whitespace-normal break-words overflow-scroll"><%= recipe.note %></p>
        <div class="flex items-center">
          <form action="/recipe/rateRecipe/<%= recipe.id %>?_method=PUT" method="POST" class="flex flex-row-reverse place-self-center my-4">
            <% let ratedOne = ratedTwo = ratedThree = ratedFour = ratedFive = "*:fill-slate-500";%>
            <% switch (recipe.rating) {
                case 5:
                  ratedOne = ratedTwo = ratedThree = ratedFour = ratedFive = "*:fill-amber-400";
                  break;
                case 4:
                  ratedOne = ratedTwo = ratedThree = ratedFour = "*:fill-amber-400";
                  break;
                case 3:
                  ratedOne = ratedTwo = ratedThree = "*:fill-amber-400";
                  break;
                case 2:
                  ratedOne = ratedTwo = "*:fill-amber-400";
                  break;
                case 1:
                  ratedOne = "*:fill-amber-400";
                  break;
                default:
            } %>
            <button type="submit" value="5" name="rating" class="peer *:peer-hover:fill-amber-400 *:hover:fill-amber-400 <%= ratedFive %>">
              <svg class="w-6 h-6 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
                  <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
              </svg>
            </button>
            <button type="submit" value="4" name="rating" class="peer *:peer-hover:fill-amber-400 *:hover:fill-amber-400 <%= ratedFour %>">
              <svg class="w-6 h-6 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
                  <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
              </svg>
            </button>
            <button type="submit" value="3" name="rating" class="peer *:peer-hover:fill-amber-400 *:hover:fill-amber-400 <%= ratedThree %>">
              <svg class="w-6 h-6 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
                  <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
              </svg>
            </button>
            <button type="submit" value="2" name="rating" class="peer *:peer-hover:fill-amber-400 *:hover:fill-amber-400 <%= ratedTwo %>">
              <svg class="w-6 h-6 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
                  <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
              </svg>
            </button>
            <button type="submit" value="1" name="rating" class="peer *:peer-hover:fill-amber-400 *:hover:fill-amber-400 <%= ratedOne %>">
              <svg class="w-6 h-6 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
                  <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
              </svg>
            </button>
          </form>
        </div>
        <% if (recipe.status === 'edit') { %>
          <div class="place-self-end inline-flex space-x-2">
            <form action="/recipe/deleteRecipe/<%= recipe.id %>?_method=DELETE" method="post">
              <button type="submit" class="group relative inline-flex h-10 items-center justify-center overflow-hidden rounded-md bg-slate-500 px-6 font-medium text-slate-300">
                <span class="absolute h-0 w-0 rounded-full bg-red-500 transition-all duration-300 group-hover:h-56 group-hover:w-32"></span>
                <span class="relative">Delete</span>
              </button>
            </form>
          </div>
        <% } else { %>
        <div class="place-self-end inline-flex space-x-2">
          <form class="col-1" action="/recipe/editRecipeStatus/<%= recipe._id %>?_method=PUT" method="POST">
            <button type="submit" class="group relative inline-flex h-10 items-center justify-center overflow-hidden rounded-md bg-slate-500 px-6 font-medium text-slate-300">
              <span class="absolute h-0 w-0 rounded-full bg-slate-800 transition-all duration-300 group-hover:h-56 group-hover:w-32"></span>
              <span class="relative font-normal">EDIT</span>
            </button>
            <input type="hidden" class="form-control" id="status" name="status" value="edit">
          </form>
          <form action="/recipe/deleteRecipe/<%= recipe.id %>?_method=DELETE" method="post">
            <button type="submit" class="group relative inline-flex h-10 items-center justify-center overflow-hidden rounded-md bg-slate-500 px-6 font-medium text-slate-300">
              <span class="absolute h-0 w-0 rounded-full bg-red-500 transition-all duration-300 group-hover:h-56 group-hover:w-32"></span>
              <span class="relative font-normal">Delete</span>
            </button>
          </form>
        </div>
        <% } %>
      </div>
    </div>
    <!--Recipe Edit -->
    <div class="w-full md:w-4/6 p-4 bg-slate-700 border-2 border-slate-500 rounded-lg shadow md:p-6">
      <% if (recipe.status === "edit") { %>
        <div class="mb-4">
          <h5 class="text-xl font-medium text-slate-300">Edit Recipe</h5>
        </div>
        <form class="flex flex-col gap-2" action="/recipe/editRecipe/<%= recipe.id %>?_method=PUT" method="post">   
          <div>
            <label for="name" class="block mb-2 text-sm font-medium text-slate-200">Name</label>
            <input type="text" name="name" id="name" class="bg-slate-800 border border-slate-600 text-slate-200 mb-2 text-sm md:text-base rounded-lg focus:border-none focus:ring-0 block w-full p-2.5" value="<%= recipe.name %>" placeholder="<%= recipe.name %>">
          </div>
          <div class="flex flex-col">
            <% if (recipe.ingredientCount === 1) { %>
              <div class="flex flex-row w-full">
                  <div class="flex flex-col">
                    <label for="quantity" class="block mb-1 text-sm font-normal text-slate-200">Ingredients</label>
                    <select class="h-11 text-sm md:text-base font-medium text-slate-200 bg-slate-800 border border-e-0 rounded-s-lg border-slate-600 focus:border-none focus:ring-0" name="quantity">
                      <option><%= recipe.quantity %></option>
                      <option>1/8</option>
                      <option>1/4</option>
                      <option>1/3</option>
                      <option>1/2</option>
                      <option>2/3</option>
                      <option>3/4</option>
                      <% for(x=1; x<100; x++) {%>
                        <option value='<%= x %>'><%= x %></option>
                      <%}%>
                    </select>
                  </div>
                  <select class="h-11 mt-6 text-sm md:text-base font-normal text-slate-200 bg-slate-800 border border-r-0 border-slate-600 focus:border-none focus:ring-0" name="measurement">
                    <option><%= recipe.measurements %></option>
                    <option>Tsp.</option>
                    <option>Tb.</option>
                    <option>Cup</option>
                    <option>Oz.</option>
                    <option>Pt.</option>
                    <option>Qt.</option>
                    <option>Gal.</option>
                  </select>
                <div class="w-full mb-2 mt-6">
                  <input class="w-full h-11 bg-slate-800 border border-r-0 border-slate-600 text-slate-200 text-sm md:text-base block p-2.5 focus:border-none focus:ring-0" type="text" id="ingredient" name="ingredient" value="<%= recipe.ingredients %>" placeholder="<%= recipe.ingredients %>"></input>
                </div>
                <div class="h-11 inline-flex mt-6" role="group">
                  <button type="submit" name="addIngredient" formaction="/recipe/addIngredient/<%= recipe._id %>?_method=PUT" class="inline-flex items-center px-4 py-2 text-sm font-medium text-slate-200 bg-slate-800 border rounded-e-lg border-slate-600 hover:bg-slate-700 hover:text-slate-300">
                    <svg class="w-3 md:w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
                    </svg>
                  </button>
                </div>
              </div>
            <% } %>
            <% if (recipe.ingredientCount > 1) { %>
              <% for (i=0; i < recipe.ingredientCount; i++) { %>
                <div class="flex flex-row">
                  <div class="inline-flex">
                    <div class="flex flex-col">
                      <label for="quantity" class="block mb-1 text-sm font-normal tracking-tight text-slate-200">Ingredient <%= [i + 1] %></label>
                      <select class="h-11 text-sm md:text-base font-medium text-slate-200 bg-slate-800 border border-e-0 rounded-s-lg border-slate-600 focus:border-none focus:ring-0" name="quantity">
                        <option class="disabled selected"><%= recipe.quantity[i] %></option>
                        <option>1/8</option>
                        <option>1/4</option>
                        <option>1/3</option>
                        <option>1/2</option>
                        <option>2/3</option>
                        <option>3/4</option>
                        <% for(x=1; x<100; x++) {%>
                            <option value='<%= x %>'><%= x %></option>
                        <%}%>
                      </select>
                    </div>
                    <select class="h-11 mt-6 text-sm md:text-base font-normal text-slate-200 bg-slate-800 border border-r-0 border-slate-600 focus:border-none focus:ring-0" name="measurement">
                      <option class="disabled selected"><%= recipe.measurements[i] %></option>
                      <option>Tsp.</option>
                      <option>Tb.</option>
                      <option>Cup</option>
                      <option>Oz.</option>
                      <option>Pt.</option>
                      <option>Qt.</option>
                      <option>Gal.</option>
                    </select>
                  </div>
                  <div class="w-4/6 mb-2 mt-6">
                    <input class="focus:border-none focus:ring-0 w-full h-11 bg-slate-800 border border-r-0 border-slate-600 text-slate-200 text-sm md:text-base block p-2.5" type="text" id="ingredient" name="ingredient" value="<%= recipe.ingredients[i] %>" placeholder="<%= recipe.ingredients[i] %>"></input>
                  </div>
                  <div class="h-11 inline-flex mt-6" role="group">
                    <button type="submit" name="addIngredient" formaction="/recipe/addIngredient/<%= recipe._id %>?_method=PUT" class="inline-flex items-center px-4 py-2 text-sm font-medium text-slate-200 bg-slate-800 border border-r-0 border-slate-600 hover:bg-slate-700 hover:text-slate-300">
                      <svg class="w-3 md:w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
                      </svg>
                    </button>
                    <button type="submit" name="deleteIngredient" formaction="/recipe/subtractIngredient/<%= recipe._id %>/<%= i %>?_method=PUT" class="inline-flex items-center px-4 py-2 text-sm font-medium text-slate-200 bg-slate-800 border border-slate-600 rounded-e-lg hover:bg-slate-700 hover:text-slate-300">
                      <svg class="w-3 md:w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"/>
                      </svg>
                    </button>
                  </div>
                </div>
              <% } %>
            <% } %>
          </div>
          <div class="flex flex-col">
            <% for (i=0; i<recipe.stepCount; i++) { %>
              <% if (recipe.stepCount === 1) { %>
                <div class="flex flex-row">
                  <div class="w-full">
                    <label for="step" class="block mb-1 text-sm font-medium text-slate-200">Step <%= [i + 1] %></label>
                    <input class="focus:border-none focus:ring-0 w-full h-11 mb-2 bg-slate-800 border border-r-0 border-slate-600 text-slate-200 text-sm md:text-base rounded-s-lg block p-2.5" type="text" id="step" name="step" value="<%= recipe.steps[i] %>"></input>
                  </div>
                  <div class="h-11 mt-6 inline-flex" role="group">
                    <button type="submit" name="addStep" formaction="/recipe/addStep/<%= recipe._id %>?_method=PUT" class="inline-flex items-center px-4 py-2 text-sm font-medium text-slate-200 bg-slate-800 border rounded-e-lg border-slate-600 hover:bg-slate-700 hover:text-slate-300">
                      <svg class="w-3 md:w-6 h-6 text-slate-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
                      </svg>
                    </button>
                  </div>
                </div>
              <% } %>
              <% if (recipe.stepCount > 1) { %>
                <% for (i=0; i<recipe.stepCount; i++) { %>
                  <div class="flex flex-row">
                    <div class="w-full">
                      <label for="step" class="block mb-1 text-sm font-medium text-slate-200">Step <%= [i + 1] %></label>
                      <input class="focus:border-none focus:ring-0 w-full h-11 mb-2 bg-slate-800 border border-r-0 border-slate-600 text-slate-200 text-sm md:text-base rounded-s-lg block p-2.5" type="text" id="step" name="step" value="<%= recipe.steps[i] %>"></input>
                    </div>
                    <div class="h-11 mt-6 inline-flex" role="group">
                      <button type="submit" name="addStep" formaction="/recipe/addStep/<%= recipe._id %>?_method=PUT" class="inline-flex items-center px-4 py-2 text-sm font-medium text-slate-200 bg-slate-800 border border-r-0 border-slate-600 hover:bg-slate-700 hover:text-slate-300">
                        <svg class="w-3 md:w-6 h-6 text-slate-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
                        </svg>
                      </button>
                      <button type="submit" name="subtractStep" formaction="/recipe/subtractStep/<%= recipe._id %>/<%= i %>?_method=PUT" class="inline-flex items-center px-4 py-2 text-sm font-medium text-slate-200 bg-slate-800 border border-slate-600 rounded-e-lg hover:bg-slate-700 hover:text-slate-300">
                        <svg class="w-3 md:w-6 h-6 text-slate-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"/>
                        </svg>
                      </button>
                    </div>
                  </div>
                <% } %>
              <% } %>  
            <% } %>
          </div>
          <div>
            <label for="note" class="block mb-2 text-sm font-medium text-slate-200">Note</label>
            <textarea id="note" name="note" rows="4" class="block p-2.5 w-full text-sm text-slate-200 bg-slate-800 rounded-lg border border-slate-600 focus:ring-0 focus:border-none" value="<%= recipe.note %>" placeholder="<%= recipe.note %>"><%= recipe.note %></textarea>
          </div>
          <button type="submit" class="col-span-2 place-self-end group relative inline-flex h-10 items-center justify-center overflow-hidden rounded-md bg-slate-500 px-6 font-medium text-slate-300">
            <span class="absolute h-0 w-0 rounded-full bg-slate-800 transition-all duration-300 group-hover:h-56 group-hover:w-32"></span>
            <span class="relative font-normal">Save</span>
          </button>
          <input type="hidden" class="form-control" id="status" name="status" value="done">
        </form>
      <%}%>
      <!--Recipe View -->
      <% if (recipe.status === "done") { %>
        <div class="mb-4">
          <span class="text-lg md:text-xl font-medium text-slate-300">Ingredients</span>
        </div>
        <div class="flex flex-col space-y-4">
          <% if (recipe.ingredientCount === 1) { %>
            <div class="flex flex-row gap-2">
              <input id="checkbox" type="checkbox" class="w-6 h-6 mt-0.5 text-slate-400 bg-slate-500 border-slate-300 rounded focus:ring-slate-400 focus:ring-2">
              <label for="checkbox" class="sr-only">checkbox</label>
              <h3 class="mt-1 md:mt-0 text-sm md:text-lg text-slate-300 font-light"><%= recipe.quantity %></h3>
              <h3 class="mt-1 md:mt-0 text-sm md:text-lg text-slate-300 font-light"><%= recipe.measurements %></h3>
              <h3 class="mt-1 md:mt-0 text-sm md:text-lg text-slate-300 font-light"><%= recipe.ingredients %></h3>
            </div>
          <% } else { %>
            <% for (i=0; i<recipe.ingredientCount; i++) { %>
              <% if (recipe.quantity[i] == '' && recipe.measurements[i] == '' && recipe.ingredients[i] == '') { %>
              <% } else { %>
              <div class="flex flex-row gap-2">
                <input id="checkbox" type="checkbox" class="w-6 h-6 mt-0.5 text-slate-400 bg-slate-500 border-slate-300 rounded focus:ring-slate-400 focus:ring-2">
                <label for="checkbox" class="sr-only">checkbox</label>
                <h3 class="mt-1 md:mt-0 text-sm md:text-lg text-slate-300 font-light"><%= recipe.quantity[i] %></h3>
                <h3 class="mt-1 md:mt-0 text-sm md:text-lg text-slate-300 font-light"><%= recipe.measurements[i] %></h3>
                <h3 class="mt-1 md:mt-0 text-sm md:text-lg text-slate-300 font-light"><%= recipe.ingredients[i] %></h3>
              </div>
              <% } %>
            <% } %>
          <% } %>
        </div>
        <div class="mt-8 mb-2">
          <span class="text-lg md:text-xl font-medium text-slate-300">Steps</span>
        </div>
        <div class="flex flex-col space-y-4">
          <% if (recipe.stepCount === 1) { %>
            <div class="flex flex-col space-y-1">
              <span class="text-sm md:text-base font-medium text-slate-400">Step 1</span>
              <div class="border-2 border-slate-500 bg-slate-600 rounded-lg w-full">
                <h3 class="text-sm md:text-lg font-light text-slate-300 p-2"><%= recipe.steps %></h3>
              </div>
            </div>
          <% } else {%>
            <% for (i=0; i<recipe.stepCount; i++) { %>
              <% if (recipe.steps[i] == '') { %>
              <% } else { %>
              <div class="flex flex-col space-y-1">
                <span class="text-sm md:text-base font-medium text-slate-400">Step <%= [i + 1] %></span>
                <div class="border-2 border-slate-500 bg-slate-600 rounded-lg w-full">
                  <h3 class="text-sm md:text-lg text-slate-300 font-light p-2"><%= recipe.steps[i] %></h3>
                </div>
              </div>
              <% } %>
            <% } %>
          <% } %>
        </div>
      <%}%>
    </div>
  </div>
</div>
 <!-- Edit Picture Modal -->
 <div id="edit-picture" 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-lg font-light text-slate-200">
                Edit Picture
              </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="edit-picture">
                  <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/editPicture/<%= recipe._id %>" enctype="multipart/form-data" method="post" class="flex flex-col p-4 md:p-5">
            <div class="mt-2">
              <input class="block text-sm text-slate-500 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 ml-2 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">Save</span>
            </button>
          </form>
      </div>
  </div>
</div>  

<%- include('partials/footer') -%>