<!DOCTYPE html>
<html lang="en">
  <head>
    <%-include('../partials/head');%>
  </head>

  <body>
    <h1><%-include('../partials/back')%><%=dish.name%></h1>

    <p id="error" class="error"><% if (typeof error !== 'undefined') {%> <%= error %><% } %></p>

    <img
      src="<%= dish.img === null ? 'https://place-hold.it/640x360&fontsize=24' : `/images/uploads/${dish.img}` %>"
      alt=""
      class="img"
    />
    <h2><%=dish.name%></h2>
    <p class="qualityText">Quality: <%=dish.quality%></p>
    <h3 class="h3dishDetails">Ingredients</h3>
    <!--source: https://stackoverflow.com/questions/56600633/displaying-arrays-in-a-list-with-ejs-->
    <ul>
      <% for (let ingredient of dish.ingredients) { %>
      <li><%= ingredient %></li>
      <% } %>
    </ul>
    <h3 class="h3dishDetails">Tags</h3>
    <!--source: https://stackoverflow.com/questions/56600633/displaying-arrays-in-a-list-with-ejs-->
    <ul>
      <% for (let tag of dish.tags) { %>
      <li><%= tag %></li>
      <% } %>
    </ul>
    <div class="editButtons">
      <a href="/dish/<%=dish._id%>/edit" class="primaryButton">Edit</a>
      <a onclick="deleteDish('<%=dish._id%>')" class="deleteButton">Delete</a>
    </div>

    <!--source: https://stackoverflow.com/questions/52913334/js-access-variable-from-script-tag-->
    <script data-api-key="<%= process.env.API_KEY%>" src="/script/script.js"></script>
  </body>
</html>
