<%- include('partials/head') %>
<%- include('partials/header') %>

<main>
  <section class="page-hero">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / Account / Orders</div>
      <h1>My orders</h1>
    </div>
  </section>

  <section class="section-sm">
    <div class="container">
      <div class="account-grid">
        <nav class="acc-nav">
          <a href="/account">Dashboard</a>
          <a class="active" href="/account/orders">My orders</a>
          <a href="/wishlist">Wishlist</a>
          <a href="/cart">Cart</a>
          <a href="/account/logout">Sign out</a>
        </nav>
        <div>
          <div class="panel" style="background:var(--surface); border:1px solid var(--line-2); overflow-x:auto;">
            <% if (orders.length) { %>
              <table class="table">
                <thead><tr><th>Order</th><th>Date</th><th>Items</th><th>Total</th><th>Payment</th><th>Status</th><th></th></tr></thead>
                <tbody>
                  <% orders.forEach(function(o){ %>
                    <tr>
                      <td><b><%= o.order_number %></b></td>
                      <td style="color:var(--muted);"><%= new Date(o.created_at + 'Z').toLocaleDateString() %></td>
                      <td><%= o.item_count %></td>
                      <td><b><%= money(o.total) %></b></td>
                      <td><span class="status-tag st-<%= o.payment_status %>"><%= o.payment_status %></span></td>
                      <td><span class="status-tag st-<%= o.status %>"><%= o.status %></span></td>
                      <td style="white-space:nowrap;">
                        <a class="btn btn-dark btn-sm" href="/order/<%= o.order_number %>">View</a>
                        <% if (o.status === 'fulfilled' || o.status === 'completed') { %><a class="btn btn-gold btn-sm" href="/?leave-review=1">Review</a><% } %>
                      </td>
                    </tr>
                  <% }); %>
                </tbody>
              </table>
            <% } else { %>
              <div class="empty" style="padding:30px 10px;">
                <h3>No orders yet</h3>
                <p>When you place an order it will show up here.</p>
                <a class="btn btn-gold" href="/">Start shopping</a>
              </div>
            <% } %>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<%- include('partials/footer') %>
