{% extends "base.html" %}

{% block content %}
<main class="m-4 flex flex-col gap-4 w-full">
    {% include "../top_bar.html" %}
    <div class="sm:rounded-3xl w-full flex flex-col gap-4">
        <div class="text-center w-full">
            <img src={{ recipe.image_url.clone() }} alt="{{recipe.title}}" class="rounded-xl w-40 md:w-3/4 ml-auto mr-auto">
        </div>
        <div class="flex flex-col gap-7">
            <h1 class="font-young-serif text-desktop-heading-l text-stone-700 sm:text-stone-800 text-center md:text-left">
                {{ recipe.title }}
            </h1>
            <p class="font-outfit-regular text-stone-500 sm:text-base">
                {{ recipe.summary.clone().unwrap_or_default() }}
            </p>
        </div>
        <div class="divider"></div>
        <div class="flex flex-col gap-7">
            <p class="text-desktop-heading-m">
                Ingredients
            </p>
            <ul class="list-disc marker:text-rose-900 list-inside flex flex-col gap-3">
                {% for ingeredient in ingeredients %}
                <li class="paragraph">
                    <span class="mr-1">
                        {{ ingeredient.qty }}
                    </span>
                    <span class="mr-4">
                        {{ ingeredient.unit }}
                    </span>
                    <span>
                        {{ ingeredient.name }}
                    </span>
                </li>
                {% endfor %}
            </ul>
        </div>
        <div class="divider"></div>
        <div class="marker:text-rose-900 marker:font-outfit-semibold flex flex-col gap-7">
            <p class="text-desktop-heading-m">
                Instructions
            </p>
            <ol class="list-decimal list-inside flex flex-col gap-3">
                {% for step in steps %}
                <li class="font-outfit-regular text-stone-500 text-base text-base">
                    {{ step.body }}
                    <div>{{ step.hint.clone().unwrap_or_default() }}</div>
                </li>
                {% endfor %}
            </ol>
        </div>
        <div class="divider"></div>
        <div class="marker:text-rose-900 marker:font-outfit-semibold flex flex-col gap-7">
            <p class="text-desktop-heading-m">
                Tags
            </p>
            <div class="flex gap-4 gap-7">
            {% for tag in tags %}
                <a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center">
                    {{ tag.name }}
                </a>
            {% endfor %}
            </div>
        </div>
        <div class="divider"></div>
        <div class="marker:text-rose-900 marker:font-outfit-semibold flex flex-col gap-7">
            <p class="text-desktop-heading-m">
                Ingredients
            </p>
            <div class="flex gap-4 gap-7">
            {% for ingeredient in ingeredients %}
                <a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center">
                    {{ ingeredient.name }}
                </a>
            {% endfor %}
            </div>
        </div>
    </div>
</main>

{% endblock %}