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

{% block title %}Repas — Garde-manger{% endblock %}
{% block theme_color %}#f5f5f4{% endblock %}

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

{% block body %}

{% embed 'ui/index_shell.html.twig' with {
    title: 'Repas',
    eyebrow: 'Garde-manger',
    accent_rgb: '245,158,11',
    back_href: path('front.pantry.index'),
} %}
{% block header_actions %}
        <a href="{{ path('front.pantry.meal.new') }}"
           class="shrink-0 rounded-full bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold px-3.5 py-2 transition-colors shadow-sm">
            + Nouveau
        </a>
{% endblock %}
{% block index_card %}

    {% if meals is empty %}
        <div class="text-center py-16 text-stone-400 dark:text-stone-500">
            <div class="size-16 rounded-3xl bg-stone-100 dark:bg-stone-800 flex items-center justify-center mx-auto mb-4">
                <svg class="size-8 text-stone-300 dark:text-stone-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.871c1.355 0 2.697.056 4.024.166C17.155 8.51 18 9.473 18 10.608v2.513M15 19.128v1.5a2.625 2.625 0 0 1-5.25 0v-1.5M8.25 19.128c.621.058 1.248.087 1.88.096M15.75 19.128c-.621.058-1.248.087-1.88.096m0 0a48.109 48.109 0 0 1-3.74 0"/>
                </svg>
            </div>
            <p class="text-sm font-semibold text-stone-500 dark:text-stone-400">Aucun repas enregistré</p>
            <a href="{{ path('front.pantry.meal.new') }}" class="mt-3 inline-block text-amber-600 dark:text-amber-400 text-sm font-semibold hover:text-amber-700 dark:hover:text-amber-300">
                Créer le premier repas →
            </a>
        </div>
    {% else %}
        <ul class="space-y-3">
            {% for meal in meals %}
                <li>
                    <a href="{{ path('front.pantry.meal.show', {id: meal.id}) }}"
                       class="flex items-center gap-3 rounded-2xl bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 shadow-sm px-4 py-3.5 hover:border-amber-200 dark:hover:border-amber-800 transition-colors">

                        {# Thumbnails from first 3 items with images, or color initials #}
                        {% set imgs = [] %}
                        {% for c in meal.consumptions %}
                            {% if c.item.imageUrl and imgs|length < 3 %}
                                {% set imgs = imgs|merge([c.item.imageUrl]) %}
                            {% endif %}
                        {% endfor %}

                        {% if imgs|length > 0 %}
                            <div class="flex items-center shrink-0 self-center" style="gap: -4px">
                                {% for img in imgs %}
                                    <img src="{{ img }}" alt=""
                                         class="size-10 rounded-xl object-contain bg-stone-50 dark:bg-stone-800 border-2 border-white dark:border-stone-900 -ml-2 first:ml-0">
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="size-10 rounded-xl bg-amber-50 dark:bg-amber-950/30 border border-amber-100 dark:border-amber-900/30 flex items-center justify-center shrink-0">
                                <svg class="size-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.871c1.355 0 2.697.056 4.024.166C17.155 8.51 18 10.608v2.513"/>
                                </svg>
                            </div>
                        {% endif %}

                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-stone-800 dark:text-stone-100 truncate text-sm">{{ meal.name }}</p>
                            <p class="text-xs text-stone-400 dark:text-stone-500 mt-0.5">
                                {{ meal.eatenAt|date('d/m/Y') }}
                                · {{ meal.consumptions|length }} aliment{{ meal.consumptions|length > 1 ? 's' : '' }}
                                · {{ meal.createdBy.displayName }}
                            </p>
                            {% if meal.description %}
                                <p class="text-xs text-stone-500 dark:text-stone-400 truncate mt-0.5 italic">{{ meal.description }}</p>
                            {% endif %}
                        </div>

                        {% set cal = meal.totalCalories %}
                        {% if cal is not null %}
                            <div class="shrink-0 flex flex-col items-center gap-0.5">
                                <div class="flex items-center gap-1 bg-amber-50 dark:bg-amber-950/30 rounded-xl px-2.5 py-1.5">
                                    <svg class="size-3.5 text-orange-400 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 0 0-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 0 0-.613 3.58 2.64 2.64 0 0 1-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 0 0 5.05 6.05 6.981 6.981 0 0 0 3 11a7 7 0 1 0 14 0c0-1.416-.435-2.766-1.184-3.858-.204-.29-.476-.54-.752-.75z" clip-rule="evenodd"/>
                                    </svg>
                                    <span class="text-sm font-bold text-amber-600 dark:text-amber-400 tabular-nums">{{ cal|number_format(0) }}</span>
                                </div>
                                <p class="text-[10px] text-stone-400 dark:text-stone-500">kcal</p>
                            </div>
                        {% endif %}

                        <svg class="size-4 text-stone-300 dark:text-stone-600 shrink-0" 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>
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% endif %}

{% endblock %}
{% endembed %}

{% endblock %}