---
import SiteLayout from "@/layouts/base";

const { recipeid } = Astro.params;

// Actually post the recipe with the stored variables
async function submitRecipe() {
    
}

---
<script src="@/script/newRecipe.ts"/>

<SiteLayout>
    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
            <div class="relative">
                <input 
                    id="photo" 
                    type="file" 
                    accept="image/png,image/jpeg" 
                    class="w-full bg-white/10 rounded-lg h-50
                           file:mr-4 file:py-2 file:px-4 
                           file:rounded-lg file:border-0 file:hidden
                           before:content-['camera'] before:w-full before:h-full before:flex 
                           before:items-center before:justify-center before:absolute
                           relative cursor-pointer
                           [&::-webkit-file-upload-button]:hidden"
                >
            </div>
            <textarea
                id="rec-name"
                rows="1"
                placeholder="Name"
                class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
                oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
            />
            <textarea
                id="rec-desc"
                rows="4"
                placeholder="Description"
                class="text-sm italic p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
                oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
            />
                <!-- if it works :3  -->

            <!-- Details -->
            <!-- <InfoView re={re} /> -->

            <div class="flex flex-row align-middle items-center">
                <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
                <button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
            </div>
            <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                <thead>
                    <tr>
                        <th class="px-4 py-2 w-18">Qty</th>
                        <th class="px-4 py-2 w-20">Unit</th>
                        <th class="px-4 py-2">Ingredient</th>
                    </tr>
                </thead>
                <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-white/10">
                    <tr id="ingredient-input" class="">
                        <td class="px-2 py-1">
                            <input id="ing-qty" class="w-full h-9 my-1 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
                        </td>
                        <td class="px-2 py-1">
                            <input id="ing-unit" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Unit">
                        </td>
                        <td class="px-2 py-1">
                            <!-- <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/> -->
                             <input id="ing-name" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
            <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->

            <!-- Steps -->
            <p class="text-[22pt] font-bold md:hidden">Steps</p>
 
            <div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
                <!-- <p class="text-bold text-[10pt]">Step</p> -->
                <textarea
                        id="new-instruction"
                        class="block bg-white/10 w-full h-full rounded-lg resize-none px-3 py-1"
                        placeholder="New Step"
                        oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
                    />
            </div>

            <button disabled class="disabled:text-white/20 ml-auto mb-2 transition-colors text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>

            <ul id="step-list"></ul>
        </div>

    </div>
</SiteLayout>