{{define "user/plan.html"}}
{{template "user/layout_head" .}}
{{$p := index .Data "Plan"}}
{{template "user_pagehead" (dict "Icon" "bx-purchase-tag" "Title" (T "user.plan.title") "Desc" (T "user.plan.desc"))}}
<div class="card border-0 shadow-sm p-3 mb-3" style="max-width:36rem">
  <div class="mb-2">{{T "user.plan.current"}}<strong>{{$p.PlanID}}</strong>
    {{if $p.IsExpired}}<span class="badge text-bg-warning">{{T "user.plan.expired_prefix"}}{{$p.EffectivePlanID}}</span>{{end}}
  </div>
  <div class="small text-muted mb-1">{{T "user.plan.quota_sites"}} {{$p.MaxSites}} · {{T "user.plan.quota_sessions"}} {{$p.MaxSessionsMonth}} · {{T "user.plan.quota_history"}} {{$p.HistoryRetentionDays}} {{T "user.plan.days"}}</div>
  {{if gt $p.PlanExpiresAt 0}}
  <div class="small mb-2">{{T "user.plan.expires"}}{{unixTime $p.PlanExpiresAt}}</div>
  {{end}}
  <div class="d-flex flex-wrap gap-2">
    <button type="button" class="btn btn-primary btn-sm" id="btnTrial">{{T "user.plan.trial_btn_prefix"}} {{index .Data "TrialDays"}} {{T "user.plan.trial_btn_suffix"}}</button>
    {{if .IsPro}}
    <a class="btn btn-outline-secondary btn-sm" href="/pricing">{{T "user.plan.pricing"}}</a>
    <a class="btn btn-outline-primary btn-sm" href="/user/orders">{{T "user.plan.orders"}}</a>
    {{end}}
  </div>
  <div id="planMsg" class="small mt-2 text-success"></div>
</div>
<script>
$('#btnTrial').on('click', function () {
  $.post('/api/user/trial/start', function (res) {
    if (res.success) {
      $('#planMsg').text(res.data.message || {{jsString (T "user.plan.ok")}});
      setTimeout(function () { location.reload(); }, 800);
    } else {
      $('#planMsg').removeClass('text-success').addClass('text-danger').text(res.message || {{jsString (T "user.plan.fail")}});
    }
  });
});
</script>
{{template "user/layout_foot" .}}
{{end}}