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

    <h1><%-include('../partials/back') %> Add a Dish</h1>
    <!--error message-->
    <% if (typeof error !== 'undefined') {%>
    <p class="error"><%= error %></p>
    <% } %>
    <!--for the action, I want to send you to the dish-details.ejs page + the id of the dish you just created-->
    <form action="/dishes/add-dish" method="post" enctype="multipart/form-data">
      <!--uploading an image using multer-->
      <fieldset>
        <input type="file" name="uploadImage" accept="image/*" />
      </fieldset>
      <!--main feature: to add the dish into the database of mongoDB-->
      <fieldset>
        <legend>Name of the dish</legend>
        <input type="text" id="dishName" name="dishName" required />
        <button id="autodetectFoodButton" class="hidden">Autodetect dish</button>
        <!-- this is NOT inline styling, determines the size of the screenshot-->
        <video width="320" height="240" class="hidden" autoplay></video>
        <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="dishInput">
          <input type="radio" id="dishQuality1" value="1" name="dishQuality" required />
          <label for="dishQuality1">1</label>
        </div>

        <div class="dishInput">
          <input type="radio" id="dishQuality2" value="2" name="dishQuality" required />
          <label for="dishQuality2">2</label>
        </div>

        <div class="dishInput">
          <input type="radio" id="dishQuality3" value="3" name="dishQuality" required />
          <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>
        
        <input type="text" name="ingredients" />
      </fieldset>

      <fieldset>
        <legend>Tags</legend>
        <p class="subtext">Tags are used for filtering preferences</p>
        <p class="heading">Cuisine</p>

        <div class="dishInput">
          <input type="checkbox" id="european" value="European" name="tags" />
          <label for="european">European</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="middle-eastern" value="Middle Eastern" name="tags" />
          <label for="middle-eastern">Middle Eastern</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="african" value="African" name="tags" />
          <label for="african">African</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="asian" value="Asian" name="tags" />
          <label for="asian">Asian</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="north-american" value="North American" name="tags" />
          <label for="north-american">North American</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="south-american" value="South American" name="tags" />
          <label for="south-american">South American</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="other-cuisines" value="Other cuisines" name="tags" />
          <label for="other-cuisines">Other cuisines</label>
        </div>

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

        <div class="dishInput">
          <input type="checkbox" id="meat" value="Meat" name="tags" />
          <label for="meat">Meat</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="fish" value="Fish" name="tags" />
          <label for="fish">Fish</label>
        </div>

        <div class="dishInput">
          <input
            type="checkbox"
            id="shellfish-and-seafood"
            value="Shellfish and seafood"
            name="tags"
          />
          <label for="shellfish-and-seafood">Shellfish and seafood</label>
        </div>

        <div class="dishInput">
          <input
            type="checkbox"
            id="vegetables-and-sides"
            value="Vegetables and sides"
            name="tags"
          />
          <label for="Vegetables and Sides">Vegetables and sides</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="pasta-and-noodles" value="Pasta and noodles" name="tags" />
          <label for="pasta-and-noodles">Pasta and noodles</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="pizza" value="Pizza" name="tags" />
          <label for="pizza">Pizza</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="burgers" value="Burgers" name="tags" />
          <label for="burgers">Burgers</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="stews-and-curries" value="Stews and curries" name="tags" />
          <label for="stews-and-curries">Stews and curries</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="sushi-and-poke" value="Sushi and poke" name="tags" />
          <label for="sushi-and-poke">Sushi and poke</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="kebab-and-skewers" value="Kebab and skewers" name="tags" />
          <label for="kebab-and-skewers">Kebab and skewers</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="soup-and-ramen" value="Soup and ramen" name="tags" />
          <label for="soup-and-ramen">Soup and ramen</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="salads" value="Salads" name="tags" />
          <label for="salads">Salads</label>
        </div>

        <div class="dishInput">
          <input
            type="checkbox"
            id="sandwiches-wraps-and-bread"
            value="Sandwiches wraps and bread"
            name="tags"
          />
          <label for="sandwiches-wraps-and-bread">Sandwiches, wraps and bread</label>
        </div>

        <div class="dishInput">
          <input
            type="checkbox"
            id="breakfast-brunch-and-eggs"
            value="Breakfast brunch and eggs"
            name="tags"
          />
          <label for="breakfast-brunch-and-eggs">Breakfast, brunch and eggs</label>
        </div>

        <div class="dishInput">
          <input
            type="checkbox"
            id="small-plates-and-sharing"
            value="Small plates and sharing"
            name="tags"
          />
          <label for="small-plates-and-sharing">Small plates and sharing</label>
        </div>

        <div class="dishInput">
          <input
            type="checkbox"
            id="desserts-and-pastries"
            value="Desserts and pastries"
            name="tags"
          />
          <label for="desserts-and-pastries">Desserts and pastries</label>
        </div>

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

        <div class="dishInput">
          <input type="checkbox" id="not-spicy" value="Not spicy" name="tags" />
          <label for="not-spicy">Not spicy</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="mild" value="Mild" name="tags" />
          <label for="mild">Mild</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="medium" value="Medium" name="tags" />
          <label for="medium">Medium</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="spicy" value="Spicy" name="tags" />
          <label for="spicy">Spicy</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="extra-picy" value="Extra picy" name="tags" />
          <label for="extra-picy">Extra spicy</label>
        </div>

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

        <div class="dishInput">
          <input type="checkbox" id="vegan" value="Vegan" name="tags" />
          <label for="vegan">Vegan</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="vegetarian" value="Vegetarian" name="tags" />
          <label for="vegetarian">Vegetarian</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="gluten-free" value="Gluten-free" name="tags" />
          <label for="gluten-free">Gluten-free</label>
        </div>

        <div class="dishInput">
          <input type="checkbox" id="lactose-free" value="Lactose-free" name="tags" />
          <label for="lactose-free">Lactose-free</label>
        </div>
      </fieldset>
      <div>
        <input type="submit" value="Add your dish" class="primaryButton" />
      </div>
    </form>

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

