{{ template "headersMenu.html" . }}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="container">
	<div class="flex w-full min-h-screen">
	<section class="flex flex-col gap-2 py-32 w-full">

		<!-- Borad -->
		<div class="grid gap-4 lg:grid-cols-5">
		<!-- Caculated from closed trades -->
		<div class="px-6 py-4 rounded-lg border min-h-32">
			<div class="inline-flex flex-col gap-2 justify-start items-start">
			<div class="text-xs font-bold">Total Revenue</div>
			<div class="text-2xl font-bold">$1,231</div>
			<div class="text-xs font-normal/80">+20.1% gross growth</div>
			<!-- skeleton -->
			<!-- <div class="w-full h-2 bg-gray-800 rounded animate-pulse"></div>
			<div class="w-24 h-8 bg-gray-800 rounded animate-pulse"></div>
			<div class="w-full h-2 bg-gray-800 rounded animate-pulse"></div> -->
			</div>
		</div>

		<!-- Caltulated from closed trades -->
		<div class="px-6 py-4 rounded-lg border min-h-32">
			<div class="inline-flex flex-col gap-2 justify-start items-start">
			<div class="text-xs font-bold">Monthly Profit</div>
			<div class="text-2xl font-bold">$115</div>
			<div class="text-xs font-normal/80">Total profit made this month.</div>
			</div>
		</div>


		<div class="px-6 py-4 rounded-lg border min-h-32">
			<div class="inline-flex flex-col gap-2 justify-start items-start">
			<div class="text-xs font-bold">Drawdown</div>
			<div class="text-2xl font-bold">0%</div>
			<div class="text-xs font-normal/80">Drawdown</div>
			</div>
		</div>

		<div class="px-6 py-4 rounded-lg border min-h-32">
			<div class="inline-flex flex-col gap-2 justify-start items-start">
			<div class="text-xs font-bold">Win Rate</div>
			<div class="text-2xl font-bold">70%</div>
			<div class="text-xs font-normal/80">Percentage of profitable trades</div>
			</div>
		</div>

		<div class="px-6 py-4 rounded-lg border min-h-32">
			<div class="inline-flex flex-col gap-2 justify-start items-start">
			<div class="text-xs font-bold">Monthly Trades</div>
			<div class="text-2xl font-bold">32</div>
			<div class="text-xs font-normal/80">124 Total Trades</div>
			</div>
		</div>
		</div>

		<!-- Chart -->
		<div class="grid gap-4 lg:grid-cols-4">
		<div class="px-6 py-4 rounded-lg border min-h-fill lg:col-span-3">
			<div class="inline-flex flex-col gap-9 justify-start items-start w-full h-full">
			<div class="text-xs font-bold">Overview</div>
			<div class="overflow-x-auto relative w-full h-auto">
				<canvas id="myChart" class="w-full h-auto"></canvas>
			</div>
			</div>
		</div>

		<!-- calcualted from closed possition -->
		<div class="px-6 py-4 rounded-lg border min-h-32 lg:col-span-1">
			<div class="inline-flex flex-col gap-2 justify-start items-start">
			<div class="text-xs font-bold">Trade</div>
			<div class="text-xs font-normal/80">You made $531 this month.</div>
			</div>
			<!-- List -->
			<div class="pt-4">
				<ul class="">
				<li class="w-full">
					<div class="flex gap-2 justify-between py-2 w-full border-t border-white/10">
					<div>EURUSD</div>
					<div>Sell</div>
					<div class="text-teal-300">$8.30</div>
					<!-- skeleton -->
					<!-- <div class="w-full h-2 bg-gray-800 rounded animate-pulse"></div>
					<div class="w-full h-2 bg-gray-800 rounded animate-pulse"></div>
					<div class="w-full h-2 bg-gray-800 rounded animate-pulse"></div> -->
					</div>

					<div class="flex gap-2 justify-between py-2 w-full border-t border-white/10">
					<div>EURUSD</div>
					<div>Buy</div>
					<div class="text-red-300">-$8.30</div>
					</div>

					<div class="flex gap-2 justify-between py-2 w-full border-t border-white/10">
					<div>EURUSD</div>
					<div>Sell</div>
					<div class="text-teal-300">$8.30</div>
					</div>

					<div class="flex gap-2 justify-between py-2 w-full border-t border-white/10">
					<div>EURUSD</div>
					<div>Sell</div>
					<div class="text-teal-300">$8.30</div>
					</div>

					<div class="flex gap-2 justify-between py-2 w-full border-t border-white/10">
					<div>EURUSD</div>
					<div>Sell</div>
					<div class="text-teal-300">$8.30</div>
					</div>

					<div class="flex gap-2 justify-between py-2 w-full border-t border-white/10">
					<div>EURUSD</div>
					<div>Sell</div>
					<div class="text-teal-300">$8.30</div>
					</div>

					<div class="flex gap-2 justify-between py-2 w-full border-t border-white/10">
					<div>EURUSD</div>
					<div>Sell</div>
					<div class="text-teal-300">$8.30</div>
					</div>

					<div class="flex gap-2 justify-between py-2 w-full border-t border-white/10">
					<div>EURUSD</div>
					<div>Sell</div>
					<div class="text-teal-300">$8.30</div>
					</div>

				</li>
				</ul>

			</div>

		</div>
		</div>
	</section>
	</div>
</div>


{{ template "footer.html" . }}