{layout layout}
<link rel="stylesheet" href="/plugin/member/static/member-system.css">
<link rel="stylesheet" href="/plugin/member/static/vip.css">
<link rel="stylesheet" href="/plugin/member/static/member.css">
<section class="container" style="padding:28px 16px 48px">
  <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px">
    <h1 style="font-size:22px;font-weight:500;margin:0">{lang vip.orders}</h1>
    <a class="btn" href="{$entry_prefix}/member/vip">返回 VIP 中心</a>
  </div>

  {if !empty($list.items)}
  <div class="ms-card">
    <div class="ms-card-body">
      {loop $list.items as $o}
      <div class="vip-row">
        <div class="vip-row-main">
          <div class="vip-row-title">{$o.plan_name}</div>
          <div class="vip-row-meta">
            {$o.created_at_format}
            · 支付 {if $o.pay_currency == 'balance'}¥{$o.price_text}{elseif $o.pay_currency == 'points'}{$o.pay_amount} 积分{else}免费{/if}
          </div>
          {if !empty($o.remark)}<div class="vip-row-meta">{$o.remark}</div>{/if}
        </div>
        <div class="vip-row-status vip-status-{$o.status}">{$o.status_name}</div>
      </div>
      {/loop}

      {if $list.last_page > 1}
      <div class="vip-pager">
        {if $list.page > 1}<a href="{$entry_prefix}/member/vip/orders?page={$prev_page}">上一页</a>{else}<span>上一页</span>{/if}
        <span class="is-current">{$list.page} / {$list.last_page}</span>
        {if $list.page < $list.last_page}<a href="{$entry_prefix}/member/vip/orders?page={$next_page}">下一页</a>{else}<span>下一页</span>{/if}
      </div>
      {/if}
    </div>
  </div>
  {else}
  <div class="vip-empty">{lang vip.no_data}</div>
  {/if}
</section>