{{define "body_content"}}
<p class="title is-4">Abos</p>
<p>Hier k&ouml;nnen blablabla...</p>
<div class="columns is-marginless">
  <div class="column is-full"></div>
</div>
{{ if ne .UserName "" }}
{{range .LastMetrics}}
<div class="columns is-vcentered is-marginless">
  <div class="column is-full has-background-primary">
    <span id="alias_{{.Deveui}}" class="is-size-7-mobile is-size-4-tablet">{{.Alias}} (bis 01.01.2099)</span>
    <div class="select is-pulled-right is-vcentered is-size-7-mobile">
      <select class="has-background-light">
        <option>keine</option>
        <option>1 Jahr</option>
        <option>2 Jahre</option>
        <option>3 Jahre</option>
      </select>
    </div>
  </div>
</div>
<div class="columns">
  <div class="column is-full"></div>
</div>
{{end}}
<div>
<button id="pay-button" class="button is-success">Pay</button>
</div>

<script src="https://js.stripe.com/v3/"></script>

<script>

var stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg');

$("#pay-button").click(function() {
  stripe.redirectToCheckout({
    sessionId: '{{.CheckoutSessionID}}'
  }).then(function (result) {
    // If `redirectToCheckout` fails due to a browser or network
    // error, display the localized error message to your customer
    // using `result.error.message`.
  });
});
</script>

{{ else }}
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
{{end}}
{{end}}