{{ template "headersMenu.html" . }}

<style>
	body {
	padding-top: 60px;
	}
	.navtools {
		position: fixed;
		bottom: 70px;
		left: 0;
		right: 0;
		text-align: center;
		z-index: 3020454487;
		padding: 10px 30px;
	}
	.modal {
	transition: transform 0.3s ease-out;
	z-index: 301;
	}
	.modal.hidden {
	transform: translateX(100%);
	}
	.navbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	
	box-shadow: 0 2px 0 #000000;
	}
	.contact-card {
	border: 1px solid #9999;
	
	}
	.contact-content {
		position: fixed;
		z-index: 30000;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 79px 24px 32px !important;
	}
	.contact-header {
	border-bottom: 1px solid #9999;
	}
	.btn {
	border: 1px solid #9999;
	
	
	transition: all 0.3s ease;
	}
	.btn:hover {
	
	
	}
	input, textarea, select {
	border: 1px solid #9999;
	
	}
	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;
	
	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 {
	
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	}
	.dropdown-content a:hover {
	
	}
	.dropdown:hover .dropdown-content {
	display: block;
	}
	@media (max-width: 640px) {
	.btn-text {
		display: none;
	}
	.modal {
		width: 100% !important;
	}
	}

	@media (min-width:768px) {
		.contact-content,
		.activity-modal,
		.navtools {
			left: 50%;
			border-left: 2px solid #000000;
		}
	}

</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" placeholder="Rechercher un contact" class="flex-grow px-3 py-2 mx-4 border-2 border-black rounded-xs focus:outline-none">
		<button id="all-activities" class="px-4 py-2 mr-2 rounded-xs btn">
		<i class="fa fa-list-ul"></i>
		<span class="ml-2 btn-text">{{ "Activités" | t }}</span>
		</button>
		<div class="dropdown">
		<button id="download-btn" class="px-4 py-2 rounded-xs btn">
			<i class="fa fa-download"></i>
			<span class="ml-2 btn-text">{{ "Télécharger" | t }}</span>
		</button>
		<div class="dropdown-content">
			<a href="#" id="download-json">{{ "JSON" | t }}</a>
			<a href="#" id="download-excel">{{ "Excel" | t }}</a>
		</div>
		</div>
	</div>
	</nav>

	<div class="container py-8">
	<div id="contacts-container" class="space-y-4"></div>
	<div class="flex justify-between mt-6">
		<button id="add-contact" class="px-4 py-2 rounded-xs btn">
		<i class="mx-1 fa fa-user-plus"></i>
		{{ "Ajouter" | t }} <span class="btn-text">{{ "un nouveau contact" | t }}</span>
		</button>
		<div>
		<input type="file" id="vcf-import" accept=".vcf" class="hidden">
		<label for="vcf-import" class="inline-block px-4 py-2 cursor-pointer rounded-xs btn">
			<i class="mx-1 fa fa-file-import"></i>
			{{ "Importer" | t }} <span class="btn-text">{{ "un fichier VCF" | t }}</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 class="absolute top-2 right-2 p-4 text-2xl close-modal">
		<i class="fa fa-times"></i>
		</button>
		<h2 class="mb-4 text-2xl font-semibold">{{ "Suivi d'activité" | t }}</h2>
		<div id="activity-list" class="space-y-4"></div>
	</div>
</div>

{{ template "footer.html" . }}