From d22f9a7ff3f865fd4fb26bef700adfe6dbba603f Mon Sep 17 00:00:00 2001
From: Hayden Hargreaves <hhargreaves2006@gmail.com>
Date: Wed, 20 Aug 2025 21:33:21 -0700
Subject: [PATCH] (FIX): Added directions for create page.

It was brought to my attention that the menu was hard to understand. Now
there are some simple directions.
---
 internal/templates/components/banner_templ.go |  2 +-
 internal/templates/components/cards_templ.go  |  2 +-
 .../templates/components/dropdowns_templ.go   |  2 +-
 internal/templates/components/navbar_templ.go |  2 +-
 .../templates/components/search_bar_templ.go  |  2 +-
 .../templates/layouts/app_layout_templ.go     |  2 +-
 internal/templates/pages/create.templ         | 51 +++++++++++++++----
 internal/templates/pages/create_templ.go      |  8 +--
 internal/templates/pages/favorites_templ.go   |  2 +-
 internal/templates/pages/home_templ.go        |  2 +-
 internal/templates/pages/list_templ.go        |  2 +-
 internal/templates/pages/login_templ.go       |  2 +-
 internal/templates/pages/notFound_templ.go    |  2 +-
 internal/templates/pages/profile_templ.go     |  2 +-
 internal/templates/pages/recipe_templ.go      |  2 +-
 internal/templates/pages/search_templ.go      |  2 +-
 web/static/css/tailwind.css                   | 12 +++--
 17 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/internal/templates/components/banner_templ.go b/internal/templates/components/banner_templ.go
index 39dd247..9c9d198 100644
--- a/internal/templates/components/banner_templ.go
+++ b/internal/templates/components/banner_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package components
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/components/cards_templ.go b/internal/templates/components/cards_templ.go
index e5a7372..da80511 100644
--- a/internal/templates/components/cards_templ.go
+++ b/internal/templates/components/cards_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package components
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/components/dropdowns_templ.go b/internal/templates/components/dropdowns_templ.go
index 7f1c7d8..b73df5a 100644
--- a/internal/templates/components/dropdowns_templ.go
+++ b/internal/templates/components/dropdowns_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package components
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/components/navbar_templ.go b/internal/templates/components/navbar_templ.go
index 42f7a39..2365195 100644
--- a/internal/templates/components/navbar_templ.go
+++ b/internal/templates/components/navbar_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package components
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/components/search_bar_templ.go b/internal/templates/components/search_bar_templ.go
index b67bc8d..958d685 100644
--- a/internal/templates/components/search_bar_templ.go
+++ b/internal/templates/components/search_bar_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package components
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/layouts/app_layout_templ.go b/internal/templates/layouts/app_layout_templ.go
index e5cff7f..8e40f3e 100644
--- a/internal/templates/layouts/app_layout_templ.go
+++ b/internal/templates/layouts/app_layout_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/create.templ b/internal/templates/pages/create.templ
index 309f40c..c0fc7ae 100644
--- a/internal/templates/pages/create.templ
+++ b/internal/templates/pages/create.templ
@@ -32,10 +32,13 @@ templ Page() {
 			hx-encoding="multipart/form-data"
 		>
 			<div class="flex flex-col">
-				<label for="title" class="text-sm mb-2">
+				<label for="title" class="text-sm">
 					Recipe Title
 					<span class="text-red-500">*</span>
 				</label>
+				<p class="text-xs pt-1 pb-2 text-gray-700">
+					Please provide a unique title for your recipe. This is the most important part!
+				</p>
 				<input
 					onkeydown="return event.key != 'Enter';"
 					class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 
@@ -51,10 +54,13 @@ templ Page() {
 				<p class="hidden peer-invalid:block text-xs text-red-500 my-1">Please enter a title. Between 1-128 characters.</p>
 			</div>
 			<div class="flex flex-col my-4">
-				<label for="description" class="text-sm mb-2">
+				<label for="description" class="text-sm">
 					Description
 					<span class="text-red-500">*</span>
 				</label>
+				<p class="text-xs pt-1 pb-2 text-gray-700">
+					Please provide a description for your recipe. This can be short and sweet or long and detailed!
+				</p>
 				<textarea
 					class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 
           focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500"
@@ -72,9 +78,12 @@ templ Page() {
 			</div>
 			<div class="my-4 flex flex-col gap-x-2">
 				<div class="flex flex-col flex-grow">
-					<label for="tags" class="text-sm mb-2">
+					<label for="tags" class="text-sm">
 						Recipe Tags
 					</label>
+					<p class="text-xs pt-1 pb-2 text-gray-700">
+						Please provide a list of tags. <span class="italic">e.g., easy, dairy-free, gluten-free, high protein.</span>
+					</p>
 					<input
 						onkeydown="return event.key != 'Enter';"
 						class="border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm"
@@ -96,10 +105,13 @@ templ Page() {
 			</div>
 			<div class="my-4 flex gap-x-2">
 				<div class="flex flex-col flex-grow w-1/3">
-					<label for="preparation-time" class="text-sm mb-2">
+					<label for="preparation-time" class="text-sm">
 						Prep Time
 						<span class="text-red-500">*</span>
 					</label>
+					<p class="text-xs pt-1 pb-2 text-gray-700">
+						Please provide the estimated prep time (minutes).
+					</p>
 					<input
 						onkeydown="return event.key != 'Enter';"
 						class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 
@@ -117,10 +129,13 @@ templ Page() {
 					</p>
 				</div>
 				<div class="flex flex-col flex-grow w-1/3">
-					<label for="cook-time" class="text-sm mb-2">
+					<label for="cook-time" class="text-sm">
 						Cook Time
 						<span class="text-red-500">*</span>
 					</label>
+					<p class="text-xs pt-1 pb-2 text-gray-700">
+						Please provide the estimated cook time (minutes).
+					</p>
 					<input
 						onkeydown="return event.key != 'Enter';"
 						class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 
@@ -138,10 +153,13 @@ templ Page() {
 					</p>
 				</div>
 				<div class="flex flex-col flex-grow w-1/3">
-					<label for="serving-size" class="text-sm mb-2">
+					<label for="serving-size" class="text-sm">
 						Serving Size
 						<span class="text-red-500">*</span>
 					</label>
+					<p class="text-xs pt-1 pb-2 text-gray-700">
+						Please provide the estimated serving size.
+					</p>
 					<input
 						onkeydown="return event.key != 'Enter';"
 						class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 
@@ -161,10 +179,13 @@ templ Page() {
 			</div>
 			<div class="my-4 flex gap-x-2">
 				<div class="flex flex-col flex-grow w-1/3">
-					<label for="category" class="text-sm mb-2">
+					<label for="category" class="text-sm">
 						Category
 						<span class="text-red-500">*</span>
 					</label>
+					<p class="text-xs pt-1 pb-2 text-gray-700">
+						Please provide the meal category.
+					</p>
 					<select
 						id="category"
 						name="category"
@@ -187,10 +208,13 @@ templ Page() {
 					</p>
 				</div>
 				<div class="flex flex-col flex-grow w-1/3">
-					<label for="difficulty" class="text-sm mb-2">
+					<label for="difficulty" class="text-sm">
 						Difficulty
 						<span class="text-red-500">*</span>
 					</label>
+					<p class="text-xs pt-1 pb-2 text-gray-700">
+						Please provide a baseline difficulty.
+					</p>
 					<select
 						id="difficulty"
 						name="difficulty"
@@ -216,6 +240,7 @@ templ Page() {
 					Ingredients
 					<span class="text-red-500">*</span>
 				</label>
+				<p class="text-xs py-1 text-gray-700">Please provide a list of ingredients and their quantities.</p>
 				<ul id="ingredient-list">
 					<li class="w-full flex gap-x-2 py-2">
 						<div class="flex-grow">
@@ -267,6 +292,9 @@ templ Page() {
 					Instructions
 					<span class="text-red-500">*</span>
 				</label>
+				<p class="text-xs py-1 text-gray-700">
+					Please provide a list of instructions. You do not need to include step number, they will be added automatically!
+				</p>
 				<div id="instruction-list" class="flex flex-col">
 					<textarea
 						class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
@@ -295,6 +323,9 @@ templ Page() {
 				<label for="image" class="text-sm">
 					Recipe Image
 				</label>
+				<p class="text-xs pt-1 pb-2 text-gray-700">
+					Please provide an image of your creation. This is optional but is a nice touch!
+				</p>
 				<input
 					type="file"
 					accept="image/*"
@@ -383,7 +414,7 @@ templ Page() {
     list.appendChild(div);
   }
 
-  function removeInstruction (num) {
+  function removeInstruction(num) {
     const list = document.getElementById("instruction-list");
     const item = list.querySelector(`#instruction-${num}`);
     if (item) item.remove();
@@ -418,5 +449,5 @@ templ Page() {
       remainingItems[i - 2].replaceWith(div);
     }
   }
-  </script>
+</script>
 }
diff --git a/internal/templates/pages/create_templ.go b/internal/templates/pages/create_templ.go
index 799bdc7..6b1c315 100644
--- a/internal/templates/pages/create_templ.go
+++ b/internal/templates/pages/create_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -90,20 +90,20 @@ func Page() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\" hx-swap=\"outerHTML\" hx-target=\"#response\" hx-trigger=\"submit\" hx-encoding=\"multipart/form-data\"><div class=\"flex flex-col\"><label for=\"title\" class=\"text-sm mb-2\">Recipe Title <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n          focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"text\" id=\"title\" name=\"title\" required maxlength=\"128\" minlength=\"1\" placeholder=\"e.g., Classic Chicken Curry\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a title. Between 1-128 characters.</p></div><div class=\"flex flex-col my-4\"><label for=\"description\" class=\"text-sm mb-2\">Description <span class=\"text-red-500\">*</span></label> <textarea class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n          focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500\" id=\"description\" name=\"description\" rows=\"4\" required maxlength=\"1024\" minlength=\"1\" placeholder=\"A brief description of your delicious recipe...\"></textarea><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a description. Between 1-1000 characters.</p></div><div class=\"my-4 flex flex-col gap-x-2\"><div class=\"flex flex-col flex-grow\"><label for=\"tags\" class=\"text-sm mb-2\">Recipe Tags</label> <input onkeydown=\"return event.key != 'Enter';\" class=\"border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\" hx-post=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\" hx-swap=\"outerHTML\" hx-target=\"#response\" hx-trigger=\"submit\" hx-encoding=\"multipart/form-data\"><div class=\"flex flex-col\"><label for=\"title\" class=\"text-sm\">Recipe Title <span class=\"text-red-500\">*</span></label><p class=\"text-xs pt-1 pb-2 text-gray-700\">Please provide a unique title for your recipe. This is the most important part!</p><input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n          focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"text\" id=\"title\" name=\"title\" required maxlength=\"128\" minlength=\"1\" placeholder=\"e.g., Classic Chicken Curry\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a title. Between 1-128 characters.</p></div><div class=\"flex flex-col my-4\"><label for=\"description\" class=\"text-sm\">Description <span class=\"text-red-500\">*</span></label><p class=\"text-xs pt-1 pb-2 text-gray-700\">Please provide a description for your recipe. This can be short and sweet or long and detailed!</p><textarea class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n          focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500\" id=\"description\" name=\"description\" rows=\"4\" required maxlength=\"1024\" minlength=\"1\" placeholder=\"A brief description of your delicious recipe...\"></textarea><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a description. Between 1-1000 characters.</p></div><div class=\"my-4 flex flex-col gap-x-2\"><div class=\"flex flex-col flex-grow\"><label for=\"tags\" class=\"text-sm\">Recipe Tags</label><p class=\"text-xs pt-1 pb-2 text-gray-700\">Please provide a list of tags. <span class=\"italic\">e.g., easy, dairy-free, gluten-free, high protein.</span></p><input onkeydown=\"return event.key != 'Enter';\" class=\"border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\" hx-post=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(domain.STATE_TAGS_CREATE)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/create.templ`, Line: 81, Col: 40}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/create.templ`, Line: 90, Col: 40}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" maxlength=\"32\" hx-trigger=\"keyup[keyCode==13]\" hx-on::after-request=\"this.value=''\" hx-swap=\"innerHTML\" hx-target=\"#tag-list\" enterkeyhint=\"done\" type=\"text\" id=\"tag\" name=\"tag\" placeholder=\"e.g., Healthy\"> <input type=\"hidden\" name=\"tags\" id=\"tags\" value=\"\"></div><ul id=\"tag-list\" class=\"my-2 flex gap-1 flex-wrap\"></ul></div><div class=\"my-4 flex gap-x-2\"><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"preparation-time\" class=\"text-sm mb-2\">Prep Time <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" id=\"preparation-time\" name=\"preparation-time\" required min=\"0\" max=\"120\" placeholder=\"e.g., 20\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a time (minutes).</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"cook-time\" class=\"text-sm mb-2\">Cook Time <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" id=\"cook-time\" name=\"cook-time\" required min=\"0\" max=\"120\" placeholder=\"e.g., 45\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a time (minutes).</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"serving-size\" class=\"text-sm mb-2\">Serving Size <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" max=\"16\" min=\"1\" required id=\"serving-size\" name=\"serving-size\" placeholder=\"e.g., 4\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a serving size.</p></div></div><div class=\"my-4 flex gap-x-2\"><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"category\" class=\"text-sm mb-2\">Category <span class=\"text-red-500\">*</span></label> <select id=\"category\" name=\"category\" required class=\"peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none \n            focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm \n            invalid:border-red-500\"><option value=\"\">Select a category</option> <option value=\"breakfast\">Breakfast</option> <option value=\"lunch\">Lunch</option> <option value=\"dinner\">Dinner</option> <option value=\"dessert\">Dessert</option> <option value=\"snack\">Snack</option> <option value=\"side\">Side</option> <option value=\"other\">Other</option></select><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please select a category.</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"difficulty\" class=\"text-sm mb-2\">Difficulty <span class=\"text-red-500\">*</span></label> <select id=\"difficulty\" name=\"difficulty\" required class=\"peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none \n            focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm \n            invalid:border-red-500\"><option value=\"\">Select a difficulty</option> <option value=\"1\">Beginner</option> <option value=\"2\">Easy</option> <option value=\"3\">Intermediate</option> <option value=\"4\">Challenging</option> <option value=\"5\">Extreme</option></select><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please select a difficulty.</p></div></div><div class=\"flex flex-col my-4\"><label for=\"ingredients\" class=\"text-sm\">Ingredients <span class=\"text-red-500\">*</span></label><ul id=\"ingredient-list\"><li class=\"w-full flex gap-x-2 py-2\"><div class=\"flex-grow\"><input onkeydown=\"return event.key != 'Enter';\" class=\"peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none \n                focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\n                invalid:border-red-500\" type=\"text\" id=\"ingredients\" name=\"ingredients\" required minlength=\"1\" placeholder=\"Ingredient name (e.g., Chicken Breast)\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter at least one ingredient.</p></div><div class=\"w-1/3\"><input onkeydown=\"return event.key != 'Enter';\" class=\"peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none \n                focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\n                invalid:border-red-500\" type=\"text\" id=\"quantity\" name=\"quantity\" required minlength=\"1\" placeholder=\"Quantity (e.g., 1lb)\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please provide a quantity.</p></div></li></ul><button type=\"button\" onClick=\"addIngredient();\" class=\"text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer\">Add Ingredient</button></div><div class=\"flex flex-col my-4\"><label for=\"instructions\" class=\"text-sm\">Instructions <span class=\"text-red-500\">*</span></label><div id=\"instruction-list\" class=\"flex flex-col\"><textarea class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500\n            focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500 \n            valid:my-2 invalid:mt-2\" id=\"instructions\" name=\"instructions\" rows=\"3\" required minlength=\"1\" placeholder=\"Step 1: Describe this step...\"></textarea><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter at least one step.</p></div><button type=\"button\" onClick=\"addInstruction();\" class=\"text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer\">Add Instruction Step</button></div><div class=\"flex flex-col my-4\"><label for=\"image\" class=\"text-sm\">Recipe Image</label> <input type=\"file\" accept=\"image/*\" name=\"image\" id=\"image\" class=\"my-2 block w-full text-sm text-placeholder file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:bg-blue-100 file:text-blue-700 cursor-pointer\"></div><p id=\"response\" class=\"hidden\"></p><button type=\"submit\" class=\"w-full mt-8 bg-gradient-to-r from-blue-200 to-purple-200 py-2 rounded-lg text-lg cursor-pointer shadow-md\">Create Recipe</button></form></div><script>\n  function addIngredient() {\n    const list = document.getElementById(\"ingredient-list\");\n    const item = document.createElement(\"li\");\n\n    // New item index\n    const index = list.querySelectorAll(\"li\").length;\n    item.id = `ingredient-${index}`;\n\n    item.classList.add(\"w-full\", \"flex\", \"gap-x-2\", \"py-2\");\n    item.innerHTML = `\n\t\t\t\t\t\t<input\n            onkeydown=\"return event.key != 'Enter';\"\n\t\t\t\t\t\t\tclass=\"flex-grow border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tid=\"ingredients\"\n\t\t\t\t\t\t\tname=\"ingredients\"\n\t\t\t\t\t\t\tplaceholder=\"Ingredient name (e.g., Chicken Breast)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n            onkeydown=\"return event.key != 'Enter';\"\n\t\t\t\t\t\t\tclass=\"w-1/3 border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tid=\"quantity\"\n\t\t\t\t\t\t\tname=\"quantity\"\n\t\t\t\t\t\t\tplaceholder=\"Quantity (e.g., 1lb)\"\n\t\t\t\t\t\t/>\n            <button type=\"button\" class=\"cursor-pointer\" onClick=\"removeIngredient(${index});\">\n              <svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M10.0303 8.96965C9.73741 8.67676 9.26253 8.67676 8.96964 8.96965C8.67675 9.26255 8.67675 9.73742 8.96964 10.0303L10.9393 12L8.96966 13.9697C8.67677 14.2625 8.67677 14.7374 8.96966 15.0303C9.26255 15.3232 9.73743 15.3232 10.0303 15.0303L12 13.0607L13.9696 15.0303C14.2625 15.3232 14.7374 15.3232 15.0303 15.0303C15.3232 14.7374 15.3232 14.2625 15.0303 13.9696L13.0606 12L15.0303 10.0303C15.3232 9.73744 15.3232 9.26257 15.0303 8.96968C14.7374 8.67678 14.2625 8.67678 13.9696 8.96968L12 10.9393L10.0303 8.96965Z\" fill=\"currentColor\"/>\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12Z\" fill=\"currentColor\"/>\n              </svg>\n            </button>\n    `;\n    list.appendChild(item);\n  }\n\n  function removeIngredient(index) {\n    const list = document.getElementById(\"ingredient-list\");\n\n    // List contents, ensure valid items\n    const listElement = list.querySelector(`#ingredient-${index}`);\n    if (listElement) listElement.remove();\n  }\n\n  function addInstruction() {\n    const list = document.getElementById(\"instruction-list\");\n    const itemNum = list.querySelectorAll(\"textarea\").length + 1;\n    const div = document.createElement(\"div\");\n    div.id = `instruction-${itemNum}`;\n    div.className = \"flex\";\n\n    div.innerHTML = `\n      <textarea \n        rows=\"3\"\n        name=\"instructions\"\n        placeholder=\"Step ${itemNum}: Describe this step...\"\n        class=\"flex-grow border border-gray-300 my-2 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm\"\n      ></textarea>\n\n      <button type=\"button\" class=\"p-2 cursor-pointer\" onClick=\"removeInstruction(${itemNum});\">\n        <svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10.0303 8.96965C9.73741 8.67676 9.26253 8.67676 8.96964 8.96965C8.67675 9.26255 8.67675 9.73742 8.96964 10.0303L10.9393 12L8.96966 13.9697C8.67677 14.2625 8.67677 14.7374 8.96966 15.0303C9.26255 15.3232 9.73743 15.3232 10.0303 15.0303L12 13.0607L13.9696 15.0303C14.2625 15.3232 14.7374 15.3232 15.0303 15.0303C15.3232 14.7374 15.3232 14.2625 15.0303 13.9696L13.0606 12L15.0303 10.0303C15.3232 9.73744 15.3232 9.26257 15.0303 8.96968C14.7374 8.67678 14.2625 8.67678 13.9696 8.96968L12 10.9393L10.0303 8.96965Z\" fill=\"currentColor\"/>\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12Z\" fill=\"currentColor\"/>\n        </svg>\n      </button>\n    `;\n\n    list.appendChild(div);\n  }\n\n  function removeInstruction (num) {\n    const list = document.getElementById(\"instruction-list\");\n    const item = list.querySelector(`#instruction-${num}`);\n    if (item) item.remove();\n\n    // This list will start at 2, since the first element is not included \n    const remainingItems = list.querySelectorAll(\"div\");\n\n    for (let i = 2; i < remainingItems.length + 2; i++) {\n      // Get the old content\n      const textContent = remainingItems[i - 2].querySelector(\"textarea\").value;\n\n      // Create a new element\n      const div = document.createElement(\"div\");\n      div.id = `instruction-${i}`;\n      div.className = \"flex\";\n      div.innerHTML = `\n        <textarea \n          rows=\"3\"\n          name=\"instructions\"\n          placeholder=\"Step ${i}: Describe this step...\"\n          class=\"flex-grow border border-gray-300 my-2 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm\"\n        >${textContent}</textarea>\n\n        <button type=\"button\" class=\"p-2 cursor-pointer\" onClick=\"removeInstruction(${i});\">\n          <svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10.0303 8.96965C9.73741 8.67676 9.26253 8.67676 8.96964 8.96965C8.67675 9.26255 8.67675 9.73742 8.96964 10.0303L10.9393 12L8.96966 13.9697C8.67677 14.2625 8.67677 14.7374 8.96966 15.0303C9.26255 15.3232 9.73743 15.3232 10.0303 15.0303L12 13.0607L13.9696 15.0303C14.2625 15.3232 14.7374 15.3232 15.0303 15.0303C15.3232 14.7374 15.3232 14.2625 15.0303 13.9696L13.0606 12L15.0303 10.0303C15.3232 9.73744 15.3232 9.26257 15.0303 8.96968C14.7374 8.67678 14.2625 8.67678 13.9696 8.96968L12 10.9393L10.0303 8.96965Z\" fill=\"currentColor\"/>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12Z\" fill=\"currentColor\"/>\n          </svg>\n        </button>\n      `;\n\n      remainingItems[i - 2].replaceWith(div);\n    }\n  }\n  </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" maxlength=\"32\" hx-trigger=\"keyup[keyCode==13]\" hx-on::after-request=\"this.value=''\" hx-swap=\"innerHTML\" hx-target=\"#tag-list\" enterkeyhint=\"done\" type=\"text\" id=\"tag\" name=\"tag\" placeholder=\"e.g., Healthy\"> <input type=\"hidden\" name=\"tags\" id=\"tags\" value=\"\"></div><ul id=\"tag-list\" class=\"my-2 flex gap-1 flex-wrap\"></ul></div><div class=\"my-4 flex gap-x-2\"><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"preparation-time\" class=\"text-sm\">Prep Time <span class=\"text-red-500\">*</span></label><p class=\"text-xs pt-1 pb-2 text-gray-700\">Please provide the estimated prep time (minutes).</p><input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" id=\"preparation-time\" name=\"preparation-time\" required min=\"0\" max=\"120\" placeholder=\"e.g., 20\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a time (minutes).</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"cook-time\" class=\"text-sm\">Cook Time <span class=\"text-red-500\">*</span></label><p class=\"text-xs pt-1 pb-2 text-gray-700\">Please provide the estimated cook time (minutes).</p><input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" id=\"cook-time\" name=\"cook-time\" required min=\"0\" max=\"120\" placeholder=\"e.g., 45\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a time (minutes).</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"serving-size\" class=\"text-sm\">Serving Size <span class=\"text-red-500\">*</span></label><p class=\"text-xs pt-1 pb-2 text-gray-700\">Please provide the estimated serving size.</p><input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" max=\"16\" min=\"1\" required id=\"serving-size\" name=\"serving-size\" placeholder=\"e.g., 4\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a serving size.</p></div></div><div class=\"my-4 flex gap-x-2\"><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"category\" class=\"text-sm\">Category <span class=\"text-red-500\">*</span></label><p class=\"text-xs pt-1 pb-2 text-gray-700\">Please provide the meal category.</p><select id=\"category\" name=\"category\" required class=\"peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none \n            focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm \n            invalid:border-red-500\"><option value=\"\">Select a category</option> <option value=\"breakfast\">Breakfast</option> <option value=\"lunch\">Lunch</option> <option value=\"dinner\">Dinner</option> <option value=\"dessert\">Dessert</option> <option value=\"snack\">Snack</option> <option value=\"side\">Side</option> <option value=\"other\">Other</option></select><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please select a category.</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"difficulty\" class=\"text-sm\">Difficulty <span class=\"text-red-500\">*</span></label><p class=\"text-xs pt-1 pb-2 text-gray-700\">Please provide a baseline difficulty.</p><select id=\"difficulty\" name=\"difficulty\" required class=\"peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none \n            focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm \n            invalid:border-red-500\"><option value=\"\">Select a difficulty</option> <option value=\"1\">Beginner</option> <option value=\"2\">Easy</option> <option value=\"3\">Intermediate</option> <option value=\"4\">Challenging</option> <option value=\"5\">Extreme</option></select><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please select a difficulty.</p></div></div><div class=\"flex flex-col my-4\"><label for=\"ingredients\" class=\"text-sm\">Ingredients <span class=\"text-red-500\">*</span></label><p class=\"text-xs py-1 text-gray-700\">Please provide a list of ingredients and their quantities.</p><ul id=\"ingredient-list\"><li class=\"w-full flex gap-x-2 py-2\"><div class=\"flex-grow\"><input onkeydown=\"return event.key != 'Enter';\" class=\"peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none \n                focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\n                invalid:border-red-500\" type=\"text\" id=\"ingredients\" name=\"ingredients\" required minlength=\"1\" placeholder=\"Ingredient name (e.g., Chicken Breast)\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter at least one ingredient.</p></div><div class=\"w-1/3\"><input onkeydown=\"return event.key != 'Enter';\" class=\"peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none \n                focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\n                invalid:border-red-500\" type=\"text\" id=\"quantity\" name=\"quantity\" required minlength=\"1\" placeholder=\"Quantity (e.g., 1lb)\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please provide a quantity.</p></div></li></ul><button type=\"button\" onClick=\"addIngredient();\" class=\"text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer\">Add Ingredient</button></div><div class=\"flex flex-col my-4\"><label for=\"instructions\" class=\"text-sm\">Instructions <span class=\"text-red-500\">*</span></label><p class=\"text-xs py-1 text-gray-700\">Please provide a list of instructions. You do not need to include step number, they will be added automatically!</p><div id=\"instruction-list\" class=\"flex flex-col\"><textarea class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500\n            focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500 \n            valid:my-2 invalid:mt-2\" id=\"instructions\" name=\"instructions\" rows=\"3\" required minlength=\"1\" placeholder=\"Step 1: Describe this step...\"></textarea><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter at least one step.</p></div><button type=\"button\" onClick=\"addInstruction();\" class=\"text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer\">Add Instruction Step</button></div><div class=\"flex flex-col my-4\"><label for=\"image\" class=\"text-sm\">Recipe Image</label><p class=\"text-xs pt-1 pb-2 text-gray-700\">Please provide an image of your creation. This is optional but is a nice touch!</p><input type=\"file\" accept=\"image/*\" name=\"image\" id=\"image\" class=\"my-2 block w-full text-sm text-placeholder file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:bg-blue-100 file:text-blue-700 cursor-pointer\"></div><p id=\"response\" class=\"hidden\"></p><button type=\"submit\" class=\"w-full mt-8 bg-gradient-to-r from-blue-200 to-purple-200 py-2 rounded-lg text-lg cursor-pointer shadow-md\">Create Recipe</button></form></div><script>\n  function addIngredient() {\n    const list = document.getElementById(\"ingredient-list\");\n    const item = document.createElement(\"li\");\n\n    // New item index\n    const index = list.querySelectorAll(\"li\").length;\n    item.id = `ingredient-${index}`;\n\n    item.classList.add(\"w-full\", \"flex\", \"gap-x-2\", \"py-2\");\n    item.innerHTML = `\n\t\t\t\t\t\t<input\n            onkeydown=\"return event.key != 'Enter';\"\n\t\t\t\t\t\t\tclass=\"flex-grow border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tid=\"ingredients\"\n\t\t\t\t\t\t\tname=\"ingredients\"\n\t\t\t\t\t\t\tplaceholder=\"Ingredient name (e.g., Chicken Breast)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n            onkeydown=\"return event.key != 'Enter';\"\n\t\t\t\t\t\t\tclass=\"w-1/3 border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tid=\"quantity\"\n\t\t\t\t\t\t\tname=\"quantity\"\n\t\t\t\t\t\t\tplaceholder=\"Quantity (e.g., 1lb)\"\n\t\t\t\t\t\t/>\n            <button type=\"button\" class=\"cursor-pointer\" onClick=\"removeIngredient(${index});\">\n              <svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M10.0303 8.96965C9.73741 8.67676 9.26253 8.67676 8.96964 8.96965C8.67675 9.26255 8.67675 9.73742 8.96964 10.0303L10.9393 12L8.96966 13.9697C8.67677 14.2625 8.67677 14.7374 8.96966 15.0303C9.26255 15.3232 9.73743 15.3232 10.0303 15.0303L12 13.0607L13.9696 15.0303C14.2625 15.3232 14.7374 15.3232 15.0303 15.0303C15.3232 14.7374 15.3232 14.2625 15.0303 13.9696L13.0606 12L15.0303 10.0303C15.3232 9.73744 15.3232 9.26257 15.0303 8.96968C14.7374 8.67678 14.2625 8.67678 13.9696 8.96968L12 10.9393L10.0303 8.96965Z\" fill=\"currentColor\"/>\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12Z\" fill=\"currentColor\"/>\n              </svg>\n            </button>\n    `;\n    list.appendChild(item);\n  }\n\n  function removeIngredient(index) {\n    const list = document.getElementById(\"ingredient-list\");\n\n    // List contents, ensure valid items\n    const listElement = list.querySelector(`#ingredient-${index}`);\n    if (listElement) listElement.remove();\n  }\n\n  function addInstruction() {\n    const list = document.getElementById(\"instruction-list\");\n    const itemNum = list.querySelectorAll(\"textarea\").length + 1;\n    const div = document.createElement(\"div\");\n    div.id = `instruction-${itemNum}`;\n    div.className = \"flex\";\n\n    div.innerHTML = `\n      <textarea \n        rows=\"3\"\n        name=\"instructions\"\n        placeholder=\"Step ${itemNum}: Describe this step...\"\n        class=\"flex-grow border border-gray-300 my-2 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm\"\n      ></textarea>\n\n      <button type=\"button\" class=\"p-2 cursor-pointer\" onClick=\"removeInstruction(${itemNum});\">\n        <svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10.0303 8.96965C9.73741 8.67676 9.26253 8.67676 8.96964 8.96965C8.67675 9.26255 8.67675 9.73742 8.96964 10.0303L10.9393 12L8.96966 13.9697C8.67677 14.2625 8.67677 14.7374 8.96966 15.0303C9.26255 15.3232 9.73743 15.3232 10.0303 15.0303L12 13.0607L13.9696 15.0303C14.2625 15.3232 14.7374 15.3232 15.0303 15.0303C15.3232 14.7374 15.3232 14.2625 15.0303 13.9696L13.0606 12L15.0303 10.0303C15.3232 9.73744 15.3232 9.26257 15.0303 8.96968C14.7374 8.67678 14.2625 8.67678 13.9696 8.96968L12 10.9393L10.0303 8.96965Z\" fill=\"currentColor\"/>\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12Z\" fill=\"currentColor\"/>\n        </svg>\n      </button>\n    `;\n\n    list.appendChild(div);\n  }\n\n  function removeInstruction(num) {\n    const list = document.getElementById(\"instruction-list\");\n    const item = list.querySelector(`#instruction-${num}`);\n    if (item) item.remove();\n\n    // This list will start at 2, since the first element is not included \n    const remainingItems = list.querySelectorAll(\"div\");\n\n    for (let i = 2; i < remainingItems.length + 2; i++) {\n      // Get the old content\n      const textContent = remainingItems[i - 2].querySelector(\"textarea\").value;\n\n      // Create a new element\n      const div = document.createElement(\"div\");\n      div.id = `instruction-${i}`;\n      div.className = \"flex\";\n      div.innerHTML = `\n        <textarea \n          rows=\"3\"\n          name=\"instructions\"\n          placeholder=\"Step ${i}: Describe this step...\"\n          class=\"flex-grow border border-gray-300 my-2 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm\"\n        >${textContent}</textarea>\n\n        <button type=\"button\" class=\"p-2 cursor-pointer\" onClick=\"removeInstruction(${i});\">\n          <svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10.0303 8.96965C9.73741 8.67676 9.26253 8.67676 8.96964 8.96965C8.67675 9.26255 8.67675 9.73742 8.96964 10.0303L10.9393 12L8.96966 13.9697C8.67677 14.2625 8.67677 14.7374 8.96966 15.0303C9.26255 15.3232 9.73743 15.3232 10.0303 15.0303L12 13.0607L13.9696 15.0303C14.2625 15.3232 14.7374 15.3232 15.0303 15.0303C15.3232 14.7374 15.3232 14.2625 15.0303 13.9696L13.0606 12L15.0303 10.0303C15.3232 9.73744 15.3232 9.26257 15.0303 8.96968C14.7374 8.67678 14.2625 8.67678 13.9696 8.96968L12 10.9393L10.0303 8.96965Z\" fill=\"currentColor\"/>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12Z\" fill=\"currentColor\"/>\n          </svg>\n        </button>\n      `;\n\n      remainingItems[i - 2].replaceWith(div);\n    }\n  }\n</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/templates/pages/favorites_templ.go b/internal/templates/pages/favorites_templ.go
index 4fbb7ed..7788752 100644
--- a/internal/templates/pages/favorites_templ.go
+++ b/internal/templates/pages/favorites_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/home_templ.go b/internal/templates/pages/home_templ.go
index 668a9e5..eb134b0 100644
--- a/internal/templates/pages/home_templ.go
+++ b/internal/templates/pages/home_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/list_templ.go b/internal/templates/pages/list_templ.go
index 8bc3a18..9218f27 100644
--- a/internal/templates/pages/list_templ.go
+++ b/internal/templates/pages/list_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/login_templ.go b/internal/templates/pages/login_templ.go
index 8fbefb8..1c378a8 100644
--- a/internal/templates/pages/login_templ.go
+++ b/internal/templates/pages/login_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/notFound_templ.go b/internal/templates/pages/notFound_templ.go
index e4723dd..a94b872 100644
--- a/internal/templates/pages/notFound_templ.go
+++ b/internal/templates/pages/notFound_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/profile_templ.go b/internal/templates/pages/profile_templ.go
index b3ac659..7b8b061 100644
--- a/internal/templates/pages/profile_templ.go
+++ b/internal/templates/pages/profile_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/recipe_templ.go b/internal/templates/pages/recipe_templ.go
index a3e403b..8f60f3e 100644
--- a/internal/templates/pages/recipe_templ.go
+++ b/internal/templates/pages/recipe_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/search_templ.go b/internal/templates/pages/search_templ.go
index 275bd90..80f9942 100644
--- a/internal/templates/pages/search_templ.go
+++ b/internal/templates/pages/search_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.924
+// templ: version: v0.3.937
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css
index fe3d6ea..f7bd052 100644
--- a/web/static/css/tailwind.css
+++ b/web/static/css/tailwind.css
@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -204,6 +204,9 @@
   ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -748,6 +751,9 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -757,8 +763,8 @@
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
-  .pl-4 {
-    padding-left: calc(var(--spacing) * 4);
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
   }
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);