{ field.stopSuggestion() updatePreview() }} >

Add Recipes

Recipe Name

Preparation Time (minutes)

Ingredients

{#if ingredients.length > 0}

{ing}

{/if}

Tags

{#if tags.length > 0}

#{tag}

{/if}

Nutrition

{#each Array(7) as _, i} {NUTRITION_NAMES[i]} {/each}

Description

<div class="label">
            <span class="label-text">Steps</span>
          </div>
          {#each Array(steps.length + 1) as _, i}
            <label class="input-group">
              <span>{i + 1}</span>
              <textarea
                placeholder="Type here"
                class="textarea textarea-bordered w-full max-w-xs"
                bind:value={steps[i]}
              />
              <button class="btn h-full" on:click={() => removeFromSteps(i)}>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#ffffff"
                  stroke-width="2"
                  stroke-linecap="butt"
                  stroke-linejoin="bevel"
                  ><line x1="18" y1="6" x2="6" y2="18" /><line
                    x1="6"
                    y1="6"
                    x2="18"
                    y2="18"
                  /></svg
                >
              </button>
            </label>
          {/each}
          <div class="flex justify-end mt-8">
            <button class="btn" on:click={addRecipe}>Add Your Recipe!</button>
          </div>
        </div>
        <div
          class="flex-grow ml-4 bg-base-200 rounded-box"
          style="pointer-events:none"
        >
          <RecipePageTemplate bind:recipe={args.recipe} />
        </div>
      </div>
    </div>
  </div>
  {#if inputError}
    <input type="checkbox" id="my-modal" class="modal-toggle" checked />
    <div class="modal">
      <div class="modal-box align-middle">
        <div class="flex mb-2 mt-4 justify-center">
          <h3 class="font-bold text-2xl">
            Oops! Please make sure your recipe is written properly.
          </h3>
        </div>
        <p class="py-4">
          {#each errorMsgs as msg}
            {msg} <br />
          {/each}
        </p>
        <div class="modal-action">
          <label for="my-modal" class="btn" on:click={resetErrors}>Close</label>
        </div>
      </div>
    </div>
  {/if}
  {#if addRecipeSuccess}
        <input type="checkbox" id="my-modal" class="modal-toggle" checked />
        <div class="modal">
          <div class="modal-box align-middle">
            <div class="flex mb-2 mt-4 justify-center">
              <h3 class="font-bold text-2xl">Add Recipe Success!</h3>
            </div>
            <p class="py-4">
              You will be redirected home
            </p>
            <div class="modal-action">
              <label for="my-modal" class="btn" on:click={() => { window.location.href = "#/"; window.location.reload() }}>Close</label>
            </div>
          </div>
        </div>
      {:else if addRecipeFail}
        <input type="checkbox" id="my-modal" class="modal-toggle" checked />
        <div class="modal">
          <div class="modal-box align-middle">
            <div class="flex mb-2 mt-4 justify-center">
              <h3 class="font-bold text-2xl">Add Recipe Fail!</h3>
            </div>
            <p class="py-4">
              Failed to add recipe
            </p>
            <div class="modal-action">
              <label for="my-modal" class="btn" >Close</label>
            </div>
          </div>
        </div>
  {/if}
{/if}