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

{% block title %}Comptes — Pipou{% endblock %}
{% block body_class %}bg-stone-100 dark:bg-stone-950{% endblock %}

{% block body %}
<div class="flex flex-col w-full min-h-dvh">

    <div class="flex items-center justify-between px-4 pt-4 pb-3" style="padding-top: calc(1rem + var(--safe-top))">
        <h1 class="text-xl font-bold tracking-tight">Comptes</h1>
        <a href="{{ path('front.expense.group.new') }}"
           class="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-violet-600 text-white text-sm font-semibold active:bg-violet-700 transition-colors">
            <svg class="size-4" 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>
            Nouveau
        </a>
    </div>

    <div class="flex-1 px-4 pb-4 space-y-3">
        {% for group in groups %}
        <a href="{{ path('front.expense.group.show', {id: group.id}) }}"
           class="flex items-center gap-3 p-4 rounded-2xl bg-white dark:bg-stone-900 shadow-sm active:scale-[0.98] transition-transform">
            <div class="size-10 rounded-xl bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center shrink-0">
                <svg class="size-5 text-violet-600 dark:text-violet-400" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/>
                </svg>
            </div>
            <div class="flex-1 min-w-0">
                <p class="font-semibold text-sm truncate">{{ group.name }}</p>
                <p class="text-xs text-stone-500 dark:text-stone-400">{{ group.members|length }} membre{{ group.members|length > 1 ? 's' }}</p>
            </div>
            <svg class="size-4 text-stone-400 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.5 7.5 7.5-7.5 7.5"/>
            </svg>
        </a>
        {% else %}
        <div class="flex flex-col items-center justify-center py-20 text-center">
            <div class="size-16 rounded-2xl bg-violet-100 dark:bg-violet-900/30 flex items-center justify-center mb-4">
                <svg class="size-8 text-violet-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/>
                </svg>
            </div>
            <p class="font-semibold text-stone-700 dark:text-stone-200">Aucun compte commun</p>
            <p class="text-sm text-stone-500 mt-1">Crée-en un pour commencer à partager les dépenses.</p>
        </div>
        {% endfor %}
    </div>

</div>
{% endblock %}