<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include("partials/meta.ejs") %>
    <title>RecipEasy: <%= label %></title>
  </head>
  <body>
    <div class="container search-results">
      <main>
        <% if (typeof(uri)=="undefined"){ %>
          <h2>No recipe found</h2>
          <h3>Please contact ChefDevs team. Sorry for the inconvenience.</h3>
          <% } else{  %>
  
        <div class="recipe-result">
          <div class="recipe-grid">
              <div class="recipe-card print">
                <div class="recipe-img-details">
                  <img src="<%= image %>" alt="recipe photo" />
                  <div>
                    <p><i class="fa fa-cutlery" aria-hidden="true"></i> <b> <%= label %> </b> <br>
                      <i class="fa fa-link" aria-hidden="true"></i> Source: <a href="<%= url %>" target="_blank">
                      <%= source %> </a> 
                    </p>
                    <p><i class="fa fa-globe" aria-hidden="true"></i> Cuisine Type: <%= cuisineType %> <br />
                      <i class="fa-solid fa-bell-concierge"></i> Meal Type: <%= mealType %> <br />
                      <i class="fa-solid fa-wheat-awn"></i> Diet Type: <%= dietLabels %> <br />
                    </p> 
                    <img src="/images/receipeasy_logo_v2.png" alt="RecipEasy logo" style="width: 100px;"/>
                    <img src="/images/chefdevs_logo_v2.png" alt="chefdevs logo" style="width: 120px;" />
                  </div>
                </div>
                <div class="recipe-card-hover">
                    <p><i class="fa-solid fa-bowl-food"></i> Ingredients: </p>
                    <ul>
                      <% let items = ingredientLines;
                      items.forEach(function(ingr, index){ %>
                        <li> <%= ingr %> </li>
                      <% }) %>
                    </ul>
                    <button onclick="window.print();" class="print"><i class="fa fa-download" aria-hidden="true"></i></button>
                </div>
                
              </div>
          <% }%>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>
