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

{% block title %}Modifier {{ group.name }} — 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" style="padding-top: var(--safe-top)">

    <div class="flex items-center gap-3 px-4 pt-4 pb-3">
        <a href="{{ path('front.expense.group.show', {id: group.id}) }}"
           class="flex items-center justify-center size-9 rounded-full bg-stone-200 dark:bg-stone-800 active:bg-stone-300 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="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/>
            </svg>
        </a>
        <h1 class="text-lg font-bold">Modifier le groupe</h1>
    </div>

    <div class="px-4 space-y-4">
        <form method="post" class="space-y-3">
            <div class="bg-white dark:bg-stone-900 rounded-2xl p-4">
                <label class="block text-sm font-semibold text-stone-600 dark:text-stone-400 mb-2">Nom</label>
                <input type="text" name="name" value="{{ group.name }}" required
                       class="w-full bg-transparent text-base outline-none">
            </div>
            <button type="submit"
                    class="w-full py-3.5 rounded-2xl bg-violet-600 text-white font-semibold active:bg-violet-700 transition-colors">
                Enregistrer
            </button>
        </form>

        <div class="bg-white dark:bg-stone-900 rounded-2xl p-4">
            <p class="text-sm font-semibold text-stone-600 dark:text-stone-400 mb-3">Membres</p>
            <ul class="space-y-2 mb-3">
                {% for member in group.members %}
                <li class="flex items-center gap-2 text-sm">
                    <div class="size-7 rounded-full bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center text-xs font-bold text-violet-700 dark:text-violet-300">
                        {{ member.displayName|first|upper }}
                    </div>
                    {{ member.displayName }}
                </li>
                {% endfor %}
            </ul>

            <form method="post" action="{{ path('front.expense.group.add_member', {id: group.id}) }}" class="flex gap-2">
                <input type="text" name="username" placeholder="Nom d'utilisateur" required
                       class="flex-1 bg-stone-100 dark:bg-stone-800 rounded-xl px-3 py-2 text-sm outline-none">
                <button type="submit"
                        class="px-3 py-2 rounded-xl bg-violet-600 text-white text-sm font-semibold active:bg-violet-700 transition-colors">
                    Ajouter
                </button>
            </form>
        </div>
    </div>

</div>
{% endblock %}