<%- include('_head') %>
  <h1 style="font-size:24px; margin-bottom:18px;">Orders</h1>

  <form method="get" action="/admin/orders" class="panel" style="display:flex; gap:10px; align-items:end;">
    <div class="form-field" style="margin-bottom:0;"><label>Status</label>
      <select name="status" style="width:auto;">
        <option value="">All</option>
        <% ['pending','confirmed','shipped','delivered','cancelled'].forEach(function(s){ %><option value="<%= s %>" <%= status === s ? 'selected' : '' %>><%= s %></option><% }); %>
      </select>
    </div>
    <button class="btn btn-dark btn-sm" type="submit">Filter</button>
  </form>

  <div class="panel">
    <div style="overflow-x:auto;">
      <table class="table">
        <thead><tr><th>Order</th><th>Customer</th><th>Total</th><th>Payment</th><th>Status</th><th>Date</th><th></th></tr></thead>
        <tbody>
          <% if (orders.length) { orders.forEach(function(o){ %>
            <tr>
              <td><b><%= o.order_number %></b></td>
              <td><%= o.name %><br><span style="color:var(--muted); font-size:12px;"><%= o.email %></span></td>
              <td><b><%= money(o.total) %></b></td>
              <td><span class="status-tag st-<%= o.payment_status %>"><%= o.payment_status %></span> <span style="color:var(--muted); font-size:12px;">(<%= o.payment_method %>)</span></td>
              <td><span class="status-tag st-<%= o.status %>"><%= o.status %></span></td>
              <td style="color:var(--muted);"><%= new Date(o.created_at + 'Z').toLocaleString() %></td>
              <td><a class="btn btn-dark btn-sm" href="/admin/orders/<%= o.id %>">Manage</a></td>
            </tr>
          <% }); } else { %>
            <tr><td colspan="7" style="color:var(--muted); text-align:center; padding:30px;">No orders found.</td></tr>
          <% } %>
        </tbody>
      </table>
    </div>
  </div>
<%- include('_foot') %>
