{% extends 'base.html.twig' %}

{% block title %}{{ recipe.title }} — Recettes{% endblock %}

{% block body_class %}bg-stone-100 text-stone-900 dark:bg-stone-950 dark:text-stone-100{% endblock %}

{% block body %}
<div class="max-w-lg mx-auto px-4 pt-2 pb-8">

{% embed 'ui/page_nav.html.twig' with {
    variant: 'surface',
    back_href: path('front.recipe.index'),
    eyebrow: 'Recette',
    title: recipe.title,
} %}
{% block trailing %}
            {% if recipe.difficulty %}
                <span class="shrink-0 self-start rounded-full px-2.5 py-1 text-xs font-semibold mt-1 {{ recipe.difficultyColor }}">
                    {{ recipe.difficulty }}
                </span>
            {% endif %}
{% endblock %}
{% endembed %}

    <div class="rounded-2xl bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 shadow-sm p-5 mb-4">
        <p class="text-sm text-stone-600 dark:text-stone-300 leading-relaxed italic mb-4">"{{ recipe.description }}"</p>
        <div class="flex flex-wrap gap-4 text-xs text-stone-500 dark:text-stone-400">
            {% if recipe.prepTimeMinutes %}
                <div class="flex items-center gap-1.5">
                    <svg class="size-4 text-stone-400 dark:text-stone-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
                    <span><strong class="text-stone-700 dark:text-stone-200">{{ recipe.prepTimeMinutes }}</strong> min prep</span>
                </div>
            {% endif %}
            {% if recipe.cookTimeMinutes %}
                <div class="flex items-center gap-1.5">
                    <svg class="size-4 text-stone-400 dark:text-stone-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"/></svg>
                    <span><strong class="text-stone-700 dark:text-stone-200">{{ recipe.cookTimeMinutes }}</strong> min cuisson</span>
                </div>
            {% endif %}
            <div class="flex items-center gap-1.5">
                <svg class="size-4 text-stone-400 dark:text-stone-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>
                <span><strong class="text-stone-700 dark:text-stone-200">{{ recipe.servings }}</strong> personnes</span>
            </div>
        </div>
        {% if recipe.tags is not empty %}
            <div class="flex flex-wrap gap-1.5 mt-4">
                {% for tag in recipe.tags %}
                    <span class="rounded-full bg-stone-100 dark:bg-stone-800 text-stone-500 dark:text-stone-400 text-xs px-2.5 py-1">{{ tag }}</span>
                {% endfor %}
            </div>
        {% endif %}
    </div>

    <div class="rounded-2xl bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 shadow-sm p-5 mb-4">
        <h3 class="text-sm font-semibold text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-4">
            Ingrédients
            <span class="normal-case font-normal text-stone-300 dark:text-stone-600">
                ({{ recipe.pantryIngredientCount }}/{{ recipe.ingredients|length }} dans votre garde-manger)
            </span>
        </h3>
        <ul class="space-y-2">
            {% for ingredient in recipe.ingredients %}
                <li class="flex items-center gap-3">
                    {% if ingredient.in_pantry %}
                        <span class="shrink-0 size-5 rounded-full bg-green-100 dark:bg-green-900/40 flex items-center justify-center">
                            <svg class="size-3 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
                        </span>
                    {% else %}
                        <span class="shrink-0 size-5 rounded-full bg-stone-100 dark:bg-stone-800 flex items-center justify-center">
                            <svg class="size-3 text-stone-400 dark:text-stone-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                        </span>
                    {% endif %}
                    <span class="flex-1 text-sm {{ ingredient.in_pantry ? 'text-stone-700 dark:text-stone-200' : 'text-stone-400 dark:text-stone-500' }}">
                        {{ ingredient.name }}
                    </span>
                    <span class="text-xs text-stone-400 dark:text-stone-500 font-medium shrink-0">{{ ingredient.quantity }}</span>
                </li>
            {% endfor %}
        </ul>
    </div>

    <div class="rounded-2xl bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 shadow-sm p-5 mb-5">
        <h3 class="text-sm font-semibold text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-4">Préparation</h3>
        <ol class="space-y-4">
            {% for step in recipe.steps %}
                <li class="flex gap-3">
                    <span class="shrink-0 size-6 rounded-full bg-amber-100 dark:bg-amber-900/50 text-amber-600 dark:text-amber-300 font-bold text-xs flex items-center justify-center mt-0.5">
                        {{ loop.index }}
                    </span>
                    <p class="text-sm text-stone-700 dark:text-stone-200 leading-relaxed">{{ step }}</p>
                </li>
            {% endfor %}
        </ol>
    </div>

    <div class="rounded-2xl bg-amber-50 dark:bg-amber-950/30 border border-amber-100 dark:border-amber-900/50 p-5">
        <h3 class="text-sm font-semibold text-amber-700 dark:text-amber-400 mb-1">Prêt à cuisiner ?</h3>
        <p class="text-xs text-amber-600 dark:text-amber-300/90 leading-relaxed mb-4">
            En cliquant sur "Cuisiner ce repas", les articles de votre garde-manger utilisés dans cette recette seront automatiquement consommés et un repas sera créé dans votre historique.
        </p>
        <form action="{{ path('front.recipe.cook', {id: recipe.id}) }}" method="post">
            <button type="submit"
                    class="w-full rounded-xl bg-amber-500 hover:bg-amber-600 text-white font-semibold py-3 transition-colors flex items-center justify-center gap-2">
                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"/></svg>
                Cuisiner ce repas
            </button>
        </form>
    </div>

    <p class="text-[10px] text-center text-stone-300 dark:text-stone-600 mt-4">Générée le {{ recipe.generatedAt|date('d/m/Y à H:i') }} · recette IA, vérifier les allergènes</p>

</div>
{% endblock %}