{{ template "headersMenu.html" . }}

<style>
	body {
	padding-top: 60px;
	background-color: #FFFDF5; /* Crème background */
	}
	.modal {
	transition: transform 0.3s ease-out;
	z-index: 1001;
	}
	.modal.hidden {
	transform: translateX(100%);
	}
	.navbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: white;
	box-shadow: 0 2px 0 #000000;
	}
	.contact-card {
	border: 2px solid #000000;
	background-color: white;
	}
	.contact-header {
	border-bottom: 2px solid #000000;
	}
	.btn {
	border: 2px solid #000000;
	background-color: white;
	color: #000000;
	transition: all 0.3s ease;
	}
	.btn:hover {
	background-color: #000000;
	color: white;
	}
	input, textarea, select {
	border: 2px solid #000000;
	background-color: white;
	}
	input:focus, textarea:focus, select:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
	}
	.dropdown {
	position: relative;
	display: inline-block;
	}
	.dropdown-content {
	display: none;
	position: absolute;
	background-color: white;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	border: 2px solid #000000;
	right: 0;
	}
	.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	}
	.dropdown-content a:hover {
	background-color: #f1f1f1;
	}
	.dropdown:hover .dropdown-content {
	display: block;
	}
	@media (max-width: 640px) {
	.btn-text {
		display: none;
	}
	.modal {
		width: 100% !important;
	}
	}
</style>

<nav class="navbar">
	<div class="container flex justify-between items-center px-4 py-3 mx-auto" style="border-top:2px solid #000">
		<input type="text" id="search-input" value="" placeholder="Rechercher un contact" class="flex-grow px-3 py-2 mx-4 rounded-none border-2 border-black focus:outline-none">
		<button id="all-activities" class="px-4 py-2 mr-2 rounded-none btn">
		<i class="fa fa-list-ul"></i>
		<span class="ml-2 btn-text">Activités</span>
		</button>
		<div class="dropdown">
		<button id="download-btn" class="px-4 py-2 rounded-none btn">
			<i class="fa fa-download"></i>
			<span class="ml-2 btn-text">Télécharger</span>
		</button>
		<div class="dropdown-content">
			<a href="#" id="download-json">JSON</a>
			<a href="#" id="download-excel">Excel</a>
		</div>
		</div>
	</div>
	</nav>

	<div class="container px-4 py-8 mx-auto max-w-2xl">
	<h1 class="mb-6 text-3xl font-semibold text-center text-black">Gestionnaire de contacts</h1>
	<div id="contacts-container" class="hidden space-y-4"></div>
	<div class="mt-6 space-y-4 text-center">
		<button id="add-contact" class="px-4 py-2 rounded-none btn">
		<i class="fa fa-user-plus"></i>
		<span class="ml-2 btn-text">Ajouter un nouveau contact</span>
		</button>
		<div>
		<input type="file" id="vcf-import" accept=".vcf" class="hidden">
		<label for="vcf-import" class="inline-block px-4 py-2 rounded-none cursor-pointer btn">
			<i class="fa fa-file-import"></i>
			<span class="ml-2 btn-text">Importer un fichier VCF</span>
		</label>
		</div>
	</div>
	</div>

	<div id="activity-modal" class="hidden overflow-y-auto fixed top-0 right-0 w-1/2 h-full bg-white border-l-2 border-black modal">
	<div class="p-6">
		<button id="close-modal" class="absolute top-4 right-4 text-2xl">
		<i class="fa fa-times"></i>
		</button>
		<h2 class="mb-4 text-2xl font-semibold">Suivi d'activité</h2>
		<div id="activity-list" class="space-y-4"></div>
	</div>
</div>

{{ template "footer.html" . }}