{{ define "content" }}
<div class="row flex-container">
  <div class="{{ overviewBlocksClass (.PageItems.JuiceCards) }} flex-item">
    <div class="card">
      <h3 class="card-header">{{ block "AccountBalance" . }}Acccount Balance{{ end }}</h3>
      <div class="card-block">
        <div class="table-responsive">
          <table class="table table-reflow table-sm">
            <thead>
              <tr>
                {{ if not ((eq $.PageItems.Com "STS") or (eq $.PageItems.Com "none")) }}
                <th>kWh Credit</th>
                <th>Estimated Remaining</th>
                {{ end }}
                {{ if not (eq $.PageItems.CurrencyWallet 0.00) }}
                  <th>Currency Balance</th>
                {{ end }}
                <th>Arrears Owed</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                {{ if not ((eq $.PageItems.Com "STS") or (eq $.PageItems.Com "none")) }}
                <td>{{ $.PageItems.KWHCredit }} kWh</td>
                <td>{{ $.PageItems.ESTDays }} days</td>
                {{ end }}
                {{ if not (eq $.PageItems.CurrencyWallet 0.00) }}
                  <td>{{ $.PageItems.PreMoney }}{{ $.PageItems.CurrencyWallet | printf "%6.2f" }}{{ $.PageItems.PostMoney }}</td>
                {{ end }}
                <td>{{ $.PageItems.PreMoney }}{{ $.PageItems.ArrearsOwed | printf "%6.2f" }}{{ $.PageItems.PostMoney }}</td>
              </tr>
            </tbody>
          </table>
          {{ if .PageItems.QuickPay }}
          <a href="/purchase" class="btn btn-primary"><i class="fa fa-credit-card" aria-hidden="true"></i> Buy Power</a>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
  {{ if .PageItems.JuiceCards }}
  {{ block "JuiceCardAuth" . }}
  <div class="{{ overviewBlocksClass (.PageItems.JuiceCards) }}">
    <form method="post" action="/juicecard">
      <div class="card">
        <h3 class="card-header">Redeem {{ block "JuiceCardVoucher" . }}Juice Card{{ end }}</h3>
        <div class="card-block">
          <p class="card-text">Redeem a {{ template "JuiceCardVoucher" . }} for your account.</p>
          <div class="form-group">
            <label for="JuiceCard">{{ block "JuiceCardNumber" . }}JuiceCard{{ end }} Number</label>
            <input type="text" name="JuiceCard" id="JuiceCard" class="form-control" aria-describedby="juicecardHelp" placeholder="{{ block "JuiceCardNumberPH" . }} Enter JuiceCard Number {{ end }}">
            <small id="juicecardHelp" class="form-text text-muted">{{ block "JuiceCardVoucherHelp" . }}This is your scratch off JuiceCard number or voucher
{{ end }}</small>
          </div>
        {{ with .Message }}
        <div class="alert alert-info alert-dismissable fade in" role="alert">
          {{ $.Message }}
        </div>
        {{ end }}
        </div>
        <div class="card-footer">
          <button type="submit" class="btn btn-primary disabled-btn" disabled>Redeem</button>
          <!--<a href="#" class="card-link">About Juice Cards?</a>-->
        </div>
      </div>
    </form>
  </div>
  {{ end }}
  {{ end }}
  <div class="{{ overviewBlocksClass (.PageItems.JuiceCards) }} flex-item">
    <div class="card">
      <h3 class="card-header">{{ block "AccountInfo" . }}Account Info{{ end }}</h3>
      <div class="card-block">
        <address>
          <strong>{{ $.PageItems.Name }}</strong><br />

          {{ $.PageItems.LocAddress1 }}<br />

          {{ with .PageItems.LocAddress2 }}
            {{ $.PageItems.LocAddress2 }}<br />
          {{ end }}

          <br />

          {{ with .PageItems.Account }}
            <strong>{{ block "JuiceAccount" . }}Account{{ end }} #:</strong> {{ $.PageItems.Account }}<br />
          {{ end }}

          {{ block "CustomAccount" . }}
          {{ with .PageItems.Contract }}
            <strong>Contract #:</strong> {{ $.PageItems.Contract }}<br />
          {{ end }}

          {{ with .PageItems.LocName }}
            <strong>Location Name:</strong> {{ $.PageItems.LocName }}<br />
          {{ end }}
          {{ end }}

          <br /><br />
          <h4>Your Meters</h4>
          Meter #: {{ $.PageItems.SerialNumber }}
        </address>
      </div>
    </div>
  </div>
</div>
<div class="row">
  {{ if not ((eq $.PageItems.Com "STS") or (eq $.PageItems.Com "none")) }}
  <div class="col-xs-12">
    <div class="card">
      <h3 class="card-header text-xs-center">Recent Energy Usage</h3>
      <div class="card-block">
        <div id="chartdiv"></div>
      </div>
    </div>
  </div>
  {{ else if eq .PageItems.Com "STS" }}
  <div class="col-xs-12">
    <div class="card">
      <h3 class="card-header text-xs-center">Recent Purchases</h3>
      <div class="card-block">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Purchase Date</th>
              <th>Meter</th>
              <th>Token</th>
              <th>Units</th>
              <th>Transaction Type</th>
              <th>Arrears</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
            {{ range .PageItems.Transactions }}
            <tr>
              <td>{{ .Created | formatDate }}</td>
              <td>{{ .SerialNumber }}</td>
              <td>{{ .STSToken }}</td>
              <td>{{ .Units }} {{ .Unit }}</td>
              <td>{{ .Type }}</td>
              <td>{{ $.PageItems.PreMoney }}{{ .Arrears }}{{ $.PageItems.PostMoney }}</td>
              <td>{{ $.PageItems.PreMoney }}{{ .Amount }}{{ $.PageItems.PostMoney }}</td>
            </tr>
            {{ end }}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {{ end }}
</div>
{{ end }}
