{{define "pagename"}}{{text (printf "page.%v" .)}}{{end}}
{{define "pagepath"}}{{if eq . "home"}}/{{else}}/ui/{{.}}{{end}}{{end}}
{{define "pagelink"}}<a href="{{template "pagepath" .}}">{{template "pagename" .}}</a>{{end}}
{{define "pageitem"}}<li {{if eq .Current .Page}}class="active"{{end}}>{{template "pagelink" .Page}}</li>{{end}}
{{define "head"}}
<head>
<meta charset="utf-8" />
<title>{{template "pagename" .}} - BitWrk Client</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="/css/client.css" rel="stylesheet" />
<link rel="shortcut icon" href="/img/favicon.ico" />
<link rel="icon" href="/img/favicon.ico" />
</head>
{{end}}
{{define "js"}}
<script src="/js/jquery-1.10.2.js" ></script>
<script src="/js/jquery.cookie.js" ></script>
<script src="/js/jquery.form.js" ></script>
<script src="/js/bootstrap.min.js" ></script>
<script src="/js/js-iso8601.js" ></script>
<script src="/js/qrcode.js" ></script>
<script src="/js/accountinfo.js" ></script>
<script src="/js/mandate-dialog.js" ></script>
<script src="/js/iframe-dialog.js" ></script>
<script src="/js/activity.js" ></script>
<script src="/js/workers.js" ></script>
<script src="/js/mandates.js" ></script>
<script src="/js/motd.js" ></script>
<script>
function showAccountInfo() {
	showIframeDialog('{{.ServerURL}}account/{{.ParticipantId}}');
}
$(document).ready(function() {
	// correctly hide alerts
	$("[data-hide]").on("click", function(){
		$(this).closest("." + $(this).attr("data-hide")).hide();
	});
	setInterval(updateAccountInfo, 30000);
	updateAccountInfo();
	$("#motd").hide()
	var updateMOTD = newMessageUpdater($("#motd"), $("#motd-content"));
	setInterval(updateMOTD, 60 * 60 * 1000);
	updateMOTD();
	$("#alertbox").hide()
});
{{if .Page | eq "home"}}
$(document).ready(function() {
	setInterval(function() {updateActivities("{{.ServerURL}}");}, 500);
	updateActivities("{{.ServerURL}}");
	setInterval(updateWorkers, 500);
	updateWorkers();
	setInterval(updateMandates, 500);
	updateMandates();
});
{{else if .Page | eq "account"}}
$(document).ready(function() {
	setInterval(updateDepositInfo, 30000)
	updateDepositInfo()
	var options = {
		success: function() {
			updateDepositInfo();
		},
		error: function(xhr) {
			showAlertBox($('#alertbox'), $('#alertbox-content'), 'alert-danger', xhr.responseText);
		}
	};
	$('#requestDepositAddressForm').ajaxForm(options);
})
{{end}}
</script>
{{end}}{{/*define "js"*/}}
<!doctype html>
<html>
{{template "head" .Page}}
<body>
{{template "js" .}}
<header>
<div id="account-info">
<div class="logo"><a href="http://bitwrk.net/" rel="noreferrer"><img src="/img/bitwrk.png"></a></div>
<div class="balance">
<div class="blocked">+Blocked <span></span></div>
<div class="available"><span></span></div>
</div>
<div class="participant">Welcome to BitWrk! Your account ID is:
  <br><a onclick="showAccountInfo()">{{.ParticipantId}}</a>
  <br>You are connected to: {{.ServerURL}}
</div>
<div style="clear:both;display:block"></div>
</div>
<nav>
<ul><!--
-->{{template "pageitem" dict "Current" .Page "Page" "home"}}<!--
-->{{template "pageitem" dict "Current" .Page "Page" "account"}}<!--
--></ul>
</nav>
</header>
<footer>
<div id="motd" class="alert alert-dismissable alert-info">Message from server:
<span id="motd-content"></span>
<button type="button" class="close" data-hide="alert" aria-hidden="true">&times;</button>
</div>
<div id="alertbox" class="alert alert-dismissable alert-info">
<span id="alertbox-content"></span>
<button type="button" class="close" data-hide="alert" aria-hidden="true">&times;</button>
</div>
</footer>
{{if .Page | eq "home"}}
<div class="col-sm-4"><h3>Activities</h3><div id="activities"></div></div>
<div class="col-sm-4"><h3>Workers</h3><div id="workers"></div></div>
<div class="col-sm-4"><h3>Mandates</h3><div id="mandates"></div></div>
<div id="mandateModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST">
<input type="hidden" name="action" value="permit" />
<input type="hidden" name="type" />
<input type="hidden" name="articleid" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Permit trade...</h4>
The BitWrk client is asking for your permission to perform a trade.</div>
<div id="mandateModalBody" class="modal-body">
<table>
<tr>
<th>Type</th>
<td colspan="2"><span class="text-info" id="perm-type-span"
>_BUY_</span> of <span class="text-info" id="perm-articleid-span"
>_ARTICLEID_</span></td>
</tr>
<tr>
<th>Price</th>
<td><input type="text" name="price" value="BTC 0.0001" /></td>
</tr>
<tr>
<th><label><input type="checkbox" name="usetradesleft"/> Valid for up to</label></th>
<td><input type="number" name="tradesleft" value="100" min="1"/> trades.</td>
</tr>
<tr>
<th><label><input type="checkbox" name="usevaliduntil"/> Valid for</label></th>
<td><input type="number" name="validminutes" value="20" min="1"/> minutes.</td>
</tr>
<tr>
<td colspan="3" class="text-muted">If none of the above options is checked, exactly one trade will be permitted.</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-target="#mandateModal">Cancel</button>
<input type="submit" class="btn btn-primary"/>
</div><!-- modal-footer -->
</form>
</div><!-- modal-body -->
</div><!-- modal-dialog -->
</div><!-- modal -->
{{else if .Page | eq "account"}}
<div class="col-md-4 col-md-push-8">
<div class="panel panel-default">
<div class="panel-heading">General Information</div>
<div class="panel-body">
<p>You are accessing account <a href="#" onclick="showAccountInfo()">{{.ParticipantId}}</a>
on BitWrk service <em class="btn btn-default btn-xs">{{.ServerURL}}</em>.</p>
<p>BitWrk is currently in development. Your feedback is highly appreciated!
You may write an email to <a href="mailto:info@bitwrk.net?subject=BitWrk%20feedback&body=Hi%20Jonas,%0A">info@bitwrk.net</a>
or submit a <a href="https://github.com/indyjo/bitwrk/issues" target="_blank">bug report</a>.</p>
<p>Please see <a href="http://bitwrk.net/" target="_blank">bitwrk.net</a> for further information.</p>
</div>
</div>
</div>
<div class="col-md-8 col-md-pull-4">
<div class="panel panel-default">
<div class="panel-heading">Deposits</div>
<div class="panel-body">
<p class="lead">In order to buy on BitWrk, you need to deposit some amount of Bitcoin.</p>
<p class="help-block">Deposits must be BTC 0.001 minimum. Smaller deposits will be ignored.</p>
<form id="requestDepositAddressForm" action="/requestdepositaddress" method="post" role="form" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Deposit address:</label>
<div class="col-md-9">
<!-- JavaScript makes one visible, the other one invisible -->
<div class="depositaddress-yes hidden"><p class="form-control-static"><a href="#" class="depositaddress text-info">_DEPOSIT_ADDRESS_</a></p></div>
<div class="depositaddress-no hidden"><p class="form-control-static text-warning">There is currently no deposit address associated with your account.</p></div>
</div>
</div><!-- form-group -->
<div class="form-group depositaddress-yes hidden">
<label class="col-md-3 control-label">QR-Code:</label>
<div class="col-md-9">
<div class="depositaddress-qr"></div>
</div>
</div><!-- form-group -->
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<div class="depositaddressrequest-yes hidden"><p class="form-control-static text-success">A new deposit address has been requested.</p></div>
<div class="depositaddressrequest-no hidden"><button type="submit" class="btn btn-default">Request a new deposit address</button></div>
</div>
</div>
</form>
</div>
</div><!-- panel -->
<div class="panel panel-default">
<div class="panel-heading">Withdrawals</div>
<div class="panel-body">
<div class="alert alert-warning" role="alert">This functionality hasn't been implemented yet.</div>
<p class="lead">Withdraw money from BitWrk into your private Bitcoin wallet.</p>
<p class="help-block">
You may withdraw Bitcoin once every 24 hours.
Withdrawals must be BTC 0.001 minimum.
</p>
<form method="post" role="form" class="form-horizontal">
<input type="hidden" name="action" value="requestwithdrawal" />
<div class="form-group">
<label for="withdrawalAmount" class="col-md-3 control-label">Withdrawal amount:</label>
<div class="col-md-9">
<input id="withdrawalAmount" type="text" name="amount" class="form-control" value="BTC 0.01"/>
</div>
</div>
<div class="form-group">
<label for="withdrawalDestinationAddress" class="col-md-3 control-label">Destination Address:</label>
<div class="col-md-9">
<input id="withdrawalDestinationAddress" type="text" name="destaddress" class="form-control" value="{{.ParticipantId}}"/>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<input class="btn btn-default" type="submit" value="Withdraw to this address">
</div>
</div>
</form>
</div><!-- panel-body -->
</div><!-- panel -->
</div><!-- col-md-8 -->
{{end}}
<div id="iframeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Account/Bid/Transaction Detail</h4>This dialog shows detailed information about bids, transactions and accounts.</div>
<div class="modal-body">
<iframe id="iframe" src="about:blank" width="100%" height="360" style="border: 0px">
<p>Your web browser must be able to show &lt;iframe&gt; elements for this to work.
</iframe>
</div>
</div><!-- modal-body -->
</div><!-- modal-dialog -->
</div><!-- modal -->
</body>
</html>
