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

{% block body %}
	<div class="p-4 max-w-5xl mx-auto space-y-6">
		<div class="flex items-center justify-between">
			<h1 class="text-3xl font-bold">
				Transactions périodiques
				{{ mode == 'archived' ? ' - Archives' }}
			</h1>

			<div class="flex gap-2">
				{% if mode == 'actives' %}
					<a href="{{ path('recurring_transaction_new') }}" class="button-style brand-button-style">
						Nouvelle
					</a>
					<a href="{{ path('recurring_transaction_index_archived') }}" class="button-style warning-button-style">
						Archivées
					</a>
				{% else %}
					<a href="{{ path('recurring_transaction_index') }}" class="button-style success-button-style">
						Actives
					</a>
				{% endif %}
			</div>
		</div>

		<div class="grid gap-4">
			{% for item in items %}
				<div class="bg-neutral-secondary-soft rounded-xl p-5 flex justify-between">
					<div class="flex gap-4 items-center w-3/4">
						<div class="space-y-1 w-full">
							<div class="flex items-center gap-2">
								<span class="font-semibold text-heading">{{ item.label }}</span>
								{% if item.isActive %}
									<span class="pins-style bg-emerald-500/20 text-emerald-400">
										Actif
									</span>
								{% else %}
									<span class="pins-style bg-red-500/20 text-red-400">
										Inactif
									</span>
								{% endif %}
							</div>

							<div class="text-sm text-body">
								{{ item.account.name }}
								·
								{{ item.frequency.label }}
							</div>

							<div class="text-sm text-body-subtle">
								{{ item.endDate ? "Du" : 'A partir du' }}
								<span class="text-white">
									{{ item.startDate ? item.startDate|date('d/m/Y') : 'Aucune' }}
								</span>
								{% if item.endDate %}
									au
									<span class="text-white">
										{{ item.endDate ? item.endDate|date('d/m/Y') : 'Aucune' }}
									</span>
								{% endif %}
							</div>

							<div class="text-sm text-body-subtle">
								Prochaine exécution :
								<span class="text-white">
									{{ item.nextExecution ? item.nextExecution|date('d/m/Y') : 'Aucune' }}
								</span>
							</div>
						</div>

						<div class="text-right">
							<div class="font-semibold text-white">
								{{ (item.amount / 100)|format_currency('EUR') }}
							</div>
							<div class="text-xs text-zinc-400">
								{{ item.type.label }}
							</div>
						</div>
					</div>

					<div class="flex items-center gap-3">
						<div class="relative flex items-center gap-2">
							{% if item.isArchived %}
								<form method="post" action="{{ path('recurring_transaction_activate', {id: item.id}) }}" onsubmit="return confirm('Désarchiver ?')">
									<button class="button-pins success-button-style">
										{{ ux_icon('solar:archive-up-broken', { class: 'w-5 h-5' }) }}
									</button>
								</form>
							{% else %}
								<form method="post" action="{{ path('recurring_transaction_toggle', {id: item.id}) }}">
									<button class="button-pins {{ item.isActive ? 'danger-button-style' : 'success-button-style' }}">
										{{ ux_icon('streamline-freehand:power-button', { class: 'w-5 h-5' }) }}
									</button>
								</form>

								<a href="{{ path('recurring_transaction_edit', {id: item.id}) }}" class="button-pins warning-button-style">
									{{ ux_icon('streamline-freehand:edit-pencil', { class: 'w-5 h-5' }) }}
								</a>

								<form method="post" action="{{ path('recurring_transaction_delete', {id: item.id}) }}" onsubmit="return confirm('Archiver ?')">
									<button class="button-pins danger-button-style">
										{{ ux_icon('solar:archive-broken', { class: 'w-5 h-5' }) }}
									</button>
								</form>

								<form method="post" action="{{ path('app_transaction_generate_recurring', {id: item.id}) }}">
									<input type="hidden" name="_token" value="{{ csrf_token('generate-recurring') }}">

									<button type="submit" class="button-style brand-button-style">
										{{ ux_icon('oui:generate', { class: 'w-5 h-5' }) }}
									</button>
								</form>
							{% endif %}
						</div>
					</div>
				</div>
			{% else %}
				<div class="text-center text-zinc-400 py-10">
					Aucune transaction périodique
				</div>
			{% endfor %}
		</div>
	</div>
{% endblock %}