<div class="flex items-start justify-between flex-wrap gap-3 mb-6 sm:mb-8">
  <div>
    <h1 class="text-2xl sm:text-3xl font-display font-semibold">Pesanan Saya</h1>
    <p class="text-muted text-sm mt-1">Riwayat transaksi pembelian EA Anda.</p>
  </div>
  <a href="/" class="btn btn-outline px-4 py-2.5 rounded-full text-sm">+ Pesan EA Baru</a>
</div>

<% if (orders && orders.length) { %>

  <!-- DESKTOP table -->
  <div class="card p-0 overflow-hidden tbl-mobile-hide">
    <div class="tbl-wrap">
      <table class="tbl">
        <thead>
          <tr>
            <th>Kode</th>
            <th>EA</th>
            <th>Tanggal</th>
            <th>Total</th>
            <th>Bukti</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <% orders.forEach(function(o){
               const lockLabels = {
                 account_number: 'Lock Nomor', account_name: 'Lock Nama',
                 account_full: 'Lock Nama+Nomor', server: 'Lock Server', none: 'Tanpa Lock'
               };
               const lockL = lockLabels[o.license_lock] || 'Lock Nomor';
          %>
            <tr>
              <td class="mono text-xs"><%= o.code %></td>
              <td>
                <div class="font-medium"><%= o.ea_name %></div>
                <div class="text-xs text-muted mt-0.5"><%= o.platform %> • 🔒 <%= lockL %></div>
              </td>
              <td class="text-sm whitespace-nowrap"><%= new Date(o.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'}) %></td>
              <td class="mono">Rp<%= Number(o.amount).toLocaleString('id-ID') %></td>
              <td>
                <% if (o.payment_proof) { %>
                  <a href="<%= o.payment_proof %>" target="_blank" rel="noopener" class="text-gold-300 hover:text-gold-200 text-sm">Lihat →</a>
                <% } else { %>
                  <span class="text-muted-2 text-xs">—</span>
                <% } %>
              </td>
              <td>
                <span class="pill <%= o.status==='approved' ? 'pill-green' : (o.status==='pending' ? 'pill-gold' : 'pill-red') %>">
                  <%= o.status.toUpperCase() %>
                </span>
                <% if (o.status === 'rejected' && o.admin_note) { %>
                  <div class="text-xs text-red-300/80 mt-1 max-w-xs"><%= o.admin_note %></div>
                <% } %>
              </td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>

  <!-- MOBILE cards -->
  <div class="tbl-mobile-cards space-y-3">
    <% orders.forEach(function(o){
         const lockLabels = {
           account_number: 'Lock Nomor', account_name: 'Lock Nama',
           account_full: 'Lock Nama+Nomor', server: 'Lock Server', none: 'Tanpa Lock'
         };
         const lockL = lockLabels[o.license_lock] || 'Lock Nomor';
    %>
      <div class="card p-4">
        <div class="flex items-start justify-between gap-3 mb-3">
          <div class="min-w-0 flex-1">
            <div class="font-medium"><%= o.ea_name %></div>
            <div class="text-xs text-muted mono mt-1"><%= o.code %></div>
          </div>
          <span class="pill <%= o.status==='approved' ? 'pill-green' : (o.status==='pending' ? 'pill-gold' : 'pill-red') %> shrink-0">
            <%= o.status.toUpperCase() %>
          </span>
        </div>

        <div class="grid grid-cols-2 gap-3 text-xs">
          <div>
            <div class="text-muted-2 uppercase tracking-wide" style="font-size:10px">Total</div>
            <div class="mono text-gold-200 mt-1 font-medium">Rp<%= Number(o.amount).toLocaleString('id-ID') %></div>
          </div>
          <div>
            <div class="text-muted-2 uppercase tracking-wide" style="font-size:10px">Platform</div>
            <div class="mt-1"><%= o.platform %></div>
          </div>
          <div>
            <div class="text-muted-2 uppercase tracking-wide" style="font-size:10px">Tanggal</div>
            <div class="mt-1"><%= new Date(o.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',year:'numeric'}) %></div>
          </div>
          <div>
            <div class="text-muted-2 uppercase tracking-wide" style="font-size:10px">Lisensi</div>
            <div class="mt-1">🔒 <%= lockL %></div>
          </div>
        </div>

        <% if (o.payment_proof || (o.status === 'rejected' && o.admin_note)) { %>
          <div class="mt-3 pt-3 border-t border-white/5 flex items-center justify-between gap-3">
            <% if (o.payment_proof) { %>
              <a href="<%= o.payment_proof %>" target="_blank" rel="noopener" class="text-gold-300 text-xs">Lihat bukti bayar →</a>
            <% } else { %><span></span><% } %>
          </div>
        <% } %>

        <% if (o.status === 'rejected' && o.admin_note) { %>
          <div class="mt-2 text-xs text-red-300/80 card-soft p-2.5">⚠ <%= o.admin_note %></div>
        <% } %>
      </div>
    <% }); %>
  </div>
<% } else { %>
  <div class="card empty-state">
    <div class="empty-icon">📦</div>
    <h2>Belum ada pesanan</h2>
    <p>Cari EA yang cocok untuk Anda di katalog kami.</p>
    <a href="/" class="btn btn-gold rounded-full px-6 h-11 inline-flex">Lihat Katalog EA</a>
  </div>
<% } %>
