{{ define "qonto-invoices.partial.html" }}
<section id="qonto-invoice-app" class="mb-10 overflow-hidden bg-white rounded-xl shadow dark:bg-gray-800" aria-labelledby="qi-title">
	<header class="flex flex-col gap-4 p-6 border-b dark:border-gray-700 lg:flex-row lg:items-end lg:justify-between">
		<div><h2 id="qi-title" class="text-2xl font-black">Factures Datamix → Qonto</h2><p class="mt-1 text-sm text-gray-500">MySQL reste la source métier. Qonto fabrique et suit le document fiscal.</p></div>
		<div class="flex flex-col gap-2 sm:flex-row">
			<select id="qi-year" class="px-4 py-3 text-lg font-black rounded-lg border-2 border-black dark:bg-gray-900 dark:border-white"></select>
			<input id="qi-search" type="search" placeholder="Client, email, numéro…" class="px-3 py-2 rounded-md border dark:bg-gray-900">
			<button id="qi-new" type="button" class="px-4 py-2 font-bold text-white bg-indigo-600 rounded-md"><i class="mr-2 fa fa-plus"></i>Créer</button>
		</div>
	</header>

	<div id="qi-error" class="hidden p-4 font-bold text-red-800 bg-red-100" role="alert"></div>
	<div id="qi-loader" class="p-10 text-center"><i class="mr-2 fa fa-spinner fa-spin"></i>Chargement des factures…</div>
	<div id="qi-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">Numéro</th><th class="px-4 py-3">Client</th><th class="px-4 py-3">Date</th>
				<th class="px-4 py-3">Interne</th><th class="px-4 py-3">Qonto</th><th class="px-4 py-3 text-right">Total</th><th class="px-4 py-3 text-right">Action</th>
			</tr></thead>
			<tbody id="qi-list" class="divide-y dark:divide-gray-700"></tbody>
		</table>
	</div>
	<div id="qi-empty" class="hidden p-10 text-center text-gray-500">Aucune facture.</div>
	<footer class="flex items-center justify-between p-4 border-t dark:border-gray-700">
		<button id="qi-prev" type="button" class="px-4 py-2 rounded-md border disabled:opacity-30">Précédent</button>
		<span id="qi-page" class="font-bold">Page 1</span>
		<button id="qi-next" type="button" class="px-4 py-2 rounded-md border disabled:opacity-30">Suivant</button>
	</footer>
</section>

<dialog id="qi-dialog" class="p-0 w-full max-w-7xl bg-white rounded-xl shadow-2xl backdrop:bg-black/70 dark:text-white dark:bg-gray-800">
	<form id="qi-form">
		<header class="flex items-center justify-between p-5 border-b dark:border-gray-700">
			<div><h2 id="qi-dialog-title" class="text-xl font-black">Facture</h2><p id="qi-dialog-status" class="text-sm text-gray-500">Interne</p></div>
			<button id="qi-close" type="button" class="w-10 h-10 rounded-full border" aria-label="Fermer"><i class="fa fa-xmark"></i></button>
		</header>

		<div class="grid grid-cols-1 lg:grid-cols-2">
			<section class="p-5 lg:border-r dark:border-gray-700">
				<h3 class="mb-4 font-black uppercase">Facture interne</h3>
				<input id="qi-id" type="hidden">
				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
					<label><span class="block mb-1 text-sm font-medium">Client</span><input id="qi-client" required class="w-full px-3 py-2 rounded-md border dark:bg-gray-900"></label>
					<label><span class="block mb-1 text-sm font-medium">Email</span><input id="qi-email" type="email" class="w-full px-3 py-2 rounded-md border dark:bg-gray-900"></label>
					<label><span class="block mb-1 text-sm font-medium">Numéro</span><input id="qi-number" required maxlength="40" class="w-full px-3 py-2 rounded-md border dark:bg-gray-900"></label>
					<label><span class="block mb-1 text-sm font-medium">Statut interne</span><select id="qi-status" class="w-full px-3 py-2 rounded-md border dark:bg-gray-900"><option value="draft">Brouillon</option><option value="unpaid">À payer</option><option value="paid">Payée</option><option value="canceled">Annulée</option></select></label>
					<label><span class="block mb-1 text-sm font-medium">Créée le</span><input id="qi-date" type="date" required class="w-full px-3 py-2 rounded-md border dark:bg-gray-900"></label>
					<label><span class="block mb-1 text-sm font-medium">Échéance</span><input id="qi-due" type="date" required class="w-full px-3 py-2 rounded-md border dark:bg-gray-900"></label>
					<label><span class="block mb-1 text-sm font-medium">Livrée le</span><input id="qi-delivered" type="date" class="w-full px-3 py-2 rounded-md border dark:bg-gray-900"></label>
					<label><span class="block mb-1 text-sm font-medium">Payée le</span><input id="qi-paid" type="date" class="w-full px-3 py-2 rounded-md border dark:bg-gray-900"></label>
				</div>
				<label class="block mt-4"><span class="block mb-1 text-sm font-medium">Description</span><textarea id="qi-description" rows="3" class="w-full px-3 py-2 rounded-md border dark:bg-gray-900"></textarea></label>
				<label class="block mt-4"><span class="block mb-1 text-sm font-medium">Notes internes</span><textarea id="qi-notes" rows="3" class="w-full px-3 py-2 rounded-md border dark:bg-gray-900"></textarea></label>

				<div class="flex items-center justify-between mt-6 mb-3"><h4 class="font-black">Prestations</h4><button id="qi-add-line" type="button" class="px-3 py-2 rounded-md border"><i class="mr-1 fa fa-plus"></i>Ligne</button></div>
				<div id="qi-lines" class="space-y-3"></div>
				<div class="grid grid-cols-3 gap-3 mt-4 p-4 bg-gray-50 rounded-lg dark:bg-gray-900">
					<div><span class="block text-xs uppercase text-gray-500">HT</span><strong id="qi-total-ht">0,00 €</strong></div>
					<div><span class="block text-xs uppercase text-gray-500">TVA</span><strong id="qi-total-vat">0,00 €</strong></div>
					<div><span class="block text-xs uppercase text-gray-500">TTC</span><strong id="qi-total-ttc">0,00 €</strong></div>
				</div>
			</section>

			<section class="p-5 bg-gray-50 dark:bg-gray-900">
				<h3 class="mb-4 font-black uppercase">Document Qonto</h3>
				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
					<label class="md:col-span-2"><span class="block mb-1 text-sm font-medium">Client Qonto</span><select id="qi-qonto-client" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800"></select></label>
					<label class="md:col-span-2"><span class="block mb-1 text-sm font-medium">Compte d’encaissement</span><select id="qi-account" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800"></select></label>
					<label><span class="block mb-1 text-sm font-medium">TVA</span><select id="qi-vat" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800"><option value="0.20">20 %</option><option value="0.10">10 %</option><option value="0.055">5,5 %</option><option value="0">0 %</option></select></label>
					<label><span class="block mb-1 text-sm font-medium">Commande</span><input id="qi-purchase-order" maxlength="40" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800"></label>
				</div>
				<label class="block mt-4"><span class="block mb-1 text-sm font-medium">En-tête</span><textarea id="qi-header" rows="3" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800"></textarea></label>
				<label class="block mt-4"><span class="block mb-1 text-sm font-medium">Pied</span><textarea id="qi-footer" rows="3" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800"></textarea></label>
				<label class="block mt-4"><span class="block mb-1 text-sm font-medium">Conditions</span><textarea id="qi-terms" rows="4" maxlength="525" class="w-full px-3 py-2 rounded-md border dark:bg-gray-800"></textarea></label>

				<div class="mt-6 p-4 bg-white rounded-lg border dark:bg-gray-800 dark:border-gray-700">
					<div class="flex items-center justify-between"><span class="font-black">État Qonto</span><strong id="qi-qonto-status">Non synchronisée</strong></div>
					<p id="qi-qonto-id" class="mt-2 text-xs break-all text-gray-500"></p>
				</div>
			</section>
		</div>

		<footer class="flex flex-wrap items-center justify-between gap-3 p-5 border-t dark:border-gray-700">
			<div class="flex flex-wrap gap-2">
				<button id="qi-document" type="button" class="hidden px-4 py-2 rounded-md border"><i class="mr-2 fa fa-file-pdf"></i>Document</button>
				<button id="qi-send" type="button" class="hidden px-4 py-2 rounded-md border"><i class="mr-2 fa fa-paper-plane"></i>Envoyer</button>
				<button id="qi-mark-paid" type="button" class="hidden px-4 py-2 rounded-md border">Marquer payée</button>
				<button id="qi-unmark-paid" type="button" class="hidden px-4 py-2 rounded-md border">Remettre impayée</button>
			</div>
			<div class="flex flex-wrap gap-2">
				<button id="qi-sync" type="button" class="px-4 py-2 font-bold rounded-md border-2 border-black dark:border-white">Synchroniser Qonto</button>
				<button id="qi-finalize" type="button" class="hidden px-4 py-2 font-bold text-white bg-black rounded-md dark:text-black dark:bg-white">Finaliser</button>
				<button id="qi-save" type="submit" class="px-4 py-2 font-bold text-white bg-indigo-600 rounded-md">Enregistrer</button>
			</div>
		</footer>
	</form>
</dialog>
{{ end }}