{{ template "headersMenu.html" . }}

<section class="py-44 bg-gray-100">
    <div class="container">
        <!-- Top Metrics -->
		<div class="flex justify-between items-center mb-6">
			<div class="text-3xl font-bold text-gray-800">3020/ <span class="text-gray-500">2453 Unique</span></div>
			<div class="flex space-x-2">
				<button class="px-4 py-2 text-gray-600 bg-white rounded shadow">Options</button>
			</div>
		</div>
		<div id="StatsView" class="p-6">

			<!-- Filters -->
			<div class="flex justify-between items-center mb-6">
				<div class="flex space-x-2">
					<div class="px-4 py-2 bg-white rounded shadow">
						<select class="bg-transparent focus:outline-none">
							<option>Jan 20 - Feb 12</option>
						</select>
					</div>
					<div class="px-4 py-2 bg-white rounded shadow">
						<select class="bg-transparent focus:outline-none">
							<option>{{ "Janvier" | t }}</option>
							<option>{{ "Février" | t }}</option>
							<option>{{ "Mars" | t }}</option>
							<option>{{ "Avril" | t }}</option>
							<option>{{ "Mai" | t }}</option>
							<option>{{ "Juin" | t }}</option>
							<option>{{ "Juillet" | t }}</option>
							<option>{{ "Août" | t }}</option>
							<option>{{ "Septembre" | t }}</option>
							<option>{{ "Octobre" | t }}</option>
							<option>{{ "Novembre" | t }}</option>
							<option>{{ "Décembre" | t }}</option>
						</select>
					</div>
				</div>
			</div>

			<!-- Charts Section -->
			<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
				<!-- Scans Over Time Chart -->
				<div class="p-6 bg-white rounded shadow">
					<h2 class="mb-4 text-xl font-semibold">Scans Over Time</h2>
					<!-- Placeholder for chart -->
					<div class="h-64 bg-gray-200 rounded"></div>
				</div>

				<!-- Scans by Operating System Chart -->
				<div class="p-6 bg-white rounded shadow">
					<h2 class="mb-4 text-xl font-semibold">Scans by Operating System</h2>
					<div class="space-y-4">
						<div class="flex justify-between items-center">
							<span class="text-gray-700">Android OS</span>
							<span class="text-gray-700">84.5%</span>
						</div>
						<div class="w-full h-4 bg-gray-200 rounded">
							<div class="h-4 bg-blue-500 rounded" style="width: 84.5%"></div>
						</div>
						<div class="flex justify-between items-center">
							<span class="text-gray-700">iOS</span>
							<span class="text-gray-700">15.5%</span>
						</div>
						<div class="w-full h-4 bg-gray-200 rounded">
							<div class="h-4 bg-blue-700 rounded" style="width: 15.5%"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

{{ template "footer.html" . }}