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

<main>
  <section class="page-hero">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / Cart</div>
      <h1>Your cart</h1>
    </div>
  </section>

  <section class="section-sm">
    <div class="container">
      <div class="cart-page">
        <div id="cartPageItems">
          <div class="empty" style="padding:60px 20px;">
            <div class="ico"><i class="ic" data-ic="bag"></i></div>
            <h3>Your cart is empty</h3>
            <p>Add something fresh to get the drip going.</p>
            <a class="btn btn-gold" href="/gadgets">Start shopping</a>
          </div>
        </div>

        <aside class="summary-card" id="cartSummary" hidden>
          <h3 style="font-size:18px; margin-bottom:8px;">Order summary</h3>
          <div class="coupon-box">
            <input type="text" id="couponInput" placeholder="Discount code">
            <button class="btn btn-dark btn-sm" id="applyCouponBtn">Apply</button>
          </div>
          <div id="couponResult"></div>
          <div class="summary-row"><span>Subtotal</span><span id="sumSubtotal">R 0.00</span></div>
          <div class="summary-row"><span>Shipping</span><span id="sumShipping">Calculated at checkout</span></div>
          <div class="summary-row total"><span>Total</span><span id="sumTotal">R 0.00</span></div>
          <a class="btn btn-gold btn-block" style="margin-top:16px;" href="/checkout">Proceed to checkout <i class="ic" data-ic="arrow"></i></a>
          <a class="btn btn-dark btn-block" style="margin-top:8px;" href="/gadgets">Continue shopping</a>
        </aside>
      </div>
    </div>
  </section>
</main>

<%- include('partials/footer') %>
<script>window.TC_SITE = { shipping_fee: <%= site.shipping_fee %>, free_shipping_threshold: <%= site.free_shipping_threshold %> };</script>
<%- include('partials/scripts', { pageJs: 'cart.js' }) %>
