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

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

    <form method="post" action="{{ path('front.expense.expense.edit', {id: expense.id}) }}" 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" value="{{ expense.description }}" required
                       class="w-full bg-transparent text-base outline-none">
            </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"
                       value="{{ expense.amount }}"
                       class="w-full bg-transparent text-2xl font-bold outline-none">
            </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="{{ expense.date|date('Y-m-d') }}"
                       class="w-full bg-transparent outline-none text-sm">
            </div>
            {{ include('front/expense/_category_picker.html.twig', { selectedCategory: expense.category }) }}
        </div>

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

        <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>

    <form method="post" action="{{ path('front.expense.expense.delete', {id: expense.id}) }}"
          onsubmit="return confirm('Supprimer cette dépense ?')"
          class="px-4 mt-2 pb-6">
        <button type="submit"
                class="w-full py-3 rounded-2xl border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 font-semibold text-sm active:bg-red-50 transition-colors">
            Supprimer
        </button>
    </form>

</div>
{% endblock %}