<%-include('../partials/header');%>

    <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="dishCover"
    />
    <h2><%=dish.name%></h2>
    <p class="qualityText">Quality: <%=dish.quality%></p>
    <h3 class="dishDetails">Ingredients</h3>

    <ul>
      <% for (let ingredient of dish.ingredients) { %>
      <li><%= ingredient %></li>
      <% } %>
    </ul>

    <h3 class="dishDetails">Tags</h3>

    <ul>
      <% for (let tag of dish.tags) { %>
      <li><%= tag %></li>
      <% } %>
    </ul>
    
    <div class="editButtons">
      <a href="/edit-dish/<%=dish._id%>" class="btn">Edit</a>
      <form action="/dishes/delete?_method=DELETE" method="POST">
        <button type="submit" name="delete" class="deleteButton" value="<%=dish._id%>">Delete</button>
      </form>
    </div>

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