<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <title>{{ block "title" . }}JuicePay by Utiliflex{{ end }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="theme-color" content="{{ block "chromeColor" . }}#8DD5F0{{ end }}">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/main.css">
    {{ block "portalCSS" . }}{{ end }}
    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
    <!--[if IE]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr.min.js"></script>
    <![endif]-->
    <script defer type="text/javascript" src="/static/js/juicepay.js"></script>
    {{ with .PageItems.Chart }}
    <script type="text/javascript" src="/static/js/amcharts/amcharts.js"></script>
    <script type="text/javascript" src="/static/js/amcharts/serial.js"></script>
    <script  type="text/javascript" src="/static/js/amcharts/themes/light.js"></script>
    <script type="text/javascript">
      AmCharts.addInitHandler(function(chart) {
        for(var i = 0; i < chart.graphs.length; i++) {
          var graph = chart.graphs[i];
          var colorKey = "colorkey";
          graph.lineColorField = colorKey;
          graph.fillColorsField = colorKey;
          for(var x = 0; x < chart.dataProvider.length; x++) {
            chart.dataProvider[x][colorKey] = {{ block "brandingColor" . }}"#8cc63f"{{ end }};
          }
        }
      }, ["serial"]);
      var chart = AmCharts.makeChart("chartdiv", {{ marshal $.PageItems.Chart }});
    </script>
    {{ end }}
  </head>
  <body>
    <header>
      <nav class="navbar navbar-light bg-faded">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
          &#9776;
        </button>
        <a class="navbar-brand" href="/">{{ block "branding" . }}JuicePay{{ end }}</a>
        <div class="hidden-sm-up clearfix"><br /></div>
        <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
          <ul class="nav navbar-nav">
            {{ if .LoggedIn }}
            <li class="nav-item">
              <a class="nav-link" href="/overview"><i class="fa fa-user" aria-hidden="true"></i> My Account</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/history"><i class="fa fa-area-chart" aria-hidden="true"></i> History</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/settings"><i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
            </li>
            {{ if .PageItems.QuickPay }}
            <li class="nav-item">
              <a class="nav-link" href="/purchase"><i class="fa fa-credit-card" aria-hidden="true"></i> Buy Power</a>
            </li>
            {{ end }}
            <li class="nav-item">
              <a class="nav-link" href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Log Out</a>
            </li>
            {{ else }}
            <li class="nav-item">
              <a class="nav-link" href="/"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/help"><i class="fa fa-info" aria-hidden="true"></i> About</a>
            </li>
            {{ end }}
          </ul>
        </div>
      </nav>
    </header>
    <div class="container-fluid">
      {{ with .PageItems.SuccessMessage }}
      <div class="alert alert-success alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        {{ $.PageItems.SuccessMessage }}
      </div>
      {{ end }}
      {{ with .PageItems.ErrorMessage }}
      <div class="alert alert-danger alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        {{ $.PageItems.ErrorMessage }}
      </div>
      {{ end }}
      {{ template "content" . }}
    </div>
    <footer>
      {{ block "footer" . }}{{ end }}
      <small><p class="text-xs-center">Powered By Utiliflex</p></small>
    </footer>
  </body>
</html>
