---
import client from "@/data/pocketbase";
import SiteLayout from "@/layouts/base";
import ImageCarousel from "@/components/Detail/ImageCarousel";
import IngredientTableView from "@/components/Detail/IngredientTableView";
import StepView from "@/components/Detail/StepView";
import InfoView from "@/components/Detail/InfoView";

const { recipeid } = Astro.params;

---

<script>
    let ingredients: {qty: string, unit: string, ing: string}[] = []
    
    function addIngredient(q: string, u: string, i: string) {
        ingredients.push({qty: q, unit: u, ing: i})
    }
</script>

<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="w-full bg-white/20 rounded-lg h-50">
                Image Upload
            </div>
            <!-- <ImageCarousel class="w-full" recipe={re} /> -->
            <textarea
                id="rec-name"
                name="name"
                rows="1"
                placeholder="Name"
                class="text-[28pt]  font-bold h-12 p-1 leading-none mt-2 bg-white/20 rounded-lg"
                style="resize: none;"
            />

            <!-- 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>
            </div>
            <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                <thead>
                    <tr>
                        <th class="px-4 py-2 w-25">Quantity</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-gray-600">
                    <tr id="ingredient-input" class="">
                        <td class="px-2 py-1">
                            <input class="w-full h-10 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Qty">
                        </td>
                        <td class="px-2 py-1">
                            <input class="w-full h-10 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Unit">
                        </td>
                        <td class="px-2 py-1">
                            <textarea class="w-full h-10 bg-white/20 rounded-lg px-2 py-2 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
            <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->

            <!-- Steps -->
            <!-- <StepView steps={steps} /> -->
        </div>

    </div>
</SiteLayout>