<!DOCTYPE HTML>
<html>

	{% include 'includes/head.html' %}

	<body class="is-preload landing">
		<div id="page-wrapper">

				<header id="header">
					<h1 id="logo"><a href="/">{{ config.SITE_NAME }}</a></h1>
					<nav id="nav">
						<ul>
							<li><a href="/">Home</a></li>
							<li><a href="/#search" class="button primary">Search</a></li>
						</ul>
					</nav>
				</header>

				<section id="banner">
					<div class="content">
						<header>
							<h2>*nero Swap</h2>
							<p>Swap between Wownero and Monero<br />
							anonymously, quickly, and hassle-free.</p>
						</header>
						<span class="image"><img src="/static/images/monero-logo.png" alt="" id="logos"/></span>
					</div>
					<a href="#swap" class="goto-next scrolly">Next</a>
				</section>

				<section id="swap" class="wrapper style2 special fade">
					<div class="container">
						<header>
							<h2>Start a Swap</h2>
							<p></p>
							<p class="small">
								{{ config.SWAP_FEE_PERCENT }}% fee,
								${{ config.SWAP_MIN_USD }} minimum,
								${{ config.SWAP_MAX_USD }} maximum.
							</p>
							<p class="smalls">
								Swaps may take some time to complete if wallet balances are low as I will need to refill them.
								<br />Please use with caution and only provide wallet addresses you own.
							</p>
						</header>
						<!-- todo - secure forms with csrf protection -->
						<form method="get" action="/swap" class="cta" id="swapform">
							<div class="row gtr-uniform gtr-50">
								<div class="col-5 col-5-xsmall">
									<label for="amount"><img src="/static/images/wownero-logo.png" width=100 id="swap_source_logo"><br />Enter amount to swap</label>
									<input type="text" name="send_amount" id="send_amount" placeholder="..." />
								</div>
								<div class="col-2 col-2-xsmall">
									<i class="fa fa-exchange-alt fa-4x white swap-arrows" id="switch_source_dest"></i>
									<i class="fa fa-circle-notch fa-2x fa-spin loading hidden"></i>
								</div>
								<div class="col-5 col-5-xsmall">
									<label for="amount"><img src="/static/images/monero-logo.png" width=100 id="swap_destination_logo"><br />View amount to receive</label>
									<input type="text" name="receive_amount" disabled id="receive_amount" />
								</div>
								<div class="col-12 col-12-xsmall">
									<input type="text" name="wow_address" placeholder="WOW Wallet Address" />
								</div>
								<div class="col-12 col-12-xsmall">
									<input type="text" name="xmr_address" placeholder="XMR Wallet Address" />
								</div>
								<div class="col-12 col-12-xsmall">
									<input type="submit" value="Start Swap" class="fit primary" />
								</div>
								<input type="hidden" name="wow_to_xmr" id="wow_to_xmr" value="true" />
								<div class="col-12 col-12-xsmall">
									<p>
										Need a wallet?
										<a href="https://wownero.org/#wallets" target=_blank class="white">WOW</a> -
										<a href="https://www.getmonero.org/downloads/" target=_blank class="white">XMR</a>
									</p>
								</div>
							</div>
						</form>
						<div class="col-12 col-12-xsmall">
							<p class="small" id="total">Swap value: ?</p>
							<p class="small" id="service_fee">Service fee: ?</p>
							<p class="small" id="wow_price">WOW price: ?</p>
							<p class="small" id="xmr_price">XMR price: ?</p>
						</div>
					</div>
				</section>

				<section id="search" class="wrapper style1 special fade-down">
					<div class="container">
						<header class="major">
							<h2>Search a Swap</h2>
							<p>Already started a swap and want to check on it?<br /> Look it up using the form below.</p>
						</header>
						<div class="box alt">
							<div class="row gtr-uniform">
								<form method="get" action="/search" class="cta">
									<div class="row gtr-uniform gtr-50">
										<div class="col-8 col-8-xsmall">
											<input type="text" name="swap_id" placeholder="Swap ID" />
										</div>
										<div class="col-4 col-4-xsmall">
											<input type="submit" value="Search" class="fit primary" />
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</section>

				{% include 'includes/footer.html' %}

		</div>

		{% include 'includes/scripts.html' %}

	</body>
</html>
