<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sharefolio - Upload Error</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="{{ url_for('static', filename='assets/plugins/fontawesome/js/all.min.js') }}"></script>
    <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') }}">
</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>
	        </div>
        </div>
        <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>
			    <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">
					        <a class="nav-link" 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>
					    </li>
					    <li class="nav-item">
					        <a class="nav-link" href="{{ url_for('holdings') }}">
								<span class="nav-icon"><i class="fa-solid fa-hand-holding-dollar"></i></span>
		                         <span class="nav-link-text">Holdings</span>
					        </a>
					    </li>
						<li class="nav-item has-submenu">
					        <a class="nav-link submenu-toggle" href="#" data-bs-toggle="collapse" data-bs-target="#submenu-1" aria-expanded="true" 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>
					        </a>
					        <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" href="{{ url_for('trades') }}">Trades</a></li>
							        <li class="submenu-item"><a class="submenu-link" href="{{ url_for('incomes') }}">Incomes</a></li>
						        </ul>
					        </div>
					    </li>
				    </ul>
			    </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="{{ url_for('info') }}">
							        <span class="nav-icon"><i class="fa fa-info"></i></span>
			                        <span class="nav-link-text">Help &amp; FAQ</span>
						        </a>
						    </li>
						    <li class="nav-item">
						        <a class="nav-link" href="{{ url_for('settings') }}">
							        <span class="nav-icon"><i class="fa fa-cogs"></i></span>
			                        <span class="nav-link-text">Settings</span>
						        </a>
						    </li>
						    <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>
						    </li>
					    </ul>
				    </nav>
			    </div>
	        </div>
	    </div>
    </header>

    <div class="app-wrapper">
		<div class="container-xl">
			<div style="padding-top:2rem;">
				<h1 class="app-page-title">Upload Failed</h1>
			</div>
			<hr class="mb-4">
			<div class="row justify-content-center">
				<div class="col-12 col-lg-8">
					<div class="app-card shadow-sm p-4 mb-4" style="border-left:4px solid #dc3545;">
						<div class="app-card-body">
							<div class="d-flex align-items-center mb-3">
								<span style="font-size:2rem;color:#dc3545;margin-right:16px;">
									<i class="fa-solid fa-circle-xmark"></i>
								</span>
								<div>
									<h5 class="mb-0">{{ file_type }} CSV could not be imported</h5>
									<small class="text-muted">{{ filename }}</small>
								</div>
							</div>
							<p class="text-muted mb-3">
								The file was not saved. Fix the issues below and try uploading again.
								Your existing data is unchanged.
							</p>
							<ul class="mb-0" style="padding-left:1.2rem;">
								{% for error in errors %}
								<li class="text-danger mb-1">{{ error }}</li>
								{% endfor %}
							</ul>
						</div>
					</div>

					<div class="app-card shadow-sm p-4 mb-4">
						<div class="app-card-body">
							<h6 class="mb-2">Required columns</h6>
							{% if file_type == "Trades" %}
							<code class="d-block text-muted small">date, ticker, exchange, currency, fx, type, quantity, price, fees, note</code>
							{% else %}
							<code class="d-block text-muted small">date, ticker, exchange, currency, fx, amount, tax_credit, fees, note</code>
							{% endif %}
							<p class="text-muted small mt-2 mb-0">
								<code>fx</code> and <code>note</code> may be empty. All other columns must be present.
								See <a href="{{ url_for('info') }}">Help &amp; FAQ</a> for full format details.
							</p>
						</div>
					</div>

					<a href="{{ back_url }}" class="btn app-btn-primary">
						<i class="fa-solid fa-arrow-left me-1"></i> Back to {{ file_type }}
					</a>
				</div>
			</div>
		</div>

	    <footer class="app-footer">
		    <div class="container text-center py-3">
                <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>
    </div>

	<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>
	<script src="{{ url_for('static', filename='assets/js/app.js') }}"></script>
	{% include "loading.html" %}
</body>
</html>
