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

{% block title %}Mes comptes
{% endblock %}

{% block body %}
	<div class="p-4 max-w-5xl mx-auto">
		<div class="flex justify-between items-center mb-6">
			<h1 class="text-2xl font-bold">
				Mes comptes
				{{ type == 'archived' ? ' - Archives' }}
			</h1>

			<div class="flex gap-2">
				{% if type == 'archived' %}
					<a href="{{ path('app_account_index') }}" class="button-style success-button-style">
						Actifs
					</a>
				{% else %}
					<a href="{{ path('app_account_index_archived') }}" class="button-style warning-button-style">
						Clôturés
					</a>
				{% endif %}
				<a href="{{ path('app_account_new') }}" class="button-style brand-button-style">
					Nouveau compte
				</a>
			</div>
		</div>

		<div class="grid gap-4">
			{% for type, data in accounts %}
				<div class="mb-4">
					<h2 class="text-xl font-bold mb-2">{{ data.type.label }}</h2>

					<div class="space-y-4">
						{% for account in data.accounts %}
							<div class="p-4 rounded-xl shadow flex justify-between items-center" style="border-left: 6px solid {{ account.color ?? account.type.color }}; background-color: {{ account.color ?? account.type.color }}50">
								<div>
									<div class="font-semibold text-lg">
										<a href="{{ path('app_account_show', {id: account.id}) }}">
											{{ account.name }}
										</a>
										<span class="text-sm text-red-800">
											{{ account.isActive ? '' : ' - Compte clos' }}
										</span>
									</div>

									<div class="flex items-center gap-2 text-sm text-gray-500">
										{% if account.type.icon %}
											{{ ux_icon(account.type.icon, {'class': 'w-4 h-4'}) }}
										{% endif %}
										{{ account.type.label }}
										{% if account.subtype %}
											•
											{{ account.subtype.label }}
										{% endif %}
									</div>
								</div>

								<div class="text-right">
									<div class="text-lg font-bold {{ account.balance < 0 ? 'text-red-600' : 'text-emerald-600' }}">
										{{ (account.balance / 100)|format_currency('EUR') }}
									</div>
								</div>
							</div>
						{% else %}
							<div class="rounded border border-gray-200 bg-white shadow-sm overflow-hidden px-4 py-2 text-center">
								Aucun compte défini.
							</div>
						{% endfor %}
					</div>
				</div>
			{% endfor %}
		</div>
	</div>
{% endblock %}