{{define "rechargeModal"}}
{{/* 金币充值弹窗：GET /api/app/recharge/package/list → coinList */}}
<div class="recharge-modal" data-recharge-modal hidden
  data-unlock-cost="{{if .unlockCost}}{{.unlockCost}}{{else}}0{{end}}"
  data-balance="{{if .balance}}{{.balance}}{{else}}0{{end}}"
>
  <div class="recharge-modal__backdrop" data-recharge-close aria-hidden="true"></div>
  <section class="recharge-modal__panel" role="dialog" aria-modal="true" aria-labelledby="recharge-modal-title" tabindex="-1">
    <div class="recharge-modal__handle" aria-hidden="true"></div>
    <div class="recharge-modal__head">
      <div class="recharge-modal__heading">
        <h2 id="recharge-modal-title">金币充值</h2>
        {{$unlockCost := 0}}{{with .unlockCost}}{{$unlockCost = .}}{{end}}
        {{if gt $unlockCost 0}}
        <p class="recharge-modal__subtitle recharge-modal__subtitle--desktop">本集需 {{$unlockCost}} 金币，当前余额 {{if .balanceText}}{{.balanceText}}{{else}}{{.balance}}{{end}} 金币</p>
        <p class="recharge-modal__subtitle recharge-modal__subtitle--mobile">本集需 {{$unlockCost}} 金币，当前余额 {{if .balanceText}}{{.balanceText}}{{else}}{{.balance}}{{end}} 金币</p>
        {{else}}
        <p class="recharge-modal__subtitle recharge-modal__subtitle--desktop">当前余额 {{if .balanceText}}{{.balanceText}}{{else}}{{.balance}}{{end}} 金币</p>
        <p class="recharge-modal__subtitle recharge-modal__subtitle--mobile">当前余额 {{if .balanceText}}{{.balanceText}}{{else}}{{.balance}}{{end}} 金币</p>
        {{end}}
      </div>
      <div class="recharge-modal__balance" aria-label="当前余额 {{if .balanceText}}{{.balanceText}}{{else}}{{.balance}}{{end}} 金币">
        <span class="recharge-modal__coin recharge-modal__coin--balance" aria-hidden="true"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/coin-star.svg" alt="金币"></span>
        <strong data-recharge-balance>{{if .balanceText}}{{.balanceText}}{{else}}{{.balance}}{{end}}</strong>
      </div>
      <button class="recharge-modal__close" type="button" data-recharge-close aria-label="关闭充值弹窗">
        <img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/close.svg" alt="关闭充值窗口">
      </button>
    </div>

    <div class="recharge-modal__packages" role="group" aria-label="选择充值套餐" data-recharge-packages>
      {{range $i, $pkg := .rechargePackages}}
      <button
        class="recharge-modal__package{{if $pkg.Active}} is-selected{{end}}"
        type="button"
        data-recharge-package
        data-package-id="{{$pkg.ID}}"
        data-price="{{$pkg.PriceText}}"
        data-coins="{{$pkg.TotalCoinText}}"
        data-pay-methods="{{$pkg.PayMethodsJSON}}"
        aria-pressed="{{if $pkg.Active}}true{{else}}false{{end}}"
      >
        <span class="recharge-modal__package-top">
          <span class="recharge-modal__package-name">
            <span class="recharge-modal__coin" aria-hidden="true"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/coin-star.svg" alt="金币"></span>
            {{if $pkg.TotalCoinText}}{{$pkg.TotalCoinText}} 金币{{else}}{{$pkg.Name}}{{end}}
          </span>
          <img decoding="async" loading="lazy" class="recharge-modal__selected-icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/check-circle.svg" alt="已选择">
        </span>
        {{if $pkg.Hint}}<span class="recharge-modal__package-detail">{{$pkg.Hint}}</span>{{end}}
        <strong class="recharge-modal__package-price">¥{{$pkg.PriceText}}</strong>
      </button>
      {{else}}
      <p class="recharge-modal__empty" data-recharge-packages-empty>暂无可购买的金币套餐</p>
      {{end}}
    </div>

    <div class="recharge-modal__methods" role="group" aria-label="选择支付方式" data-recharge-methods>
      {{range $i, $m := .rechargePayMethods}}
      <button
        class="recharge-modal__method{{if $m.Active}} is-selected{{end}}"
        type="button"
        data-recharge-method="{{$m.Type}}"
        aria-pressed="{{if $m.Active}}true{{else}}false{{end}}"
      >
        <span class="recharge-modal__method-check" aria-hidden="true"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/check.svg" alt="安全支付"></span>
        <span class="recharge-modal__method-copy"><span>{{$m.TypeName}}</span><small>即时到账</small></span>
      </button>
      {{else}}
      <p class="recharge-modal__empty" data-recharge-methods-empty>请先选择套餐</p>
      {{end}}
    </div>

    {{$payPrice := "0"}}
    {{range .rechargePackages}}{{if .Active}}{{$payPrice = .PriceText}}{{end}}{{end}}
    <button class="recharge-modal__pay" type="button" data-recharge-pay{{if not .rechargePackages}} disabled{{end}}>立即支付&nbsp; <span data-recharge-amount>¥{{$payPrice}}</span></button>
    <p class="recharge-modal__status" data-recharge-status role="status" hidden></p>
    <div class="recharge-modal__foot">
      <span>支付即表示同意《充值协议》</span>
      {{$appAddr := .appConfig.AppAddr}}
      <a href="{{if $appAddr}}{{$appAddr}}{{else}}/download-app{{end}}"{{if $appAddr}} target="_blank" rel="sponsored nofollow noopener"{{end}}><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/download.svg" alt="下载 App">下载 App 免费看</a>
    </div>
  </section>
</div>
{{if .rechargePackageResponse}}
{{end}}
{{end}}