{{ define "qonto-banking.partial.html" }}
<section id="qonto-bank-app" class="mb-10 overflow-hidden bg-white rounded-xl shadow dark:bg-gray-800" aria-labelledby="qonto-bank-title">
	<header class="p-6 border-b border-gray-200 dark:border-gray-700">
		<div class="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
			<div>
				<h2 id="qonto-bank-title" class="text-2xl font-black">Banque Qonto</h2>
				<p id="qb-summary" class="mt-1 text-sm text-gray-500 dark:text-gray-400">Chargement de l’organisation…</p>
			</div>

			<div class="grid grid-cols-1 gap-4 lg:grid-cols-[auto_minmax(280px,1fr)] lg:min-w-[760px]">
				<div>
					<span class="block mb-1 text-xs font-black uppercase text-gray-500">
						Année
					</span>
			
					<input
						id="qb-year"
						type="hidden"
					>
			
					<nav
						id="qb-years"
						class="flex flex-wrap gap-1"
						aria-label="Sélection de l’année"
					></nav>
				</div>
			
				<label class="block">
					<span class="block mb-1 text-xs font-black uppercase text-gray-500">
						Compte
					</span>
			
					<select
						id="qb-account"
						class="w-full px-4 py-3 bg-white rounded-lg border border-gray-300 dark:bg-gray-900 dark:border-gray-600"
					>
						<option value="">Tous les comptes</option>
					</select>
				</label>
			</div>
		</div>
	</header>

	<div id="qb-error" class="hidden p-4 font-bold text-red-800 bg-red-100 border-b border-red-200" role="alert"></div>

	<div class="grid grid-cols-1 gap-6 p-6 lg:grid-cols-[minmax(0,1fr)_300px]">
		<div class="order-2 min-w-0 lg:order-1">
			<div class="h-[320px] md:h-[380px]">
				<canvas id="qb-chart" aria-label="Plus bas et plus haut solde mensuel"></canvas>
			</div>
		</div>

		<aside class="order-1 flex flex-col justify-center p-6 text-white bg-black rounded-xl lg:order-2 dark:text-black dark:bg-white">
			<span class="text-xs font-black uppercase opacity-60">Solde total</span>
			<strong id="qb-total-balance" class="mt-2 text-4xl font-black tracking-tight md:text-5xl">—</strong>
			<span class="mt-3 text-sm opacity-70">Tous comptes confondus, solde courant</span>
		</aside>
	</div>

	<div class="flex flex-col gap-3 px-6 pb-6 md:flex-row md:items-center md:justify-between">
		<div class="flex flex-1 gap-2">
			<input id="qb-search" type="search" placeholder="Filtre local : libellé, référence, montant…" class="w-full px-3 py-2 rounded-md border border-gray-300 dark:bg-gray-900 dark:border-gray-600">
			<button id="qb-refresh" type="button" class="px-4 py-2 font-bold rounded-md border-2 border-black dark:border-white">
				<i class="mr-2 fa fa-rotate"></i>Actualiser
			</button>
		</div>
		<button id="qb-advanced-toggle" type="button" class="px-4 py-2 font-bold rounded-md border border-gray-300">
			<i class="mr-2 fa fa-sliders"></i>Recherche avancée
		</button>
	</div>

	<form id="qb-advanced" class="hidden grid grid-cols-1 gap-4 p-6 bg-gray-50 border-y border-gray-200 dark:bg-gray-900 dark:border-gray-700 md:grid-cols-2 xl:grid-cols-5">
		<label>
			<span class="block mb-1 text-sm font-medium">Du</span>
			<input id="qb-from" type="date" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800">
		</label>
		<label>
			<span class="block mb-1 text-sm font-medium">Au</span>
			<input id="qb-to" type="date" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800">
		</label>
		<label>
			<span class="block mb-1 text-sm font-medium">Sens</span>
			<select id="qb-side" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800">
				<option value="">Tous</option><option value="credit">Entrées</option><option value="debit">Sorties</option>
			</select>
		</label>
		<label>
			<span class="block mb-1 text-sm font-medium">Statut</span>
			<select id="qb-status" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800">
				<option value="completed">Terminées</option><option value="pending">En attente</option><option value="declined">Refusées</option><option value="">Tous</option>
			</select>
		</label>
		<label>
			<span class="block mb-1 text-sm font-medium">Pièce jointe</span>
			<select id="qb-with-attachments" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800">
				<option value="">Toutes</option><option value="true">Avec PJ</option><option value="false">Sans PJ</option>
			</select>
		</label>
		<div class="flex gap-2 md:col-span-2 xl:col-span-5">
			<button type="submit" class="px-4 py-2 font-bold text-white bg-indigo-600 rounded-md">Appliquer sans filtre annuel</button>
			<button id="qb-advanced-reset" type="button" class="px-4 py-2 font-bold rounded-md border">Revenir à l’année</button>
		</div>
	</form>

	<div id="qb-loader" class="p-12 text-center"><i class="mr-2 fa fa-spinner fa-spin"></i>Chargement du flux…</div>

	<div id="qb-table-wrap" class="hidden overflow-x-auto">
		<table class="min-w-full text-sm">
			<thead class="text-left bg-gray-100 dark:bg-gray-900">
				<tr>
					<th class="px-4 py-3">Date</th><th class="px-4 py-3">Opération</th><th class="px-4 py-3">Compte</th>
					<th class="px-4 py-3 text-center">PJ</th><th class="px-4 py-3 text-right">Montant</th><th class="px-4 py-3 text-right">Action</th>
				</tr>
			</thead>
			<tbody id="qb-transactions" class="divide-y divide-gray-200 dark:divide-gray-700"></tbody>
		</table>
	</div>
	<div id="qb-empty" class="hidden p-12 text-center text-gray-500">Aucune opération.</div>

	<footer class="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700">
		<button id="qb-prev" type="button" class="px-4 py-2 rounded-md border disabled:opacity-30">Précédent</button>
		<span id="qb-page" class="font-bold">Page 1</span>
		<button id="qb-next" type="button" class="px-4 py-2 rounded-md border disabled:opacity-30">Suivant</button>
	</footer>
</section>

<dialog id="qb-dialog" class="p-0 w-full max-w-3xl bg-white rounded-xl shadow-2xl backdrop:bg-black/70 dark:text-white dark:bg-gray-800">
	<header class="flex items-center justify-between p-5 border-b dark:border-gray-700">
		<div><h2 id="qb-dialog-title" class="text-xl font-black">Opération</h2><p id="qb-dialog-subtitle" class="text-sm text-gray-500"></p></div>
		<button id="qb-dialog-close" type="button" class="w-10 h-10 rounded-full border" aria-label="Fermer"><i class="fa fa-xmark"></i></button>
	</header>
	<div class="p-5">
		<dl id="qb-details" class="grid grid-cols-1 gap-3 mb-6 md:grid-cols-2"></dl>
		<section>
			<div class="flex items-center justify-between mb-3"><h3 class="font-black">Pièces justificatives</h3><span id="qb-upload-status" class="text-sm text-gray-500"></span></div>
			<ul id="qb-attachments" class="mb-4 space-y-2"></ul>
			<form id="qb-upload-form" enctype="multipart/form-data" class="p-4 bg-gray-50 rounded-lg border border-dashed border-gray-400 dark:bg-gray-900">
				<input id="qb-file" name="file" type="file" accept=".pdf,.png,.jpg,.jpeg,application/pdf,image/png,image/jpeg" required class="block mb-3 w-full">
				<button id="qb-upload" type="submit" class="px-4 py-2 font-bold text-white bg-indigo-600 rounded-md"><i class="mr-2 fa fa-paperclip"></i>Ajouter la pièce</button>
			</form>
			<p class="mt-2 text-xs text-gray-500">PDF, PNG ou JPEG — 10 Mio maximum.</p>
		</section>
	</div>
</dialog>
{{ end }}