<%- include('../../default-front/partials/header'); %>
<div class="container">
  <div class="row">
    <% if (locals.error) { %>
      <div class="col-12 text-center alert alert-danger">
        <strong>Something wrong happened :</strong> <br>
        <%= locals.error %> <br>
        Please try again.
      </div>
    <% } %>
    <div class="col-12 col-md-6">
      <div class="card">
          <div class="card-body">
            <h3 class="card-title">Order Summary</h3>
            <% locals.cart.content.forEach(line => { %>
                <div class="row">
                  <div class="col-12 col-sm-6"><%- line.product.name %></div>
                  <div class="col-12 col-sm-6 text-right"><%- line.product.price * line.quantity %><%= locals.config.currency.symbol %></div>
                </div>
            <% }) %>
          </div>
      </div>
    </div>
    <div class="col-12 col-md-6 text-center">
      <div class="card">
        <div class="card-body">
          <p>
            <small>
              Click on the button above to pay by credit card
            </small>
          </p>
          <form action="<%= locals.linkTo('order') %>" method="POST">
            <input type="hidden" name="_csrf" value="<%= locals.csrf %>">
            <input type="hidden" name="plugin_action" value="validate_payment">
            <script
              src="https://checkout.stripe.com/checkout.js" class="stripe-button"
              data-key="<%- locals.keyPublishable %>"
              data-amount="<%- locals.total %>"
              data-name="Demo Site"
              data-description="Widget"
              data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
              data-locale="auto"
              data-zip-code="true"
              <%= locals.email ? `data-email="${locals.email}"` : '' %>
              data-currency="eur">
            </script>
          </form>
          <p>
            <img src="<%= // `${shop.current.plugin.publicUrl}/cards.png` %>" alt="" style="width:320px;max-width:100%;">
          </p>
        </div>
      </div>
    </div>
    <div class="col-12 text-center p-4">
      <% if (locals.canGoBack) { %>
        <form action="<%= previousLink %>" method="POST">
          <input type="hidden" name="_csrf" value="<%= locals.csrf %>">
          <input type="submit" value="&larr; Back" class="btn btn-outline-secondary">
        </form>
      <% } %>
    </div>
  </div>
</div>
<%- include('../../default-front/partials/footer'); %>
