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

  <body>
    <!-- in edit your dish, put dishname-->
    <h1><%-include('../partials/back') %> Edit your Dish</h1>
    <!--error message-->
    <% if (typeof error !== 'undefined') {%>
    <p class="error"><%= error %></p>
    <% } %>
    <img
      src="<%= dish.img === null ? 'https://place-hold.it/640x360&fontsize=24' : `/images/uploads/${dish.img}` %>"
      alt=""
      class="img"
    />
    <!--for the action, I want to send you to the dish-details.ejs page + the id of the dish you just created-->
    <form action="" method="post" enctype="multipart/form-data">
      <!--uploading an image using multer-->
      <fieldset>
        <legend>Upload dish image</legend>
        <p class="subtext">Optional: Upload image of your dish</p>
        <input type="file" name="uploadImage" accept="image/*" />
      </fieldset>
      <!--edit feature: to edit the dish / document in mongoDB-->
      <fieldset>
        <legend>Name of the dish</legend>
        <p class="subtext">Optional: Autodetect the name of your dish</p>
        <input type="text" id="dishName" name="dishName" required value="<%=dish.name%>" />
        <button id="autodetectFoodButton" class="hidden">Autodetect Dish</button>
        <!-- this is NOT inline styling, determines the size of the screenshot-->
        <video id="video" width="320" height="240" class="hidden" autoplay></video>
        <canvas id="canvas" width="320" height="240" class="hidden"></canvas>
      </fieldset>

      <fieldset>
        <legend>Dish quality</legend>
        <p class="subtext">How good are you at making this dish?</p>

        <div class="input">
          <input type="radio" id="dishQuality1" value="1" name="dishQuality" required
          <%=Number(dish.quality) === 1 ? "checked" : "" %> />
          <label for="dishQuality1">1</label>
        </div>

        <div class="input">
          <input type="radio" id="dishQuality2" value="2" name="dishQuality" required
          <%=Number(dish.quality) === 2 ? "checked" : "" %> />
          <label for="dishQuality2">2</label>
        </div>

        <div class="input">
          <input type="radio" id="dishQuality3" value="3" name="dishQuality" required
          <%=Number(dish.quality) === 3 ? "checked" : "" %> />
          <label for="dishQuality3">3</label>
        </div>
      </fieldset>

      <fieldset>
        <legend>Ingredients</legend>
        <p class="subtext">Measurements are not needed</p>
        <p class="subtext">Seperate different ingredients with a comma</p>
        <!--if there is javascript, add a button to add an ingredient and add a textfield -> this will create an array of ingredients-->
        <!--if there is no javascript, add a textfield and a p, stating you need to distinguish ingredients with a comma -> this will create an array of ingredients-->
        <input type="text" name="ingredients" value="<%=dish.ingredients%>" />
      </fieldset>

      <fieldset>
        <legend>Tags</legend>
        <p class="subtext">Tags are used for filtering preferences</p>
        <!--if there is js, then add dropdowns with cuisine, dishtype, spicelevel, diet & allergies-->
        <!--if there is no js, then dont have dropwdowns and just input field-->
        <p class="heading">Cuisine</p>

        <div class="input">
          <input type="checkbox" id="european" value="European" name="tags" <%=
          (dish.tags).includes("European") ? "checked" : "" %>/>
          <label for="european">European</label>
        </div>

        <div class="input">
          <input type="checkbox" id="middle-eastern" value="Middle Eastern" name="tags" <%=
          (dish.tags).includes("Middle Eastern") ? "checked" : "" %>/>
          <label for="middle-eastern">Middle Eastern</label>
        </div>

        <div class="input">
          <input type="checkbox" id="african" value="African" name="tags" <%=
          (dish.tags).includes("African") ? "checked" : "" %>/>
          <label for="african">African</label>
        </div>

        <div class="input">
          <input type="checkbox" id="asian" value="Asian" name="tags" <%=
          (dish.tags).includes("Asian") ? "checked" : "" %>/>
          <label for="asian">Asian</label>
        </div>

        <div class="input">
          <input type="checkbox" id="north-american" value="North American" name="tags" <%=
          (dish.tags).includes("North American") ? "checked" : "" %>/>
          <label for="north-american">North American</label>
        </div>

        <div class="input">
          <input type="checkbox" id="south-american" value="South American" name="tags" <%=
          (dish.tags).includes("South American") ? "checked" : "" %>/>
          <label for="South American">South American</label>
        </div>

        <div class="input">
          <input type="checkbox" id="other-cuisines" value="Other cuisines" name="tags" <%=
          (dish.tags).includes("Other cuisines") ? "checked" : "" %>/>
          <label for="Other cuisines">Other cuisines</label>
        </div>

        <p class="heading">Dish type</p>

        <div class="input">
          <input type="checkbox" id="meat" value="Meat" name="tags" <%= (dish.tags).includes("Meat")
          ? "checked" : "" %>/>
          <label for="meat">Meat</label>
        </div>

        <div class="input">
          <input type="checkbox" id="fish" value="Fish" name="tags" <%= (dish.tags).includes("Fish")
          ? "checked" : "" %>/>
          <label for="fish">Fish</label>
        </div>

        <div class="input">
          <input type="checkbox" id="shellfish-and-seafood" value="Shellfish and seafood"
          name="tags" <%= (dish.tags).includes("Shellfish and seafood") ? "checked" : "" %> />
          <label for="shellfish-and-seafood">Shellfish and seafood</label>
        </div>

        <div class="input">
          <input type="checkbox" id="vegetables-and-sides" value="Vegetables and sides" name="tags"
          <%= (dish.tags).includes("Vegetables and sides") ? "checked" : "" %> />
          <label for="vegetables-and-sides">Vegetables and sides</label>
        </div>

        <div class="input">
          <input type="checkbox" id="pasta-and-noodles" value="Pasta and noodles" name="tags" <%=
          (dish.tags).includes("Pasta and noodles") ? "checked" : "" %>/>
          <label for="pasta-and-noodles">Pasta and noodles</label>
        </div>

        <div class="input">
          <input type="checkbox" id="pizza" value="Pizza" name="tags" <%=
          (dish.tags).includes("Pizza") ? "checked" : "" %>/>
          <label for="pizza">Pizza</label>
        </div>

        <div class="input">
          <input type="checkbox" id="burgers" value="Burgers" name="tags" <%=
          (dish.tags).includes("Burgers") ? "checked" : "" %>/>
          <label for="burgers">Burgers</label>
        </div>

        <div class="input">
          <input type="checkbox" id="stews-and-curries" value="Stews and curries" name="tags" <%=
          (dish.tags).includes("Stews and curries") ? "checked" : "" %>/>
          <label for="stews-and-curries">Stews and curries</label>
        </div>

        <div class="input">
          <input type="checkbox" id="sushi-and-poke" value="Sushi and poke" name="tags" <%=
          (dish.tags).includes("Sushi and poke") ? "checked" : "" %>/>
          <label for="sushi-and-poke">Sushi and poke</label>
        </div>

        <div class="input">
          <input type="checkbox" id="kebab-and-skewers" value="Kebab and skewers" name="tags" <%=
          (dish.tags).includes("Kebab and skewers") ? "checked" : "" %>/>
          <label for="kebab-and-skewers">Kebab and skewers</label>
        </div>

        <div class="input">
          <input type="checkbox" id="soup-and-ramen" value="Soup and ramen" name="tags" <%=
          (dish.tags).includes("Soup and ramen") ? "checked" : "" %>/>
          <label for="soup-and-ramen">Soup and ramen</label>
        </div>

        <div class="input">
          <input type="checkbox" id="salads" value="Salads" name="tags" <%=
          (dish.tags).includes("Salads") ? "checked" : "" %>/>
          <label for="salads">Salads</label>
        </div>

        <div class="input">
          <input type="checkbox" id="sandwiches-wraps-and-bread" value="Sandwiches, wraps and bread"
          name="tags" <%= (dish.tags).includes("Sandwiches, wraps and bread") ? "checked" : "" %> />
          <label for="sandwiches-wraps-and-bread">Sandwiches, wraps and bread</label>
        </div>

        <div class="input">
          <input type="checkbox" id="breakfast-brunch-and-eggs" value="Breakfast, brunch and eggs"
          name="tags" <%= (dish.tags).includes("Breakfast, brunch and eggs") ? "checked" : "" %> />
          <label for="breakfast-brunch-and-eggs">Breakfast, brunch and eggs</label>
        </div>

        <div class="input">
          <input type="checkbox" id="small-plates-and-sharing" value="Small plates and sharing"
          name="tags" <%= (dish.tags).includes("Small plates and sharing") ? "checked" : "" %> />
          <label for="small-plates-and-sharing">Small plates and sharing</label>
        </div>

        <div class="input">
          <input type="checkbox" id="desserts-and-pastries" value="Desserts and pastries"
          name="tags" <%= (dish.tags).includes("Desserts and pastries") ? "checked" : "" %> />
          <label for="desserts-and-pastries">Desserts and pastries</label>
        </div>

        <p class="heading">Spice level</p>

        <div class="input">
          <input type="checkbox" id="not-spicy" value="Not spicy" name="tags" <%=
          (dish.tags).includes("Not spicy") ? "checked" : "" %>/>
          <label for="not-spicy">Not spicy</label>
        </div>

        <div class="input">
          <input type="checkbox" id="mild" value="Mild" name="tags" <%= (dish.tags).includes("Mild")
          ? "checked" : "" %>/>
          <label for="mild">Mild</label>
        </div>

        <div class="input">
          <input type="checkbox" id="medium" value="Medium" name="tags" <%=
          (dish.tags).includes("Medium") ? "checked" : "" %>/>
          <label for="medium">Medium</label>
        </div>

        <div class="input">
          <input type="checkbox" id="spicy" value="Spicy" name="tags" <%=
          (dish.tags).includes("Spicy") ? "checked" : "" %>/>
          <label for="spicy">Spicy</label>
        </div>

        <div class="input">
          <input type="checkbox" id="extra-picy" value="Extra spicy" name="tags" <%=
          (dish.tags).includes("Extra spicy") ? "checked" : "" %>/>
          <label for="extra-picy">Extra spicy</label>
        </div>

        <p class="heading">Diet & allergies</p>

        <div class="input">
          <input type="checkbox" id="vegan" value="Vegan" name="tags" <%=
          (dish.tags).includes("Vegan") ? "checked" : "" %>/>
          <label for="vegan">Vegan</label>
        </div>

        <div class="input">
          <input type="checkbox" id="vegetarian" value="Vegetarian" name="tags" <%=
          (dish.tags).includes("Vegetarian") ? "checked" : "" %>/>
          <label for="vegetarian">Vegetarian</label>
        </div>

        <div class="input">
          <input type="checkbox" id="gluten-free" value="Gluten-free" name="tags" <%=
          (dish.tags).includes("Gluten-free") ? "checked" : "" %>/>
          <label for="gluten-free">Gluten-free</label>
        </div>

        <div class="input">
          <input type="checkbox" id="lactose-free" value="Lactose-free" name="tags" <%=
          (dish.tags).includes("Lactose-free") ? "checked" : "" %>/>
          <label for="lactose-free">Lactose-free</label>
        </div>
      </fieldset>
      <div>
        <input type="submit" value="Update your dish" class="primaryButton" />
      </div>
    </form>

    <!--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>

<!--I have a few values for my form: 
  dishName
  dishImage
  dishQuality
  dishIngredients
  dishTags
-->
