{{define "header"}}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<!-- below line adds jQuery to the page -->
<!-- <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> -->
<script type='text/javascript' src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
<title>goCake - {{.Title}}</title>
</head>
<body>
  {{template "nav" .}}
{{end}}

{{define "nav"}}
<!-- iOS fix -->
<meta name='viewport' content='initial-scale=1, viewport-fit=cover, width=device-width'>
<nav>
  <ul>
    {{ if .Title}}
    <!-- set current tab active, according to title -->
    <li><a {{ if (eq .Title "Home") }}class="active"{{end}} href="/">Home</a></li>
    <!-- <li><a {{ if (eq .Title "Rewards") }}class="active"{{end}} href="rewards">Monthly Rewards</a></li> -->
    <!-- <li><a {{ if (eq .Title "Graphs") }}class="active"{{end}} href="graphs">Graphs</a></li> -->
    <li><a {{ if (eq .Title "Cake") }}class="active"{{end}} href="rewards">Pool by Cake Rewards</a></li>
    <li><a {{ if (eq .Title "Kraken") }}class="active"{{end}} href="kraken">Kraken Rewards</a></li>
    {{ end }}
  </ul>
</nav>

{{end}}

{{define "footer"}}
<div class="footer">
  &hearts; <a href="https://github.com/thunderstorm99/goCoinAnalyzer">Source Code</a> &hearts;
</div>
</body>
</html>
{{end}}

{{define "barGraph"}}
<div class="container">
  <div class="item" id="chart"></div>
</div>
<script type="text/javascript">
  "use strict";
  var rewardChart = echarts.init(document.getElementById('chart'), "white");
  var rewardOptions = {
    title: {"text":"Monthly Rewards","subtext":"{{.Currency}}"},
    tooltip: {"show":true},
    legend: {"show":true},
    dataZoom:[{"type":"inside"}],
    xAxis: {{ template "xAxis" . }}
    yAxis: [{}],
    series: [{{template "series" . }}],
    color: [{{ range $color := .Colors }}"{{ $color }}",{{ end }}"gray"],
  };
  rewardChart.setOption(rewardOptions);
</script>
{{ end }}

{{define "xAxis"}}
[{"data":[ {{ range $month, $amount := .Rewards.Staking}}"{{ $month }}",{{ end }}]}],
{{end}}

{{define "series"}}
{{if .Lending}}
// Lending coins
{"name":"Lapis reward","type":"bar","stack":"stackA","waveAnimation":false,"data":[
{{ range $month, $amount := .Rewards.Lapis}}{"value": "{{ $amount }}" },{{ end }}
]},
{"name":"Referral reward","type":"bar","stack":"stackA","waveAnimation":false,"data":[
{{ range $month, $amount := .Rewards.Referral}}{"value": "{{ $amount }}" },{{ end }}
]},
{"name":"Cumulative","type":"bar","stack":"stackB","waveAnimation":false,"data":[
{{ range $month, $amount := .CumulativeRewards}}{"value": "{{ $amount }}" },{{ end }}
]},
{"name":"Deposits","type":"bar","stack":"stackC","waveAnimation":false,"data":[
{{ range $month, $amount := .Rewards.Deposits}}{"value": "{{ $amount }}" },{{ end }}
]},
{{else}}
// Stakeable coins
{"name":"Staking Rewards","type":"bar","stack":"stackA","waveAnimation":false,"data":[
{{ range $month, $amount := .Rewards.Staking}}{"value": "{{ $amount }}" },{{ end }}
]},
{"name":"Lapis DFI Bonus","type":"bar","stack":"stackA","waveAnimation":false,"data":[
{{ range $month, $amount := .Rewards.LapisDFI}}{"value": "{{ $amount }}" },{{ end }}
]},
{"name":"Confectionery Lapis DFI Bonus","type":"bar","stack":"stackA","waveAnimation":false,"data":[
{{ range $month, $amount := .Rewards.Confectionery}}{"value": "{{ $amount }}" },{{ end }}
]},
{"name":"Airdrop","type":"bar","stack":"stackA","waveAnimation":false,"data":[
{{ range $month, $amount := .Rewards.Airdrop}}{"value": "{{ $amount }}" },{{ end }}
]},
{"name":"Cumulative","type":"bar","stack":"stackB","waveAnimation":false,"data":[
{{ range $month, $amount := .CumulativeRewards}}{"value": "{{ $amount }}" },{{ end }}
]},
{"name":"Deposits","type":"bar","stack":"stackC","waveAnimation":false,"data":[
{{ range $month, $amount := .Rewards.Deposits}}{"value": "{{ $amount }}" },{{ end }}
]},
{{end}}
{{end}}

{{define "table"}}
<table class="table">
<thead>
  <tr>
    <th>Month</th>
    <th>{{.Currency}}</th>
  </tr>
</thead>
<tbody>
  {{ range $month, $amount := .Rewards.Staking}}
  <tr>
    <td class="left">{{ $month }}</td>
    <td class="right">{{ $amount }}</td>
  </tr>
  {{ end }}
</tbody>
</table>
{{end}}