<!DOCTYPE html>
<html lang="en"> 
<head>
    <title>Sharefolio - {{ ticker }} Performance</title>
    
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta name="description" content="Sharefolio">
    <meta name="author" content="Ivan YeH">    
    <!-- <link rel="shortcut icon" href="favicon.ico">  -->
    
    <!-- FontAwesome JS-->
    <!-- <script defer src="assets/plugins/fontawesome/js/all.min.js"></script> -->
    <script defer src="{{ url_for('static', filename='assets/plugins/fontawesome/js/all.min.js') }}"></script>
    
    <!-- App CSS -->  
    <!-- <link id="theme-style" rel="stylesheet" href="assets/css/portal.css"> -->
    <link id="theme-style" rel="stylesheet" href="{{ url_for('static', filename='assets/css/portal.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/modern.css') }}">
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
</head> 

<body class="app">   	
    <header class="app-header fixed-top">	   	            
        <div class="app-header-inner">  
	        <div class="container-fluid py-2">
		        <div class="app-header-content"> 
				    <div class="col-auto">
					    <a id="sidepanel-toggler" class="sidepanel-toggler d-inline-block d-xl-none" href="#">
						    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg>
					    </a>
				    </div>
		        </div><!--//row-->
	            </div><!--//app-header-content-->
	        </div><!--//container-fluid-->
        </div><!--//app-header-inner-->
        <div id="app-sidepanel" class="app-sidepanel"> 
	        <div id="sidepanel-drop" class="sidepanel-drop"></div>
	        <div class="sidepanel-inner d-flex flex-column">
		        <a href="#" id="sidepanel-close" class="sidepanel-close d-xl-none">&times;</a>
		        <div class="app-branding">
		            <a class="app-logo" href="/portfolio"><span class="logo-text">Sharefolio</span></a>
		        </div><!--//app-branding-->  
		        
			    <nav id="app-nav-main" class="app-nav app-nav-main flex-grow-1">
				    <ul class="app-menu list-unstyled accordion" id="menu-accordion">
					    <li class="nav-item">
					        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
					        <a class="nav-link loading" href="{{ url_for('portfolio') }}">
						        <span class="nav-icon"><i class="fa-solid fa-chart-column"></i></span>
		                        <span class="nav-link-text">Portfolio</span>
					        </a><!--//nav-link-->
					    </li><!--//nav-item-->
					    
					    <li class="nav-item">
					        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
					        <a class="nav-link active loading" href="{{ url_for('holdings') }}">
								<span class="nav-icon" href><i class="fa-solid fa-hand-holding-dollar"></i></span>
		                         <span class="nav-link-text">Holdings</span>
					        </a><!--//nav-link-->
					    </li><!--//nav-item-->
						<li class="nav-item has-submenu">
					        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
					        <a class="nav-link submenu-toggle" href="#" data-bs-toggle="collapse" data-bs-target="#submenu-1" aria-expanded="false" aria-controls="submenu-1">
						        <span class="nav-icon"><i class="fa-solid fa-money-bill-transfer"></i></span>
		                         <span class="nav-link-text">Transactions</span>
		                         <span class="submenu-arrow">
		                             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
	  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
	</svg>
	                             </span><!--//submenu-arrow-->
					        </a><!--//nav-link-->
					        <div id="submenu-1" class="show submenu submenu-1" data-bs-parent="#menu-accordion">
						        <ul class="submenu-list list-unstyled">
							        <li class="submenu-item"><a class="submenu-link loading" href="{{ url_for('trades') }}">Trades</a></li>
							        <li class="submenu-item"><a class="submenu-link loading" href="{{ url_for('incomes') }}">Incomes</a></li>
						        </ul>
					        </div>
					    </li><!--//nav-item-->
						
						
				    </ul><!--//app-menu-->
			    </nav><!--//app-nav-->
			    
				<div class="app-sidepanel-footer">
				    <nav class="app-nav app-nav-footer">
					    <ul class="app-menu footer-menu list-unstyled">
						    <li class="nav-item">
						        <a class="nav-link" href="/info">
							        <span class="nav-icon">
										<i class="fa fa-info"></i>
									</span>
			                        <span class="nav-link-text">Help &amp; FAQ</span>
						        </a><!--//nav-link-->
						    </li><!--//nav-item-->
						    <li class="nav-item">
						        <a class="nav-link" href="/settings">
							        <span class="nav-icon">
										<i class="fa fa-cogs"></i>
									</span>
			                        <span class="nav-link-text">Settings</span>
						        </a><!--//nav-link-->
						    </li><!--//nav-item-->
						    <li class="nav-item">
						        <a class="nav-link" href="{{ url_for('index') }}">
							        <span class="nav-icon">
										<i class="fa fa-home"></i>
									</span>
			                        <span class="nav-link-text">Home</span>
						        </a><!--//nav-link-->
						    </li><!--//nav-item-->
					    </ul><!--//footer-menu-->
				    </nav>
			    </div><!--//app-sidepanel-footer-->
		       
	        </div><!--//sidepanel-inner-->
	    </div><!--//app-sidepanel-->
    </header><!--//app-header-->
    
    <div class="app-wrapper">
	    <div class="container-xl">
			<div class="app-content pt-3 p-md-3 p-lg-4">
				<style>
					/* Modern tab styles */
					.tab-container {
						max-width: 100%;
						margin: 0 auto;
					}

					.tab-buttons {
						display: flex;
						gap: 1rem;
						border-bottom: 2px solid #e0e0e0;
						padding-bottom: 0.5rem;
					}

					.tab-buttons button {
						background: #f5f5f5;
						border: none;
						padding: 10px 20px;
						border-radius: 20px 20px 0 0;
						cursor: pointer;
						font-weight: 500;
						transition: all 0.3s ease;
						color: #333;
					}

					.tab-buttons button.active {
						background: #a7ffd0;
						border-bottom: 2px solid white;
						box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
						color: #407436;
					}

					.tab-buttons button:hover {
						background: #eaeaea;
					}

					.tab-content-modern {
						background: white;
						border-radius: 0 0 12px 12px;
						box-shadow: 0 4px 10px rgba(0,0,0,0.05);
						padding: 2rem;
						margin-top: -1px;
					}

					.tab-pane-modern {
						display: none;
					}

					.tab-pane-modern.active {
						display: block;
					}

					.sub-tabs {
						margin-top: 1rem;
						border-bottom: 1px solid #ddd;
					}
				</style>
				<a class="btn app-btn-secondary loading" href="/holdings"><i class="fa fa-arrow-left" aria-hidden="true"></i> All Holdings</a>
				<div><br></div>
				<h1 class="app-page-title">Performance Report: {{ ticker }} {{ currency_icon }}</h1>
				{% if asset.name %}<p class="text-muted mb-2" style="margin-top:-0.5rem;">{{ asset.name }}</p>{% endif %}
				<div class="tab-container">
					<div class="tab-buttons">
						{% if asset.currency != base_currency %}
							<button data-tab="base-view">Base Currency View</button>
							<button class="active" data-tab="multi-view">Asset Currency View</button>
						{% else %}
							<button class="active" data-tab="base-view">Base Currency View</button>
						{% endif %}
					</div>
					<div class="tab-content-modern">
						<div id="base-view" class="tab-pane-modern{% if asset.currency == base_currency %} active{% endif %}">
							<h4>Base Currency View</h4>
							<p>All amounts are aggregated and converted to your base currency (<strong>{{  base_currency  }}</strong>).</p>
							<!-- Portfolio Stats -->
							<div class="row g-4 mb-4">
								<!-- portfolio stats card 1/4-->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Current Value</h4>
											<div class="stats-figure">${{  asset.current_value_base_currency | round(2) }}</div>
											<div class="stats-meta">Total Contribution ${{ asset.cost_basis_base_currency | round(2) }}</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 2/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Total Return</h4>
											<div class="stats-figure">${{  asset.total_return_dollar_base_currency | round(2)  }}</div>
											<div class="stats-meta">{{  (asset.total_return_pct_base_currency * 100) | round(2)  }}%</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 3/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Total Capital Gains</h4>
											<div class="stats-figure">${{  asset.total_capital_gains_dollar_base_currency | round(2) }}</div>
											<div class="stats-meta">{{  (asset.total_capital_gains_pct_base_currency * 100) | round(2) }}%</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 3/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Total Income</h4>
											<div class="stats-figure">${{  asset.total_income_dollar_base_currency | round(2) }}</div>
											<div class="stats-meta">{{  (asset.total_income_pct_base_currency * 100) | round(2) }}%</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row g-4 mb-4">
								<!-- portfolio stats card 1/4-->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Current Quantity</h4>
											<div class="stats-figure">{{ asset.current_holdings | round(2) }}</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 3/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Current Price ({{ asset_currency }})</h4>
											<div class="stats-figure">${{  asset.current_share_price }}</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 2/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Asset Currency</h4>
											<div class="stats-figure">{{  asset.currency }} {{ currency_icon }}</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 3/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Asset Exchange</h4>
											<div class="stats-figure">{{  asset.exchange }} {{ exchange_icon }}</div>
										</div>
									</div>
								</div>
							</div>

							<!-- Charts -->
							<div class="row g-4 mb-4">
								<div class="app-card app-card-chart h-100 shadow-sm">
									<div class="app-card-header p-3">
										<div class="row justify-content-between align-items-center">
											<div class="col-auto">
												<h4 class="app-card-title">Historical Performance</h4>
											</div>
										</div>
									</div>
									<div class="app-card-body p-3 p-lg-4">
										<div class="mb-3 d-flex">   
											<select id="periodSelectorBase" class="form-select form-select-sm ms-auto d-inline-flex w-auto">
												<option value="monthly" selected>Monthly</option>
												<option value="quarterly">Quarterly</option>
												<option value="semi-annual">Semi-Annual</option>
												<option value="annual">Annual</option>
											</select>
										</div>
										<style>
											.chart-container {
												position: relative;
												height: 300px; /* set the height you want */
												width: 100%;
											}

											canvas {
												width: 100% !important;
												height: 100% !important;
											}
										</style>
										<div class="chart-container">
											<canvas id="portfolioHistoryBase"></canvas>
											<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
											<script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>
											<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1"></script>
											<script>
												const dataByPeriodBase = {{ asset_history_base_data | tojson }};
												const portfolioHistoryBase = document.getElementById('portfolioHistoryBase');
												const initialPeriod = 'monthly';

												let portfolioHistoryBaseChart = new Chart(portfolioHistoryBase, {
													type: 'bar',
													data: {
													labels: dataByPeriodBase[initialPeriod].labels,
													datasets: [
														{
														label: 'Capital Gains',
														data: dataByPeriodBase[initialPeriod].capital_gains,
														backgroundColor: 'rgba(0, 183, 100, 0.75)',
														stack: 'combined',
														},
														{
														label: 'Income',
														data: dataByPeriodBase[initialPeriod].income,
														backgroundColor: 'rgba(99, 179, 237, 0.8)',
														stack: 'combined',
														},
														{
														label: 'Total Return',
														data: dataByPeriodBase[initialPeriod].total_return,
														stack: 'combined2',
														}
													]
													},
													options: {
													responsive: true,
													maintainAspectRatio: false,
													scales: {
														x: {
														title: { display: true, text: 'Date' }
														},
														y: {
														stacked: true,
														beginAtZero: true,
														title: { display: true, text: 'Amount' }
														}
													},
													plugins: {
														legend: { position: 'top' },
														tooltip: {
														mode: 'index',
														intersect: false,
														callbacks: {
															label: function(context) {
															const period = document.getElementById('periodSelectorBase').value;
															const index = context.dataIndex;
															const datasetIndex = context.datasetIndex;

															const value = context.raw;
															const label = context.dataset.label;
															let pct = 0;

															if (datasetIndex === 0) {
																pct = (dataByPeriodBase[period].capital_gains_pct[index] * 100).toFixed(2)
															} else if (datasetIndex === 1) {
																pct = (dataByPeriodBase[period].income_pct[index] * 100).toFixed(2);
															} else if (datasetIndex === 2) {
																pct = (dataByPeriodBase[period].total_return_pct[index] * 100).toFixed(2);
															}

															return `${label}: $${value.toFixed(2)} (${pct}%)`;
															}
														}
														}
													}
													}
												});

												// Update function on period change
												document.getElementById('periodSelectorBase').addEventListener('change', function () {
													const period = this.value;
													portfolioHistoryBaseChart.data.labels = dataByPeriodBase[period].labels;
													portfolioHistoryBaseChart.data.datasets[0].data = dataByPeriodBase[period].capital_gains;
													portfolioHistoryBaseChart.data.datasets[1].data = dataByPeriodBase[period].income;
													portfolioHistoryBaseChart.data.datasets[2].data = dataByPeriodBase[period].total_return;
													portfolioHistoryBaseChart.update();
												});
											</script>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div id="multi-view" class="tab-pane-modern{% if asset.currency != base_currency %} active{% endif %}">
							<h4>Asset Currency View</h4>
							<!-- Portfolio Stats -->
							<div class="row g-4 mb-4">
								<!-- portfolio stats card 1/4-->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Current Value</h4>
											<div class="stats-figure">${{  asset.current_value_asset_currency | round(2) }}</div>
											<div class="stats-meta">Total Contribution ${{ asset.cost_basis_asset_currency | round(2) }}</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 2/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Total Return</h4>
											<div class="stats-figure">${{  asset.total_return_dollar_asset_currency | round(2)  }}</div>
											<div class="stats-meta">{{  (asset.total_return_pct_asset_currency * 100) | round(2)  }}%</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 3/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Total Capital Gains</h4>
											<div class="stats-figure">${{  asset.total_capital_gains_dollar_asset_currency | round(2) }}</div>
											<div class="stats-meta">{{  (asset.total_capital_gains_pct_asset_currency * 100) | round(2) }}%</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 3/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Total Income</h4>
											<div class="stats-figure">${{  asset.total_income_dollar_asset_currency | round(2) }}</div>
											<div class="stats-meta">{{  (asset.total_income_pct_asset_currency * 100) | round(2) }}%</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row g-4 mb-4">
								<!-- portfolio stats card 1/4-->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Current Quantity</h4>
											<div class="stats-figure">{{ asset.current_holdings | round(2) }}</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 3/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Current Price {{ currency }}</h4>
											<div class="stats-figure">${{  asset.current_share_price }}</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 2/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Asset Currency</h4>
											<div class="stats-figure">{{  asset.currency }} {{ currency_icon }}</div>
										</div>
									</div>
								</div>
								<!-- portfolio stats card 3/4 -->
								<div class="col-6 col-lg-3">
									<div class="app-card app-card-stat shadow-sm h-100">
										<div class="app-card-body p-3 p-lg-4">
											<h4 class="stats-type mb-1">Asset Exchange</h4>
											<div class="stats-figure">{{  asset.exchange }} {{ exchange_icon }}</div>
										</div>
									</div>
								</div>
							</div>

							<div class="app-card app-card-chart h-100 shadow-sm">
								<div class="app-card-header p-3">
									<div class="row justify-content-between align-items-center">
										<div class="col-auto">
											<h4 class="app-card-title">Historical Performance</h4>
										</div>
									</div>
								</div>
								<div class="app-card-body p-3 p-lg-4">
									<div class="mb-3 d-flex">   
										<select id="periodSelector{{ currency }}" class="form-select form-select-sm ms-auto d-inline-flex w-auto">
											<option value="monthly" selected>Monthly</option>
											<option value="quarterly">Quarterly</option>
											<option value="semi-annual">Semi-Annual</option>
											<option value="annual">Annual</option>
										</select>
									</div>
									<div class="chart-container">
										<canvas id="portfolioHistory{{ currency }}"></canvas>
										<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
										<script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>
										<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1"></script>
										<script>
											const dataByPeriod{{ currency }} = {{ asset_history_asset_data | tojson }};
											const portfolioHistory{{ currency }} = document.getElementById('portfolioHistory{{ currency }}');
											const initialPeriod{{ currency }} = 'monthly';

											let portfolioHistory{{ currency }}Chart = new Chart(portfolioHistory{{ currency }}, {
												type: 'bar',
												data: {
												labels: dataByPeriod{{ currency }}[initialPeriod{{ currency }}].labels,
												datasets: [
													{
													label: 'Capital Gains',
													data: dataByPeriod{{ currency }}[initialPeriod{{ currency }}].capital_gains,
													backgroundColor: 'rgba(0, 183, 100, 0.75)',
													stack: 'combined',
													},
													{
													label: 'Income',
													data: dataByPeriod{{ currency }}[initialPeriod{{ currency }}].income,
													backgroundColor: 'rgba(99, 179, 237, 0.8)',
													stack: 'combined',
													},
													{
													label: 'Total Return',
													data: dataByPeriod{{ currency }}[initialPeriod{{ currency }}].total_return,
													stack: 'combined2',
													}
												]
												},
												options: {
												responsive: true,
												maintainAspectRatio: false,
												scales: {
													x: {
													title: { display: true, text: 'Date' }
													},
													y: {
													stacked: true,
													beginAtZero: true,
													title: { display: true, text: 'Amount' }
													}
												},
												plugins: {
													legend: { position: 'top' },
													tooltip: {
													mode: 'index',
													intersect: false,
													callbacks: {
														label: function(context) {
														const period = document.getElementById('periodSelector{{ currency }}').value;
														const index = context.dataIndex;
														const datasetIndex = context.datasetIndex;

														const value = context.raw;
														const label = context.dataset.label;
														let pct = 0;

														if (datasetIndex === 0) {
															pct = (dataByPeriod{{ currency }}[period].capital_gains_pct[index] * 100).toFixed(2)
														} else if (datasetIndex === 1) {
															pct = (dataByPeriod{{ currency }}[period].income_pct[index] * 100).toFixed(2);
														} else if (datasetIndex === 2) {
															pct = (dataByPeriod{{ currency }}[period].total_return_pct[index] * 100).toFixed(2);
														}

														return `${label}: $${value.toFixed(2)} (${pct}%)`;
														}
													}
													}
												}
												}
											});

											// Update function on period change
											document.getElementById('periodSelector{{ currency }}').addEventListener('change', function () {
												const period{{ currency }} = this.value;
												portfolioHistory{{ currency }}Chart.data.labels = dataByPeriod{{ currency }}[period{{ currency }}].labels;
												portfolioHistory{{ currency }}Chart.data.datasets[0].data = dataByPeriod{{ currency }}[period{{ currency }}].capital_gains;
												portfolioHistory{{ currency }}Chart.data.datasets[1].data = dataByPeriod{{ currency }}[period{{ currency }}].income;
												portfolioHistory{{ currency }}Chart.data.datasets[2].data = dataByPeriod{{ currency }}[period{{ currency }}].total_return;
												portfolioHistory{{ currency }}Chart.update();
											});
										</script>
									</div>
								</div>
							</div>	
						</div>
						<br>
						<h4 class="stats-type mb-1">Trades</h4>
						<br>
						<div class="app-card app-card-orders-table shadow-sm mb-5">
							<div class="app-card-body">
								<div class="table-responsive">
									<table class="table app-table-hover mb-0 text-left">
										<thead>
											<tr>
												<th class="cell" hidden>id</th>
												<th class="cell">Date</th>
												<th class="cell">Ticker</th>
												<th class="cell">Exchange</th>
												<th class="cell">Currency</th>
												<th class="cell">FX</th>
												<th class="cell">Type</th>
												<th class="cell">Quantity</th>
												<th class="cell">Price</th>
												<th class="cell">Fees</th>
												<th class="cell">Proceeds</th>
												<th class="cell">Note</th>
												<th class="cell"></th>
											</tr>
										</thead>
										<tbody>
											{% for trade in trades %}
											<tr>
												<td class="cell" hidden>{{ trade.id }}</td>
												<td class="cell">{{ trade.date_display }}</td>
												<td class="cell">{{ trade.ticker }}</td>
												<td class="cell">{{ exchange_names[trade.exchange] }} </td>
												<td class="cell">{{ trade.currency }} {{ currency_icons[trade.currency] }}</td>
												<td class="cell">{{ trade.fx or '' }}</td>
												{% if trade.type == 'BUY' %} 
													<td class="cell"><span class="badge bg-success">{{ trade.type }}</span></td>
												{% elif trade.type == 'SELL' %}
													<td class="cell"><span class="badge bg-danger">{{ trade.type }}</span></td>
												{% else %}
													<td class="cell"><span class="badge bg-warning">{{ trade.type }}</span></td>
												{% endif %}
												<td class="cell">{{ trade.quantity }}</td>
												<td class="cell">{{ trade.price }}</td>
												<td class="cell">{{ trade.fees }}</td>
												{% if trade.type == 'BUY' %} 
													<td class="cell">{{ "{:,.2f}".format((trade.price * -trade.quantity - trade.fees) | round(2)) }}</td>
												{% elif trade.type == 'SELL' %}
													<td class="cell">{{ "{:,.2f}".format(trade.price * trade.quantity - trade.fees | round(2)) }}</td>
												{% else %}
													<td class="cell">{{ "{:,.2f}".format(trade.price * -trade.quantity - trade.fees | round(2)) }}</td>
												{% endif %}
												<td class="cell">{{ trade.note or '' }}</td>
												<td class="cell"><a class="btn-sm app-btn-secondary loading" href="/trades/edit/{{ trade.id }}">Edit</a></td>
											</tr>
											{% endfor %}
										</tbody>
									</table>
								</div>
							</div><!--//app-card-body-->		
						</div><!--//app-card-->
						<h4 class="stats-type mb-1">Income</h4>
						<br>
						<div class="app-card app-card-orders-table shadow-sm mb-5">
						<div class="app-card-body">
							<div class="table-responsive">
								<table class="table app-table-hover mb-0 text-left">
									<thead>
										<tr>
											<th class="cell" hidden>id</th>
											<th class="cell">Date</th>
											<th class="cell">Ticker</th>
											<th class="cell">Exchange</th>
											<th class="cell">Currency</th>
											<th class="cell">FX</th>
											<th class="cell">Amount</th>
											<th class="cell">Tax Credit</th>
											<th class="cell">Fees</th>
											<th class="cell">Total</th>
											<th class="cell">Note</th>
											<th class="cell"></th>
										</tr>
									</thead>
									<tbody>
										{% for income in incomes %}
										<tr>
											<td class="cell" hidden>{{ income.id }}</td>
											<td class="cell">{{ income.date_display }}</td>
											<td class="cell">{{ income.ticker }}</td>
											<td class="cell">{{ exchange_names[income.exchange] }} </td>
											<td class="cell">{{ income.currency }} {{ currency_icons[income.currency] }}</td>
											<td class="cell">{{ income.fx or '' }}</td>
											<td class="cell">{{ income.amount }}</td>
											<td class="cell">{{ income.imputation }}</td>
											<td class="cell">{{ income.fees }}</td>
											<td class="cell">{{ "{:,.2f}".format((income.amount + income.imputation - income.fees) | round(2)) }}</td>
											<td class="cell">{{ income.note or '' }}</td>
											<td class="cell"><a class="btn-sm app-btn-secondary loading" href="/incomes/edit/{{ income.id }}">Edit</a></td>
										</tr>
										{% endfor %}
									</tbody>
								</table>
							</div>
						</div><!--//app-card-body-->		
					</div><!--//app-card-->
					</div>
				</div>

				<script>
					{% raw %}
					// Main Tabs: Base vs Multi
					document.querySelectorAll('.tab-buttons:not(.sub-tabs) button').forEach(button => {
						button.addEventListener('click', () => {
							// Remove active from all main tab buttons and panes
							document.querySelectorAll('.tab-buttons:not(.sub-tabs) button').forEach(btn => btn.classList.remove('active'));
							document.querySelectorAll('.tab-content-modern > .tab-pane-modern').forEach(pane => pane.classList.remove('active'));

							// Activate selected main tab
							button.classList.add('active');
							document.getElementById(button.getAttribute('data-tab')).classList.add('active');
						});
					});
					{% endraw %}
				</script>
			</div>
		</div>
	    
	    <footer class="app-footer">
		    <div class="container text-center py-3">
		         <!--/* This template is free as long as you keep the footer attribution link. If you'd like to use the template without the attribution link, you can buy the commercial license via our website: themes.3rdwavemedia.com Thank you for your support. :) */-->
            <small class="copyright">Developed by <a class="app-link" href="https://www.linkedin.com/in/ivan-yeh-58367122b/" target="_blank">Ivan Yeh</a></small><br><small class="text-muted" style="opacity:0.55;">Prices may be delayed up to 30 minutes.</small>
		       
		    </div>
	    </footer><!--//app-footer-->
	    
    </div><!--//app-wrapper-->    					


	<!-- JavaScript -->
	<script src="{{ url_for('static', filename='assets/plugins/popper.min.js') }}"></script>
	<script src="{{ url_for('static', filename='assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>

	<!-- Charts JS -->
	<script src="{{ url_for('static', filename='assets/plugins/chart.js/chart.min.js') }}"></script>
	<script src="{{ url_for('static', filename='assets/js/index-charts.js') }}"></script>

	<!-- Page-Specific JS -->
	<script src="{{ url_for('static', filename='assets/js/app.js') }}"></script>

	{% include "loading.html" %}

</body>
</html> 

