115 lines
5.1 KiB
HTML
115 lines
5.1 KiB
HTML
{{ define "subscription" }}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Subscription — enkly</title>
|
|
<link rel="shortcut icon" type="image/x-icon" href="/static/img/enkly-logo.png" />
|
|
<link rel="stylesheet" href="/static/css/style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="billing-shell">
|
|
<div class="billing-topbar">
|
|
<div class="brand-lockup">
|
|
<span class="logo-dot"></span>
|
|
<h1>enkly</h1>
|
|
</div>
|
|
<a href="/" class="billing-back">← Back to chat</a>
|
|
</div>
|
|
|
|
<div class="billing-card">
|
|
<h2>Subscription</h2>
|
|
<p class="auth-subtitle">
|
|
You're on the <strong>{{ .CurrentName }}</strong> plan.
|
|
{{ if eq .Status "past_due" }}<span class="plan-status plan-status-warn">Payment past due — please update your card.</span>{{ end }}
|
|
{{ if eq .Status "canceled" }}<span class="plan-status">Your last paid subscription was cancelled.</span>{{ end }}
|
|
{{ if .CancelAtPeriodEnd }}
|
|
<span class="plan-status plan-status-warn">
|
|
Cancels at the end of the current billing period{{ if not .CurrentPeriodEnd.IsZero }} ({{ .CurrentPeriodEnd.Format "Jan 2, 2006" }}){{ end }}.
|
|
</span>
|
|
{{ else if not .CurrentPeriodEnd.IsZero }}
|
|
<span class="plan-status">Renews {{ .CurrentPeriodEnd.Format "Jan 2, 2006" }}.</span>
|
|
{{ end }}
|
|
</p>
|
|
|
|
<div class="usage-card {{ if .AtLimit }}usage-at{{ else if .NearLimit }}usage-near{{ end }}">
|
|
<div class="usage-head">
|
|
<span>Today's messages</span>
|
|
{{ if .Unlimited }}
|
|
<span><strong>{{ .UsedToday }}</strong> sent · unlimited</span>
|
|
{{ else }}
|
|
<span><strong>{{ .UsedToday }}</strong> / {{ .DailyLimit }}</span>
|
|
{{ end }}
|
|
</div>
|
|
{{ if not .Unlimited }}
|
|
<div class="usage-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ .UsagePercent }}">
|
|
<div class="usage-fill" style="width: {{ .UsagePercent }}%"></div>
|
|
</div>
|
|
{{ end }}
|
|
{{ if .AtLimit }}
|
|
<p class="usage-note">You've used all of today's messages. Upgrade below to keep chatting — the count resets daily (UTC).</p>
|
|
{{ else if .NearLimit }}
|
|
<p class="usage-note">You're close to today's limit. Upgrade below for more room.</p>
|
|
{{ end }}
|
|
</div>
|
|
|
|
{{ if .Error }}<div class="auth-message error">{{ .Error }}</div>{{ end }}
|
|
{{ if .Message }}<div class="auth-message info">{{ .Message }}</div>{{ end }}
|
|
|
|
<div class="plan-grid">
|
|
{{ $csrf := .CSRFToken }}
|
|
{{ range .Plans }}
|
|
<div class="plan-card {{ if .IsCurrent }}plan-card-current{{ end }}{{ if .Popular }} plan-card-popular{{ end }}">
|
|
{{ if .IsCurrent }}<div class="plan-badge">Current plan</div>{{ else if .Popular }}<div class="plan-badge plan-badge-popular">Most popular</div>{{ end }}
|
|
<div class="plan-card-name">{{ .Name }}</div>
|
|
<div class="plan-card-price">
|
|
{{ if eq .PriceEUR 0 }}€0{{ else }}€{{ .PriceEUR }}{{ end }}
|
|
<span class="plan-card-period">/month</span>
|
|
</div>
|
|
<ul class="plan-card-features">
|
|
{{ if eq .DailyMessageLimit 0 }}
|
|
<li>Unlimited messages/day</li>
|
|
{{ else }}
|
|
<li>{{ .DailyMessageLimit }} messages/day</li>
|
|
{{ end }}
|
|
{{ if .Multiplier }}<li class="plan-perk">{{ .Multiplier }}</li>{{ end }}
|
|
<li>Full tool-using agent access</li>
|
|
<li>File upload & download</li>
|
|
</ul>
|
|
|
|
{{ if .IsCurrent }}
|
|
<button class="auth-btn plan-btn" type="button" disabled>Current plan</button>
|
|
{{ else if not .Checkoutable }}
|
|
<button class="auth-btn plan-btn auth-btn-secondary" type="button" disabled title="{{ .UnavailableReason }}">Unavailable</button>
|
|
{{ if .UnavailableReason }}<p class="plan-unavailable-reason">{{ .UnavailableReason }}</p>{{ end }}
|
|
{{ else }}
|
|
<form method="post" action="/subscription/checkout" class="plan-form">
|
|
<input type="hidden" name="csrf_token" value="{{ $csrf }}" />
|
|
<input type="hidden" name="plan" value="{{ .Plan }}" />
|
|
<button class="auth-btn plan-btn" type="submit">
|
|
{{ .Action }}
|
|
</button>
|
|
</form>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
{{ if .HasBillingPortal }}
|
|
<form method="post" action="/subscription/portal" class="billing-portal-form">
|
|
<input type="hidden" name="csrf_token" value="{{ .CSRFToken }}" />
|
|
<button class="auth-btn auth-btn-secondary" type="submit">Manage billing & invoices</button>
|
|
</form>
|
|
{{ end }}
|
|
|
|
<p class="billing-footnote">
|
|
Plans renew monthly and you can cancel any time from “Manage billing & invoices” — you keep your plan until the end of the period you paid for.<br />
|
|
Payments are processed by Stripe. enkly never sees or stores your card details.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{{ end }}
|