<!DOCTYPE html>
<html lang="en"> 
<head>
    <title>Sharefolio - Incomes</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 loading" 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 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 active 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">
				<div class="row g-3 mb-4 align-items-center justify-content-between">
				    <div class="col-auto">
			            <h1 class="app-page-title mb-0">Incomes</h1>
				    </div>
				    <div class="col-auto">
					     <div class="page-utilities">
						    <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
							    <div class="col-auto">
								    <form class="table-search-form row gx-1 align-items-center" method="GET" action="{{ url_for('incomes') }}">
					                    <div class="col-auto">
					                        <input type="text" id="search-orders" name="keyword" class="form-control search-orders" placeholder="Search" value="{{ request.args.get('keyword', '') }}">
					                    </div>
					                    <div class="col-auto">
					                        <button type="submit" class="btn app-btn-secondary">Search</button>
					                    </div>
					                    {% if request.args.get('keyword', '') %}
					                    <div class="col-auto">
					                        <a href="{{ url_for('incomes') }}" class="btn app-btn-secondary"><i class="fa fa-times me-1"></i>Clear</a>
					                    </div>
					                    {% endif %}
					                </form>
					                
							    </div><!--//col-->
							    <div class="col-auto">
								    <a class="btn app-btn-primary" href="/addincome">
										<i width="1em" height="1em" viewBox="0 0 16 16" class="fa fa-plus"></i>
										New Income
									</a>
							    </div>
							    <form method="POST" action="/uploadincomes" enctype="multipart/form-data" id="upload-form" style="display: none;">
									<input type="file" id="csv-file" name="file" accept=".csv" onchange="document.getElementById('upload-form').submit();">
								</form>
								<div class="col-auto">
									<a class="btn app-btn-secondary" href="#" onclick="document.getElementById('csv-file').click(); return false;">
										<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-upload me-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
											<path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
											<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
										</svg>
										Upload CSV
									</a>
								</div>
							    <div class="col-auto">
								    <a class="btn app-btn-secondary" href="{{ url_for('download_incomes') }}" data-save-csv="incomes">
									    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
											<path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
											<path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
										</svg>
									    Save CSV
									</a>
							    </div>
						    </div><!--//row-->
					    </div><!--//table-utilities-->
				    </div><!--//col-auto-->
			    </div><!--//row-->
				{% with messages = get_flashed_messages(with_categories=true) %}
				{% if messages %}
				<div class="app-card-body p-4">
					<div class="row gx-5 gy-3">
						<div class="col-12 col-lg-9">
						{% for category, message in messages %}
							{{ message }}
						{% endfor %}
						</div><!--//col-->
					</div><!--//row-->
				</div><!--//app-card-body-->
				{% endif %}
				{% endwith %}
				<div><br></div>
				<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>
	    
	    <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> 

