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

{% block title %}Nouvelle dépense — 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">Nouvelle dépense</h1>
    </div>

    <form method="post" class="px-4 space-y-3">

        <div class="bg-white dark:bg-stone-900 rounded-2xl divide-y divide-stone-100 dark:divide-stone-800">
            <div class="p-4">
                <label class="block text-xs font-semibold text-stone-500 mb-1.5">Description</label>
                <input type="text" name="description" required autofocus
                       placeholder="Restaurant, courses…"
                       class="w-full bg-transparent text-base outline-none placeholder-stone-400">
            </div>
            <div class="p-4">
                <label class="block text-xs font-semibold text-stone-500 mb-1.5">Montant (€)</label>
                <input type="number" name="amount" step="0.01" min="0.01" required
                       placeholder="0,00"
                       class="w-full bg-transparent text-2xl font-bold outline-none placeholder-stone-300">
            </div>
            <div class="p-4">
                <label class="block text-xs font-semibold text-stone-500 mb-1.5">Payé par</label>
                <select name="paid_by" class="w-full bg-transparent outline-none text-sm">
                    {% for member in group.members %}
                    <option value="{{ member.id }}"
                            {{ member == app.user ? 'selected' : '' }}>
                        {{ member.displayName }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="p-4">
                <label class="block text-xs font-semibold text-stone-500 mb-1.5">Date</label>
                <input type="date" name="date" value="{{ 'now'|date('Y-m-d') }}"
                       class="w-full bg-transparent outline-none text-sm">
            </div>
            {{ include('front/expense/_category_picker.html.twig', { selectedCategory: null }) }}
        </div>

        <twig:Expense:ExpenseSplitForm groupId="{{ group.id }}" />

        <button type="submit"
                class="w-full py-3.5 rounded-2xl bg-violet-600 text-white font-semibold text-base active:bg-violet-700 transition-colors">
            Ajouter la dépense
        </button>

    </form>
</div>
{% endblock %}