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

{% block title %}Budgets
{% endblock %}

{% block body %}
	<div class="p-4 max-w-5xl mx-auto space-y-6" data-controller="budget-drawer">
		<div class="flex items-center justify-between">
			<h1 class="text-3xl font-bold">Budgets</h1>

			{% if canAdd %}
				<a href="{{ path('app_budget_new', { year: year, month: month }) }}" class="button-style brand-button-style">
					Ajouter un budget
				</a>
			{% endif %}
		</div>

		<div class="flex items-center justify-between bg-white rounded shadow border border-gray-200 p-2">
			{% if canGoPrevious %}
				<a href="{{ path('app_budget_index', { year: previousDate|date('Y'), month: previousDate|date('n') }) }}" class="w-10 h-10 rounded border border-gray-200 flex items-center justify-center hover:bg-neutral-100">
					{{ ux_icon('mdi:arrow-left', { class: 'w-7 h-7' }) }}
				</a>
			{% else %}
				<span class="w-10 h-10 rounded border border-gray-200 flex items-center justify-center opacity-40 cursor-not-allowed">
					{{ ux_icon('mdi:arrow-left', { class: 'w-7 h-7' }) }}
				</span>
			{% endif %}

			<h2 class="text-2xl font-bold">
				{{ date(year ~ '-' ~ month)|format_date(pattern='MMMM yyyy', locale='fr')|capitalize }}
			</h2>

			{% if canGoNext %}
				<a href="{{ path('app_budget_index', { year: nextDate|date('Y'), month: nextDate|date('n') }) }}" class="w-10 h-10 rounded border border-gray-200 flex items-center justify-center hover:bg-neutral-100">
					{{ ux_icon('mdi:arrow-right', { class: 'w-7 h-7' }) }}
				</a>
			{% else %}
				<span class="w-10 h-10 rounded border border-gray-200 flex items-center justify-center opacity-40 cursor-not-allowed">
					{{ ux_icon('mdi:arrow-right', { class: 'w-7 h-7' }) }}
				</span>
			{% endif %}
		</div>

		<div class="flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-300px)]">
			{% for budget in budgets %}
				{{ component('Budget:BudgetComponent', { budgetId: budget.id, key: budget.id }) }}
			{% else %}
				<div class="rounded border border-gray-200 bg-white shadow-sm overflow-hidden px-4 py-2 text-center">
					Aucun budget défini pour ce mois.
				</div>
			{% endfor %}
		</div>

		{% include "budget/_show.html.twig" %}

		<div id="drawerOverlay" data-budget-drawer-target="overlay" data-action="click->budget-drawer#close" class="fixed inset-0 bg-black/40 hidden z-40"></div>
	</div>
{% endblock %}