{% extends "base.html" %}

{% block content %}
<!-- main content -->
<main class="px-16 py-6 bg-gray-100 md:col-span-3">
    <div class="flex justify-center md:justify-end">
        <a href="/sign-in" class="btn text-primary border-primary md:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
    </div>

    <div class="sm:bg-white sm:w-[50%] sm:ml-auto sm:mr-auto sm:mt-[10rem] sm:p-10 sm:rounded-3xl">
        <div>
            <img src={{ recipe.image_url.clone().unwrap_or_default() }} alt="omelette" class="sm:rounded-xl">
        </div>
        <div class="pl-[1.7rem] mt-8 sm:p-0 sm:mt-9">
            <h1 class="font-young-serif text-[37px] text-stone-700 leading-10 mb-7 sm:text-stone-800">{{ recipe.title }}</h1>
            <p class="text-[17px] pr-[15px] font-outfit-regular text-stone-500 sm:text-base sm:p-0">
                {{ recipe.summary.clone().unwrap_or_default() }}
            </p>
        </div>
        <div class="pr-7 border-bottom border-b-[2px] ml-auto mr-auto w-[20rem] pb-6 sm:w-auto">
            <p class="Title mb-5">Ingredients</p>
            <ul class="list-disc ml-6 marker:text-rose-900">
                {% for ingeredient in ingeredients %}
                <li class="paragraph pl-3 mb-2"><span class="mr-2">{{ ingeredient.qty }}</span><span>{{ ingeredient.name }}</span></li>
                {% endfor %}
            </ul>
        </div>
        <div class="border-bottom marker:text-rose-900 marker:font-outfit-semibold border-b-[2px] ml-auto mr-auto w-[20.2rem] pb-4 mt-8 sm:w-auto">
            <p class="Title mb-5">Instructions</p>
            <ol class="list-decimal ml-6">
                {% for step in steps %}
                <li class="font-outfit-regular text-stone-500 text-[17px] mb-3 pl-3 text-base">
                    {{ step.body }}
                    <div>{{ step.hint.clone().unwrap_or_default() }}</div>
                </li>
                {% endfor %}
            </ol>
        </div>
    </div>
</main>

{% endblock %}