<%- include('partials/header') -%>
<div class="absolute h-full 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="p-4 sm:ml-64">
    <div class="flex flex-row gap-4 p-4 mt-14"> 
      <% for(var i=0; i<brews.length; i++) { %>
        <% if (dayjs(brews[i].createdAt).isBefore(dayjs().subtract(60, 'day')) === true) { %>
        <div class="group w-80 h-96 perspective-1000">
          <div class="relative w-full h-full transition-all duration-700 transform-style-3d bg-slate-600 border-slate-400 border rounded-xl group-hover:rotate-y-180"> 
            <div class="flex flex-col absolute w-full h-full backface-hidden rounded-xl shadow-xl">
              <img class="object-cover h-48 w-80 rounded-t-xl" src="<%= brews[i].image %>" alt="brew image" />
              <div class="place-self-center flex h-10 mt-2">
                <h5 class="text-2xl text-center font-extralight whitespace-normal break-words overflow-hidden text-slate-300"><%= brews[i].name.toUpperCase() %></h5>
              </div>
              <div class="flex flex-row place-self-center my-4">
                <% let ratedOne = ratedTwo = ratedThree = ratedFour = ratedFive = "fill-slate-500";%>
                <% switch (brews[i].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:
                } %>
                <svg class="w-6 h-6 ms-2 <%= ratedOne %>" 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>
                <svg class="w-6 h-6 ms-2 <%= ratedTwo %>" 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>
                <svg class="w-6 h-6 ms-2 <%= ratedThree %>" 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>
                <svg class="w-6 h-6 ms-2 <%= ratedFour %>" 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>
                <svg class="w-6 h-6 ms-2 <%= ratedFive %>" 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>
              </div>
              <div class="mb-2 ml-6">
                <h5 class="text-xl font-light tracking-tight text-slate-300">Tea type: <%= brews[i].tea %></h5>
              </div>
              <div class="ml-6">
                <h5 class="text-xl font-light tracking-tight text-slate-300">Average temp <%= brews[i].avgTemp %>Â°</h5>
              </div>
            </div>
            <div class="absolute backface-hidden w-full h-full rotate-y-180 rounded-xl shadow bg-slate-600 border-slate-200 border-2">
              <div class="absolute flex flex-col w-full h-full rounded-xl">
                <div class="flex my-4 h-52 w-72 place-self-center border-2 border-slate-500 rounded-xl">
                  <p class="p-2 font-light whitespace-normal break-words overflow-scroll text-slate-300"><%= brews[i].note%></p>
                </div>
                <span class="place-self-center text-center text-lg font-normal text-slate-300">Recipe</span>
                <div class="flex place-content-center w-72 place-self-center border-2 border-slate-500 rounded-xl">
                  <p class="font-light m-1 overflow-ellipsis text-center text-slate-300"><%= brews[i].recipe%></p>
                </div>
                <a class="place-self-end mt-3 mr-2" href="/brew/<%= brews[i]._id%>">
                  <button class="relative overflow-hidden font-normal rounded-md bg-slate-500 px-5 py-2.5 text-slate-300 duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:translate-y-1 active:scale-x-110 active:scale-y-90">Edit</button>
                </a>
              </div>
            </div>
          </div>
        </div>
        <% } %>
      <% } %>
    </div>
</div>
<%- include('partials/footer') -%>