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

{% block title %}Recettes — Pipou{% endblock %}
{% block theme_color %}#f5f5f4{% endblock %}
{% block status_bar_style %}default{% endblock %}

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

{% block body %}

{% embed 'ui/index_shell.html.twig' with {
    title: 'Mes recettes',
    eyebrow: 'Cuisine',
    accent_rgb: '245,158,11',
    back_href: path('front.home'),
} %}
{% block header_actions %}
            <form action="{{ path('front.recipe.generate') }}" method="post" class="shrink-0">
                <button type="submit"
                        class="flex items-center gap-1.5 rounded-full bg-amber-500 hover:bg-amber-400 active:bg-amber-600 text-stone-900 dark:text-amber-950 text-xs font-bold px-3.5 py-2 shadow-sm transition-all">
                    <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456Z"/>
                    </svg>
                    Générer
                </button>
            </form>
{% endblock %}
{% block index_card %}

    {% if recipes is empty %}
        <div class="text-center py-16 px-6">
            <div class="size-20 rounded-2xl bg-amber-100 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 flex items-center justify-center mx-auto mb-5">
                <svg class="size-10 text-amber-600/70 dark:text-amber-400/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z"/>
                </svg>
            </div>
            <h3 class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-2">Pas encore de recettes</h3>
            <p class="text-sm text-stone-500 dark:text-stone-400 leading-relaxed mb-6">
                Claude analyse votre garde-manger et crée des recettes personnalisées à partir de ce que vous avez.
            </p>
            <form action="{{ path('front.recipe.generate') }}" method="post">
                <button type="submit"
                        class="rounded-xl bg-amber-500 hover:bg-amber-400 text-stone-900 dark:text-amber-950 font-bold px-6 py-3 shadow-sm transition-all">
                    Générer mes premières recettes
                </button>
            </form>
        </div>
    {% else %}
        <ul class="space-y-3">
            {% for recipe in recipes %}
            <li>
                <a href="{{ path('front.recipe.show', {id: recipe.id}) }}"
                   class="block rounded-2xl bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 overflow-hidden hover:border-amber-200 dark:hover:border-amber-700 hover:-translate-y-0.5 hover:shadow-md dark:hover:shadow-stone-950/50 transition-all duration-200">

                    <div class="px-5 pt-4 pb-3">
                        <div class="flex items-start gap-3">
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 flex-wrap mb-1.5">
                                    <p class="font-bold text-stone-900 dark:text-stone-100">{{ recipe.title }}</p>
                                    {% if recipe.difficulty %}
                                        <span class="rounded-full px-2.5 py-0.5 text-[10px] font-bold {{ recipe.difficultyColor }}">
                                            {{ recipe.difficulty }}
                                        </span>
                                    {% endif %}
                                </div>
                                <p class="text-xs text-stone-500 dark:text-stone-400 leading-relaxed line-clamp-2">{{ recipe.description }}</p>
                            </div>
                            <svg class="size-4 text-stone-400 dark:text-stone-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
                            </svg>
                        </div>

                        <div class="flex items-center gap-3 mt-3 flex-wrap">
                            {% if recipe.totalTimeMinutes %}
                                <span class="flex items-center gap-1 text-[11px] text-stone-500 dark:text-stone-400">
                                    <svg class="size-3.5" 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>
                                    {{ recipe.totalTimeMinutes }} min
                                </span>
                            {% endif %}
                            <span class="flex items-center gap-1 text-[11px] text-stone-500 dark:text-stone-400">
                                <svg class="size-3.5" 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>
                                {{ recipe.servings }} pers.
                            </span>
                            {% set pantryCount = recipe.pantryIngredientCount %}
                            {% set totalCount = recipe.ingredients|length %}
                            {% set ratio = totalCount > 0 ? (pantryCount / totalCount) : 0 %}
                            <span class="flex items-center gap-1.5 text-[11px] font-semibold
                                {{ ratio >= 0.8 ? 'text-emerald-600 dark:text-emerald-400' : (ratio >= 0.5 ? 'text-amber-600 dark:text-amber-400' : 'text-stone-500 dark:text-stone-400') }}">
                                <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                                </svg>
                                {{ pantryCount }}/{{ totalCount }} en stock
                            </span>
                            {% for tag in recipe.tags|slice(0, 2) %}
                                <span class="rounded-full bg-amber-100 dark:bg-amber-950/50 border border-amber-200 dark:border-amber-800 px-2 py-0.5 text-[10px] text-amber-800 dark:text-amber-200 font-medium">{{ tag }}</span>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="px-5 py-2 border-t border-stone-200 dark:border-stone-700 text-[10px] text-stone-400 dark:text-stone-500 flex items-center gap-1">
                        <svg class="size-3 text-amber-500/60 dark:text-amber-400/50" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z"/>
                        </svg>
                        Générée le {{ recipe.generatedAt|date('d/m/Y à H:i') }}
                    </div>

                </a>
            </li>
            {% endfor %}
        </ul>
    {% endif %}

{% endblock %}
{% endembed %}

{% endblock %}