<!DOCTYPE html>
<html lang="en"> 
<head>
    <title>Sharefolio - Settings</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 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 active" 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>
				<br>
			</div>    
			<h1 class="app-page-title">Settings</h1>
			{% 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 %}
			<hr class="mb-4">
			<div class="row g-4 settings-section">
				<div class="col-12 col-md-4">
					<h3 class="section-title">Portfolio</h3>
					<div class="section-intro">Select the currency all portfolio values are converted and displayed in. Changing this reloads the portfolio immediately.</div>
				</div>
				<div class="col-12 col-md-8">
					<div class="app-card app-card-settings shadow-sm p-4">
						<div class="app-card-body">
							<form method="POST" action="{{ url_for('settings') }}">
								<div class="mb-3">
									<label class="form-label">Base Currency</label>
									<select name="base_currency" class="form-select" style="max-width:200px;">
										{% for c in supported_currencies %}
										<option value="{{ c }}" {% if c == base_currency %}selected{% endif %}>{{ c }}</option>
										{% endfor %}
									</select>
									<div class="form-text">All trade prices and portfolio values are converted to this currency using historical FX rates.</div>
								</div>
								<div class="mb-3">
									<label class="form-label">Data Directory</label>
									<div class="d-flex align-items-center gap-2" style="max-width:500px;">
										<input type="text" class="form-control" value="{{ app_data_dir }}" readonly>
										<a href="/open-data-folder" class="btn app-btn-secondary text-nowrap" onclick="fetch('/open-data-folder'); return false;">
											<i class="fa fa-folder-open me-1"></i>Show in Finder
										</a>
									</div>
									<div class="form-text">Trade and income CSV files are stored here and persist across app updates.</div>
								</div>
								<button type="submit" class="btn app-btn-primary">Save &amp; Reload</button>
							</form>
						</div>
					</div>
				</div>
			</div><!--//row-->
			<hr class="my-4">
			<div class="row g-4 settings-section">
				<div class="col-12 col-md-4">
					<h3 class="section-title">Supported Exchanges</h3>
					<div class="section-intro">Exchanges recognised for automatic price data fetching via Yahoo Finance.</div>
				</div>
				<div class="col-12 col-md-8">
					<div class="app-card app-card-settings shadow-sm p-4">
						<div class="app-card-body">
							<table class="table mb-0">
								<thead><tr><th>Code</th><th>Exchange</th><th>Currency</th></tr></thead>
								<tbody>
									<tr><td><code>US</code></td><td>NYSE / NASDAQ</td><td>USD 🇺🇸</td></tr>
									<tr><td><code>AX</code></td><td>ASX (Australia)</td><td>AUD 🇦🇺</td></tr>
									<tr><td><code>TO</code></td><td>TSX (Canada)</td><td>CAD 🇨🇦</td></tr>
									<tr><td><code>TW</code></td><td>TWSE (Taiwan)</td><td>TWD 🇹🇼</td></tr>
									<tr><td><code>TWO</code></td><td>OTC Market (Taiwan)</td><td>TWD 🇹🇼</td></tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div><!--//row-->
			<hr class="my-4">
		</div><!--//container-fluid-->
	    
	    <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> 

