{{define "user/orders.html"}}
{{template "user/layout_head" .}}
{{template "user_pagehead" (dict "Icon" "bx-receipt" "Title" (T "user.orders.title") "Desc" (T "user.orders.desc"))}}
<div class="card border-0 shadow-sm">
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle">
      <thead class="table-light">
        <tr><th>{{T "user.orders.col_id"}}</th><th>{{T "user.orders.col_plan"}}</th><th>{{T "user.orders.col_amount"}}</th><th>{{T "user.orders.col_status"}}</th><th>{{T "user.orders.col_time"}}</th><th></th></tr>
      </thead>
      <tbody>
      {{range index .Data "Orders"}}
      <tr>
        <td class="small">{{.order_id}}</td>
        <td>{{.plan_id}} / {{.billing_cycle}}</td>
        <td>{{.pay_amount}} {{.currency}}</td>
        <td>
          {{$st := asInt .pay_status}}
          {{if eq $st 0}}{{T "user.orders.st_pending"}}
          {{else if eq $st 1}}{{T "user.orders.st_paid"}}
          {{else if eq $st 2}}{{T "user.orders.st_refunded"}}
          {{else if eq $st 3}}{{T "user.orders.st_canceled"}}
          {{else if eq $st 4}}{{T "user.orders.st_expired"}}
          {{else}}{{$st}}{{end}}
        </td>
        <td class="small">{{unixTime .created_at}}</td>
        <td>
          {{if eq (asInt .pay_status) 0}}
          <button type="button" class="btn btn-sm btn-outline-secondary js-cancel" data-id="{{.order_id}}">{{T "user.orders.cancel"}}</button>
          {{end}}
        </td>
      </tr>
      {{else}}
      <tr><td colspan="6" class="text-center text-muted py-4">{{T "user.orders.empty"}}</td></tr>
      {{end}}
      </tbody>
    </table>
  </div>
</div>
<script>
$('.js-cancel').on('click', function () {
  var id = $(this).data('id');
  $.post('/api/user/orders/' + encodeURIComponent(id) + '/cancel', function (res) {
    if (res.success) location.reload();
    else alert(res.message || {{jsString (T "user.orders.cancel_fail")}});
  }).fail(function (xhr) {
    var msg = {{jsString (T "user.orders.cancel_fail")}};
    try { msg = JSON.parse(xhr.responseText).message || msg; } catch (e) {}
    alert(msg);
  });
});
</script>
{{template "user/layout_foot" .}}
{{end}}