{{ template "headers.html" . }}


<style>
	.border-2x {
	border-width: 2px;
	border-color: #000;
	}
	@media (max-width: 1023px) {
		body, main {
			background: #fff !important;
			text-align: center !important;
		}
		#desktop-playground {
			padding: 96px 0 64px !important;
		}
		#desktop-playground, .desktop-layout, .max-w-md {
			text-align: center !important;
			margin: 0 auto;
			width: 100%;
		}
	}
	@media (min-width: 1024px) {
		body, main {
			background: #f8f5f1 !important;
		}
		.desktop-sidebar {
			width: 50%;
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			overflow-y: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
		}
		.desktop-main {
			width: 50%;
			margin-left: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
		}
	}
	.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
	}
	.modal-content {
	background-color: #fff;
	margin: 10% auto;
	padding: 20px;
	border: 2px solid #000;
	width: 80%;
	max-width: 600px;
	}
	@media (min-width: 1024px) {
	.desktop-layout {
		display: flex;
		min-height: 100vh;
	}
	.desktop-sidebar {
		width: 50%;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		overflow-y: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.desktop-main {
		width: 50%;
		margin-left: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	}
</style>

<div class="min-h-screen flex flex-col bg-[#f8f5f1]">


<form id="MainForm" method="post" action="/save" onsubmit="return false">


<!-- Navbar fixe en haut -->
<nav id="topNav" class="fixed top-0 right-0 left-0 z-10 bg-white border-b-2 border-black shadow">
	<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
	<div class="flex justify-between items-center h-16">
		<button id="backBtn" class="text-black hover:text-gray-700">
		<i class="text-xl fas fa-arrow-left"></i>
		</button>
		<h2 id="stepTitle" class="text-lg font-semibold text-black">{{ "Étape" | t }}</h2>
		<div class="w-8"></div>
	</div>
	</div>
</nav>

<!-- Contenu principal -->
<div id="desktop-playground" class="flex-grow mt-16 mb-20">
	<div class="desktop-layout">
	<!-- Sidebar pour desktop -->
	<div class="flex p-8 text-black bg-white border-r-2 border-black desktop-sidebar">
		<div id="stepHeader" class="max-w-md">
		<h1 class="mb-4 text-3xl font-bold">{{ "Bienvenue dans l'outil de création de cartes de visite" | t }}</h1>
		<p class="mb-4 text-xl">{{ "Cet assistant vous guidera à travers le processus de création ou d'importation de vos cartes de visite." | t }}</p>
		<p class="text-lg">{{ "Suivez les étapes pour générer des cartes professionnelles rapidement et efficacement." | t }}</p>
		</div>
	</div>

	<!-- Contenu principal -->
	<div class="desktop-main">
		<div class="px-4 py-8 w-full max-w-md">
		
		<!-- Choix du gabarit -->
		<div id="templateChoice" class="space-y-6">
			<div class="mb-4">
			<input type="text" id="templateSearch" placeholder="Rechercher un gabarit" class="px-4 py-2 w-full rounded-md border-2 border-black">
			</div>
			<div id="templateList" class="grid grid-cols-1 gap-4 md:grid-cols-2">
			<!-- Les gabarits seront ajoutés ici dynamiquement -->
			</div>
		</div>

		<div id="methodChoice" class="hidden space-y-6">
			<button id="manualCreationBtn" class="flex flex-col items-center px-6 py-8 mb-4 w-full text-black bg-white rounded-lg border-2 border-black transition duration-300 hover:bg-gray-100">
			<i class="mb-4 fas fa-edit fa-4x"></i>
			<span class="text-xl font-semibold">{{ "Création Manuelle" | t }}</span>
			</button>
			<button id="importDataBtn" class="flex flex-col items-center px-6 py-8 w-full text-black bg-white rounded-lg border-2 border-black transition duration-300 hover:bg-gray-100">
			<i class="mb-4 fas fa-file-download fa-4x"></i>
			<span class="text-xl font-semibold">{{ "Import de Données" | t }}</span>
			</button>
		</div>

		<!-- Manual Creation Form -->
		<div id="manualCreationForm" class="hidden mt-8 space-y-6">
			<div>
			<label for="firstName" class="block text-sm font-medium text-black">{{ "Prénom" | t }}</label>
			<input type="text" id="firstName" name="firstName" class="block px-3 py-2 mt-1 w-full rounded-md border-2 border-black shadow-sm focus:outline-none focus:ring-black focus:border-black sm:text-sm">
			</div>
			<div>
			<label for="lastName" class="block text-sm font-medium text-black">{{ "Nom" | t }}</label>
			<input type="text" id="lastName" name="lastName" class="block px-3 py-2 mt-1 w-full rounded-md border-2 border-black shadow-sm focus:outline-none focus:ring-black focus:border-black sm:text-sm">
			</div>
			<div>
			<label for="email" class="block text-sm font-medium text-black">{{ "Email professionnel" | t }}</label>
			<input type="email" id="email" name="email" class="block px-3 py-2 mt-1 w-full rounded-md border-2 border-black shadow-sm focus:outline-none focus:ring-black focus:border-black sm:text-sm">
			</div>
			<div>
			<label for="phone" class="block text-sm font-medium text-black">{{ "Téléphone professionnel" | t }}</label>
			<input type="tel" id="phone" name="phone" class="block px-3 py-2 mt-1 w-full rounded-md border-2 border-black shadow-sm focus:outline-none focus:ring-black focus:border-black sm:text-sm">
			</div>
			<div>
			<label for="photoUpload" class="block text-sm font-medium text-black">{{ "Photo professionnelle" | t }}</label>
			<input type="file" id="photoUpload" name="photoUpload" accept="image/*" class="block mt-1 w-full text-sm text-black file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-2 file:border-black file:text-sm file:font-semibold file:bg-white file:text-black hover:file:bg-gray-100">
			</div>
			<input type="hidden" id="selectedTemplateId" name="selectedTemplateId">
		</div>

		<!-- Import Data Form -->
		<div id="importDataForm" class="hidden mt-8 space-y-6">
			<div id="importMethodChoice" class="space-y-4">
			<button id="importExcelCSVBtn" class="flex flex-col items-center px-6 py-8 w-full text-black bg-white rounded-lg border-2 border-black transition duration-300 hover:bg-gray-100">
				<i class="mb-4 fas fa-file-excel fa-4x"></i>
				<span class="text-xl font-semibold">{{ "Importer un fichier Excel/CSV" | t }}</span>
			</button>
			<button id="importVCFBtn" class="flex flex-col items-center px-6 py-8 w-full text-black bg-white rounded-lg border-2 border-black transition duration-300 hover:bg-gray-100">
				<i class="mb-4 fas fa-address-card fa-4x"></i>
				<span class="text-xl font-semibold">{{ "Importer des fichiers VCF" | t }}</span>
			</button>
			</div>
			
			<div id="vcfImport" class="hidden">
			<label for="vcfFiles" class="block text-sm font-medium text-black">{{ "Importer des fichiers VCF" | t }}</label>
			<input type="file" id="vcfFiles" name="vcfFiles" accept=".vcf" multiple class="block mt-1 w-full text-sm text-black file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-2 file:border-black file:text-sm file:font-semibold file:bg-white file:text-black hover:file:bg-gray-100">
			<div id="vcfPreview" class="grid grid-cols-3 gap-4 mt-4"></div>
			</div>
			
			<div id="excelCSVImport" class="hidden">
			<label for="excelCSVFile" class="block text-sm font-medium text-black">{{ "Importer un fichier Excel/CSV" | t }}</label>
			<input type="file" id="excelCSVFile" name="excelCSVFile" accept=".xlsx,.xls,.csv" class="block mt-1 w-full text-sm text-black file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-2 file:border-black file:text-sm file:font-semibold file:bg-white file:text-black hover:file:bg-gray-100">
			<div id="excelCSVPreview" class="overflow-x-auto p-4 mt-4 bg-white rounded-lg border-2 border-black"></div>
			</div>
		</div>

		<!-- Summary Step -->
		<div id="summaryStep" class="hidden mt-8 space-y-6" method="post">
			<h2 class="mb-4 text-2xl font-semibold text-black">{{ "Résumé de la sélection" | t }}</h2>
			<div id="summaryContent" class="p-4 bg-white rounded-lg border-2 border-black">
			<!-- Le contenu sera rempli dynamiquement -->
			</div>
			<input type="hidden" id="summarySelectedTemplateId" name="selectedTemplateId">
			<input type="hidden" id="summaryImportMethod" name="importMethod">
			<input type="hidden" id="summaryImportData" name="importData">
		</div>
		</div>
	</div>
	</div>
</div>

<!-- Navbar fixe en bas -->
<nav id="bottomNav" class="fixed right-0 bottom-0 left-0 z-10 bg-white border-t-2 border-black shadow-lg">
	<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
	<div class="flex justify-end items-center h-16">
		<button id="actionBtn" class="px-4 py-2 text-white bg-black rounded-md border-2 border-black transition duration-300 hover:bg-gray-800">{{ "Action" | t }}</button>
	</div>
	</div>
</nav>


</form>


<!-- Modal for photo editing -->
<div id="photoEditModal" class="modal">
	<div class="bg-white modal-content">
	<h2 class="mb-4 text-xl font-semibold text-black">{{ "Éditer la photo" | t }}</h2>
	<div id="cropperContainer" class="mb-4">
		<img id="cropperImage" src="" alt="Image à recadrer" style="max-width: 100%;">
	</div>
	<div class="flex mb-4 space-x-4">
		<button id="cropBtn" class="px-4 py-2 text-black bg-white rounded border-2 border-black hover:bg-gray-100">{{ "Recadrer" | t }}</button>
		<button id="filterBtn" class="px-4 py-2 text-black bg-white rounded border-2 border-black hover:bg-gray-100">{{ "Filtres" | t }}</button>
	</div>
	<div id="filterControls" class="hidden space-y-4">
		<div>
		<label for="brightness" class="block text-sm font-medium text-black">Luminosité</label>
		<input type="range" id="brightness" min="0" max="200" value="100" class="w-full">
		</div>
		<div>
		<label for="contrast" class="block text-sm font-medium text-black">Contraste</label>
		<input type="range" id="contrast" min="0" max="200" value="100" class="w-full">
		</div>
		<div>
		<label for="saturation" class="block text-sm font-medium text-black">Saturation</label>
		<input type="range" id="saturation" min="0" max="200" value="100" class="w-full">
		</div>
		<div>
		<label for="sepia" class="block text-sm font-medium text-black">Sépia</label>
		<input type="range" id="sepia" min="0" max="100" value="0" class="w-full">
		</div>
		<div>
		<label for="grayscale" class="block text-sm font-medium text-black">Niveaux de gris</label>
		<input type="range" id="grayscale" min="0" max="100" value="0" class="w-full">
		</div>
	</div>
	<div class="flex justify-between mt-4">
		<button id="cancelEditBtn" class="px-4 py-2 text-black bg-white rounded border-2 border-black hover:bg-gray-100">{{ "Annuler" | t }}</button>
		<button id="saveEditBtn" class="px-4 py-2 text-white bg-black rounded border-2 border-black hover:bg-gray-800">{{ "Enregistrer" | t }}</button>
	</div>
	</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
<script>
document.addEventListener('DOMContentLoaded', function() {
	const templateChoice = document.getElementById('templateChoice');
	const methodChoice = document.getElementById('methodChoice');
	const manualCreationForm = document.getElementById('manualCreationForm');
	const importDataForm = document.getElementById('importDataForm');
	const manualCreationBtn = document.getElementById('manualCreationBtn');
	const importDataBtn = document.getElementById('importDataBtn');
	const backBtn = document.getElementById('backBtn');
	const actionBtn = document.getElementById('actionBtn');
	const stepTitle = document.getElementById('stepTitle');
	const stepHeader = document.getElementById('stepHeader');
	const importMethodChoice = document.getElementById('importMethodChoice');
	const importVCFBtn = document.getElementById('importVCFBtn');
	const importExcelCSVBtn = document.getElementById('importExcelCSVBtn');
	const vcfImport = document.getElementById('vcfImport');
	const excelCSVImport = document.getElementById('excelCSVImport');
	const excelCSVFile = document.getElementById('excelCSVFile');
	const excelCSVPreview = document.getElementById('excelCSVPreview');
	const vcfFiles = document.getElementById('vcfFiles');
	const vcfPreview = document.getElementById('vcfPreview');
	const photoUpload = document.getElementById('photoUpload');
	const photoEditModal = document.getElementById('photoEditModal');
	const cropperImage = document.getElementById('cropperImage');
	const cropBtn = document.getElementById('cropBtn');
	const filterBtn = document.getElementById('filterBtn');
	const filterControls = document.getElementById('filterControls');
	const cancelEditBtn = document.getElementById('cancelEditBtn');
	const saveEditBtn = document.getElementById('saveEditBtn');
	const templateSearch = document.getElementById('templateSearch');
	const templateList = document.getElementById('templateList');
	const summaryStep = document.getElementById('summaryStep');

	let currentStep = 0;
	const steps = [
	{ 
		title: "Choix du gabarit", 
		element: templateChoice,
		header: `
		<h1 class="mb-4 text-3xl font-bold">Choisissez votre gabarit</h1>
		<p class="text-xl">Sélectionnez un gabarit pour votre carte de visite</p>
		`
	},
	{ 
		title: "Choix de la méthode", 
		element: methodChoice,
		header: `
		<h1 class="mb-4 text-3xl font-bold">Méthode de création</h1>
		<p class="text-xl">Choisissez entre création manuelle ou import de données</p>
		`
	},
	{ 
		title: "Création de carte", 
		element: manualCreationForm,
		header: `
		<h1 class="mb-4 text-3xl font-bold">Création Manuelle de Carte</h1>
		<p class="text-xl">Remplissez les informations pour créer votre carte</p>
		`
	},
	{ 
		title: "Import de données", 
		element: importDataForm,
		header: `
		<h1 class="mb-4 text-3xl font-bold">Import de Données</h1>
		<p class="text-xl">Importez vos données depuis un fichier Excel, CSV ou VCF</p>
		`
	},
	{ 
		title: "Résumé et validation", 
		element: summaryStep,
		header: `
		<h1 class="mb-4 text-3xl font-bold">Résumé et Validation</h1>
		<p class="text-xl">Vérifiez les informations avant la validation finale</p>
		`
	}
	];

	let importMethod = '';
	let importData = null;
	let cropper = null;
	let isCropping = false;
	let isFiltering = false;
	let selectedTemplateId = null;

	const templates = [
	{ id: 1, name: "Classic", logo: "classic-logo.png", link: "https://card.pm/templates/classic" },
	{ id: 2, name: "Modern", logo: "modern-logo.png", link: "https://card.pm/templates/modern" },
	{ id: 3, name: "Minimalist", logo: "minimalist-logo.png", link: "https://card.pm/templates/minimalist" },
	{ id: 4, name: "Bold", logo: "bold-logo.png", link: "https://card.pm/templates/bold" },
	{ id: 5, name: "Creative", logo: "creative-logo.png", link: "https://card.pm/templates/creative" },
	];

	function updateNavigation() {
	stepTitle.textContent = steps[currentStep].title;
	stepHeader.innerHTML = steps[currentStep].header;
	
	steps.forEach(step => {
		if (step.element) step.element.classList.add('hidden');
	});

	if (steps[currentStep].element) {
		steps[currentStep].element.classList.remove('hidden');
	}

	updateActionButton();

	if (currentStep === steps.length - 1) {
		updateSummary();
	}

	if (currentStep === 0) {
		resetImportForms();
	}
	}

	function updateActionButton() {
	actionBtn.classList.remove('hidden');
	
	if (currentStep === 2) { // Manual Creation
		actionBtn.textContent = 'Valider';
		actionBtn.onclick = () => {
			document.getElementById('MainForm').submit();
		};
	} else if (currentStep === 3 && (vcfFiles.files.length > 0 || excelCSVFile.files.length > 0)) { // Import with files selected
		actionBtn.textContent = 'Suivant';
		actionBtn.onclick = () => {
			currentStep++;
			updateNavigation();
		};
	} else if (currentStep === 4) { // Summary step
		actionBtn.textContent = 'Valider';
		actionBtn.onclick = () => {
			document.getElementById('summarySelectedTemplateId').value = selectedTemplateId;
			document.getElementById('summaryImportMethod').value = importMethod;
			document.getElementById('summaryImportData').value = JSON.stringify(importData);

			document.getElementById('MainForm').submit();
		};
	} else {
		actionBtn.classList.add('hidden');
	}
	}

	function updateSummary() {
	const summaryContent = document.getElementById('summaryContent');
	let summaryHTML = `
		<p class="font-semibold">Gabarit sélectionné : ${templates.find(t => t.id === selectedTemplateId)?.name || 'Non sélectionné'}</p>
	`;

	if (importMethod === 'manual') {
		summaryHTML += `
		<p class="mt-4 font-semibold">Méthode : Création Manuelle</p>
		<p>Une carte a été créée manuellement avec les informations suivantes :</p>
		<ul class="mt-2 list-disc list-inside">
			<li>Prénom : ${document.getElementById('firstName').value || 'Non renseigné'}</li>
			<li>Nom : ${document.getElementById('lastName').value || 'Non renseigné'}</li>
			<li>Email : ${document.getElementById('email').value || 'Non renseigné'}</li>
			<li>Téléphone : ${document.getElementById('phone').value || 'Non renseigné'}</li>
			<li>Photo : ${document.getElementById('photoUpload').files.length > 0 ? 'Ajoutée' : 'Non ajoutée'}</li>
		</ul>
		`;
	} else if (importMethod === 'excel') {
		summaryHTML += `
		<p class="mt-4 font-semibold">Méthode : Import Excel/CSV</p>
		<p>Nombre de lignes importées : ${importData ? importData.length : 'Aucune'}</p>
		`;
	} else if (importMethod === 'vcf') {
		summaryHTML += `
		<p class="mt-4 font-semibold">Méthode : Import VCF</p>
		<p>Nombre de fichiers VCF importés : ${importData ? importData : 'Aucun'}</p>
		`;
	}

	summaryContent.innerHTML = summaryHTML;
	}

	function resetImportForms() {
	importMethodChoice.classList.remove('hidden');
	vcfImport.classList.add('hidden');
	excelCSVImport.classList.add('hidden');
	vcfFiles.value = '';
	excelCSVFile.value = '';
	vcfPreview.innerHTML = '';
	excelCSVPreview.innerHTML = '';
	}

	function renderTemplates(templatesArray) {
	templateList.innerHTML = '';
	templatesArray.forEach(template => {
		const templateCard = document.createElement('div');
		templateCard.className = 'bg-white p-4 rounded-lg shadow border-2 border-black cursor-pointer hover:bg-gray-100 transition duration-300';
		templateCard.innerHTML = `
		<img src="${template.logo}" alt="${template.name} logo" class="mx-auto mb-2 w-16 h-16">
		<h3 class="font-semibold text-center">${template.name}</h3>
		<p class="text-sm text-center text-blue-600 underline">${template.link}</p>
		`;
		templateCard.addEventListener('click', () => {
		selectedTemplateId = template.id;
		currentStep++;
		updateNavigation();
		});
		templateList.appendChild(templateCard);
	});
	}

	backBtn.addEventListener('click', () => {
	if (currentStep==0) {
		self.location.href = "/create";
	}
	if (currentStep > 1) {
		currentStep = 1;
	} else {
		currentStep = 0;
	}
	updateNavigation();
	});

	manualCreationBtn.addEventListener('click', () => {
	importMethod = 'manual';
	currentStep = 2;
	updateNavigation();
	});

	importDataBtn.addEventListener('click', () => {
	currentStep = 3;
	resetImportForms();
	updateNavigation();
	});

	importVCFBtn.addEventListener('click', () => {
	importMethodChoice.classList.add('hidden');
	vcfImport.classList.remove('hidden');
	});

	importExcelCSVBtn.addEventListener('click', () => {
	importMethodChoice.classList.add('hidden');
	excelCSVImport.classList.remove('hidden');
	});

	photoUpload.addEventListener('change', (e) => {
	const file = e.target.files[0];
	if (file) {
		const reader = new FileReader();
		reader.onload = (e) => {
		cropperImage.src = e.target.result;
		photoEditModal.style.display = 'block';
		if (cropper) {
			cropper.destroy();
		}
		/*
		cropper = new Cropper(cropperImage, {
			aspectRatio: 1,
			viewMode: 1,
		});
		*/
		};
		reader.readAsDataURL(file);
	}
	});

	cropBtn.addEventListener('click', () => {
	if (!isCropping) {
		isCropping = true;
		cropBtn.textContent = '{{ "Valider" | t }}';
		if (cropper) {
			cropper.destroy();
		}
		cropper = new Cropper(cropperImage, {
			aspectRatio: 1,
			viewMode: 1,
		});
		cropper.setDragMode('crop'); 
	} else {
		isCropping = false;
		cropBtn.textContent = '{{ "Recadrer" | t }}';
		
		if (cropper) {
			const croppedCanvas = cropper.getCroppedCanvas();
			cropperImage.src = croppedCanvas.toDataURL('image/jpeg');
			// cropper.destroy();
		}
	}
	});

	filterBtn.addEventListener('click', () => {
	if (!isFiltering) {
		isFiltering = true;
		filterBtn.textContent = '{{ "Valider" | t }}';
		filterControls.classList.remove('hidden');
	} else {
		isFiltering = false;
		filterBtn.textContent = '{{ "Filtres" | t }}';
		filterControls.classList.add('hidden');
		applyFilters();
	}
	});

	function applyFilters() {
	const brightness = document.getElementById('brightness').value;
	const contrast = document.getElementById('contrast').value;
	const saturation = document.getElementById('saturation').value;
	const sepia = document.getElementById('sepia').value;
	const grayscale = document.getElementById('grayscale').value;

	cropperImage.style.filter = `
		brightness(${brightness}%)
		contrast(${contrast}%)
		saturate(${saturation}%)
		sepia(${sepia}%)
		grayscale(${grayscale}%)
	`;
	}

	document.querySelectorAll('#filterControls input[type="range"]').forEach(input => {
	input.addEventListener('input', applyFilters);
	});

	cancelEditBtn.addEventListener('click', () => {
	photoEditModal.style.display = 'none';
	if (cropper) {
		cropper.destroy();
		cropper = null;
	}
	});

	saveEditBtn.addEventListener('click', () => {
	if (cropper) {
		const canvas = cropper.getCroppedCanvas();
		canvas.toBlob((blob) => {
		const file = new File([blob], "edited_photo.jpg", { type: "image/jpeg" });
		const dataTransfer = new DataTransfer();
		dataTransfer.items.add(file);
		photoUpload.files = dataTransfer.files;
		}, 'image/jpeg');
	}
	photoEditModal.style.display = 'none';
	});

	excelCSVFile.addEventListener('change', (e) => {
	const file = e.target.files[0];
	const reader = new FileReader();

	reader.onload = (e) => {
		const data = new Uint8Array(e.target.result);
		const workbook = XLSX.read(data, {type: 'array'});
		const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
		importData = XLSX.utils.sheet_to_json(firstSheet, {header: 1});
		importMethod = 'excel';

		let preview = '<table class="min-w-full divide-y divide-gray-200"><thead><tr>';
		importData[0].forEach(header => {
		preview += `<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-black uppercase bg-white">${header}</th>`;
		});
		preview += '</tr></thead><tbody>';
		importData.slice(1, 6).forEach((row, index) => {
		preview += `<tr class="${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}">`;
		row.forEach(cell => {
			preview += `<td class="px-6 py-4 text-sm text-black whitespace-nowrap">${cell}</td>`;
		});
		preview += '</tr>';
		});
		preview += '</tbody></table>';
		excelCSVPreview.innerHTML = preview;
		updateActionButton();
	};

	reader.readAsArrayBuffer(file);
	});

	vcfFiles.addEventListener('change', (e) => {
	const files = e.target.files;
	importData = files.length;
	importMethod = 'vcf';
	vcfPreview.innerHTML = `
		<p class="text-lg font-semibold">${files.length} fichier(s) VCF sélectionné(s)</p>
		<ul class="mt-2 list-disc list-inside">
		${Array.from(files).map(file => `<li>${file.name}</li>`).join('')}
		</ul>
	`;
	updateActionButton();
	});

	templateSearch.addEventListener('input', (e) => {
	const searchTerm = e.target.value.toLowerCase();
	const filteredTemplates = templates.filter(template => 
		template.name.toLowerCase().includes(searchTerm)
	);
	renderTemplates(filteredTemplates);
	});

	// Initial setup
	renderTemplates(templates);
	updateNavigation();
});
</script>
</div>



{{ template "footer.html" . }}