<!DOCTYPE html>
<html lang="en"> 
<head>
    <title>Sharefolio - Edit Trade Details</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 active 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">
				<div class="col-auto">
					<h1 class="app-page-title mb-0">Edit Trade Details</h1>
					<br>
				</div>
				<form method="POST" action="{{ url_for('update_trade', trade_id=trade['id']) }}" class="row g-3">

					<!-- Date -->
					<div class="col-md-4">
						<label for="date" class="form-label">Date</label>
						<input type="date" id="date" name="date" class="form-control" required value="{{ trade['date'] }}">
					</div>

					<!-- Ticker -->
					<div class="col-md-4">
						<label for="ticker" class="form-label">Ticker</label>
						<input type="text" id="ticker" name="ticker" class="form-control" required value="{{ trade['ticker'] }}">
					</div>

					<!-- Currency -->
					<div class="col-md-4">
						<label for="currency" class="form-label">Currency</label>
						<select id="currency" name="currency" class="form-select" required>
							<option value="" disabled>Select currency</option>
							{% for ccy in currencies %}
								<option value="{{ ccy }}" {% if ccy == trade['currency'] %}selected{% endif %}>
									{{ ccy }} {{ currency_icons[ccy] }}
								</option>
							{% endfor %}
						</select>
					</div>

					<!-- Exchange -->
					<div class="col-md-4">
						<label for="exchange" class="form-label">Exchange</label>
						<select id="exchange" name="exchange" class="form-select" required>
							<option value="" disabled>Select exchange</option>
							{% for exch in exchanges %}
								<option value="{{ exch }}" {% if exch == trade['exchange'] %}selected{% endif %}>
									{{ exchange_names[exch] }}
								</option>
							{% endfor %}
						</select>
					</div>

					<!-- FX (optional) -->
					<div class="col-md-4">
						<label for="fx" class="form-label">FX (Base Currency ÷ Asset Currency) (optional)</label>
						<input type="number" step="any" id="fx" name="fx" class="form-control" value="{{ trade['fx'] or '' }}">
					</div>

					<!-- Type -->
					<div class="col-md-4">
						<label for="type" class="form-label">Type</label>
						<select id="type" name="type" class="form-select" required>
							<option value="" disabled>Select Trade Type</option>
							<option value="BUY" {% if trade['type'] == 'BUY' %}selected{% endif %}>BUY</option>
							<option value="SELL" {% if trade['type'] == 'SELL' %}selected{% endif %}>SELL</option>
							<option value="ADJUSTMENT" {% if trade['type'] == 'ADJUSTMENT' %}selected{% endif %}>ADJUSTMENT</option>
						</select>
					</div>

					<!-- Quantity -->
					<div class="col-md-4">
						<label for="quantity" class="form-label">Quantity</label>
						<input type="number" step="any" id="quantity" name="quantity" class="form-control" required value="{{ trade['quantity'] }}">
					</div>

					<!-- Price -->
					<div class="col-md-4">
						<label for="price" class="form-label">Price</label>
						<input type="number" step="any" id="price" name="price" class="form-control" required value="{{ trade['price'] }}">
					</div>

					<!-- Fees -->
					<div class="col-md-4">
						<label for="fees" class="form-label">Fees</label>
						<input type="number" step="any" id="fees" name="fees" class="form-control" required value="{{ trade['fees'] }}">
					</div>

					<!-- Note (optional) -->
					<div class="col-12">
						<label for="note" class="form-label">Note (optional)</label>
						<textarea id="note" name="note" class="form-control" rows="2">{{ trade['note'] }}</textarea>
					</div>

					<!-- Buttons -->
					<div class="col-md-3">
						<button type="submit" class="btn app-btn-primary loading">Save Changes</button>
					</div>
				</form>
				<br>
				<form action="{{ url_for('delete_trade_route', trade_id=trade['id']) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this trade?');">
					<button type="submit" class="btn btn-danger loading">Delete</button>
				</form>
				<br>
				<div class="col-md-3">
					<a class="btn app-btn-secondary loading" href="/trades">Cancel</a>
				</div>

			</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> 

