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

<main>
  <section class="page-hero">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / Account</div>
      <h1>Hi, <%= user.name %></h1>
    </div>
  </section>

  <section class="section-sm">
    <div class="container">
      <% if (query.updated) { %><div class="panel" style="background:var(--gold-soft); border-color:rgba(212,175,55,.35); margin-bottom:18px;">Profile updated successfully.</div><% } %>
      <div class="account-grid">
        <nav class="acc-nav">
          <a class="active" href="/account">Dashboard</a>
          <a 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);">
            <h3 style="margin-bottom:6px;">Recent orders</h3>
            <% if (orders.length) { %>
              <div style="overflow-x:auto;">
                <table class="table">
                  <thead><tr><th>Order</th><th>Date</th><th>Total</th><th>Status</th><th></th></tr></thead>
                  <tbody>
                    <% orders.slice(0, 5).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><b><%= money(o.total) %></b></td>
                        <td><span class="status-tag st-<%= o.status %>"><%= o.status %></span></td>
                        <td><a class="btn btn-dark btn-sm" href="/order/<%= o.order_number %>">View</a></td>
                      </tr>
                    <% }); %>
                  </tbody>
                </table>
              </div>
            <% } else { %>
              <p style="color:var(--muted); padding:10px 0;">No orders yet. <a href="/" style="color:var(--gold-2); font-weight:700;">Start shopping</a></p>
            <% } %>
          </div>

          <div class="panel" style="background:var(--surface); border:1px solid var(--line-2);">
            <h3 style="margin-bottom:16px;">Profile</h3>
            <form method="post" action="/account/profile">
              <div class="form-grid">
                <div class="form-field"><label for="pName">Name</label><input id="pName" name="name" value="<%= user.name %>"></div>
                <div class="form-field"><label for="pPhone">Phone</label><input id="pPhone" name="phone" value="<%= user.phone %>"></div>
              </div>
              <div class="form-field"><label for="pPass">New password (leave blank to keep)</label><input id="pPass" name="password" type="password" minlength="6"></div>
              <button class="btn btn-gold" type="submit">Save changes</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

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