{{template "header" .}}
<div class="form-card" style="max-width:640px">
  <p class="kicker">Checkout</p>
  <h1>Payment</h1>
  {{if .Error}}<div class="alert">{{.Error}}</div>{{end}}
  {{if .OK}}<div class="ok">{{.OK}}</div>{{end}}
  {{if .Issued.Key}}
    <p class="meta">Plan: {{.Issued.Plan}} · {{if .Issued.Expires}}expires {{.Issued.Expires}}{{else}}never expires{{end}}</p>
    <label>Your license key</label>
    <textarea rows="5" readonly onclick="this.select()">{{.Issued.Key}}</textarea>
    <p class="meta">Copy the whole key. Open <a href="/license">License</a>, paste, Activate.</p>
    {{if .License.Pro}}
    <p><a class="btn btn-green" href="/party">Watch together</a>
       <a class="btn btn-outline" href="/">Home</a></p>
    {{else}}
    <p><a class="btn btn-green" href="/license">Activate now</a></p>
    {{end}}
  {{else}}
    <p class="meta">If you just paid, wait a few seconds and refresh. Stripe needs the secret key in Admin; PayPal needs Client ID + Secret; Coinbase needs the Commerce API key plus a <code>?charge=</code> return URL.</p>
    <p><a class="btn btn-outline" href="/license">License page</a></p>
  {{end}}
</div>
{{template "footer" .}}