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

{% block title %}Liste d'envies — Pipou{% endblock %}
{% block theme_color %}#f5f5f4{% endblock %}

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

{% block body %}

{% embed 'ui/index_shell.html.twig' with {
    title: 'Liste d\'envies',
    eyebrow: 'Pipou',
    subtitle: 'Prix max, où acheter, liens utiles',
    accent_rgb: '234,88,12',
    back_href: path('front.home'),
} %}
{% block index_card %}

        <details class="mb-5 rounded-2xl bg-white dark:bg-stone-900 border border-amber-100 dark:border-amber-900/50 shadow-sm overflow-hidden">
            <summary class="flex items-center gap-3 px-5 py-4 cursor-pointer select-none font-semibold text-stone-700 dark:text-stone-200 hover:bg-amber-50/50 dark:hover:bg-amber-950/30 transition-colors group">
                <div class="size-7 rounded-lg bg-amber-100 dark:bg-amber-950/50 group-hover:bg-amber-200 dark:group-hover:bg-amber-900/50 flex items-center justify-center transition-colors">
                    <svg class="size-4 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                    </svg>
                </div>
                <span>Ajouter une envie</span>
                <svg class="size-4 text-stone-300 dark:text-stone-500 ml-auto" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
                </svg>
            </summary>
            <form action="{{ path('front.wishlist.new') }}" method="post" class="px-5 pb-5 space-y-3">
                <div>
                    <input type="text" name="name" required placeholder="Nom de l'article *"
                        class="w-full rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 transition">
                </div>
                <div>
                    <textarea name="description" rows="2" placeholder="Description (optionnel)"
                        class="w-full rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 transition resize-none"></textarea>
                </div>
                <div class="grid grid-cols-2 gap-2">
                    <input type="text" name="max_price" placeholder="Prix max (€, ex. 25)"
                        class="rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 transition">
                    <input type="text" name="where_to_buy" placeholder="Où l'acheter (magasin, site…)"
                        class="rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 transition">
                </div>
                <div>
                    <input type="url" name="link" placeholder="Lien direct (optionnel)"
                        class="w-full rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 transition">
                </div>
                <div>
                    <input type="text" name="tags" placeholder="Tags séparés par des virgules"
                        class="w-full rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 transition">
                </div>
                <button type="submit"
                    class="w-full rounded-xl bg-amber-500 hover:bg-amber-600 text-white font-semibold py-2.5 shadow-sm transition-colors">
                    Ajouter à la liste
                </button>
            </form>
        </details>

        {{ component('WishlistBrowser') }}

{% endblock %}
{% endembed %}

{% endblock %}