{% extends "base.html" %}

{% block content %}
<main class="x xdc md-xdr md-xw">
  <header class="w100 copy-h tac">
    <h1>Cart</h1>
  </header>
  {% if not data.checkout_items %}
  <section class="w100 pt4-25 pr0-85 pb4-25 pl0-85 copy">
    <div class="mw-680px mla mra">
      <p>Your cart is empty.</p>
    </div>
  </section>
  {% else %}
  <section class="checkout-table-header w100 pt4-25">
    {% for item in data.checkout_items %}
    {% include "partials/checkout-item.html" %}
    {% endfor %}
  </section>
  {% if data.show_checkout %}
  <form class="checkout-shipping-info w100 pt4-25" method="POST">
    <input type="hidden" id="order_id" name="order_id" value="{{ cart.meta.order_id }}">
    <input type="hidden" id="weight" name="weight" value="{{ cart.meta.total_weight }}">
    <section class="w100 bdb-dark-red pr0-85 pb4-25 pl0-85">
      {% include "partials/form-subtotal.html" %}
    </section>
    <section class="w100 pt4-25 pr0-85 pb4-25 pl0-85 bdb-dark-red">
      <div class="mw-680px mla mra">
	<h4 class="ff-sans fs-huge ttu pb4-75">Shipping Information</h4>
	{% include "partials/form-shipping-info.html" %}
      </div>
    </section>
    <section class="w100 pt4-25 pr0-85 pb5-5 pl0-85 bdb-dark-red">
      {% include "partials/form-total.html" %}
    </section>
    <section class="x xdr xw xjsb xaic w100 pt4-25 pr0-85 pb4-25 pl0-85 bdb-gray">
      <div class="mw-680px mla mra">
	<div class="w100 x xdc tn-xdr xjsb sm-xaic pt1 pb1">
	  <h4 class="ff-sans fs-large sm-fs-huge ttu pb2">Checkout</h4>
	  {% include "partials/form-payment-options.html" %}
	</div>
	<div class="copy-checkout-disclaimer w100 pt3-5">
	  {% for block in data.doc.blocks %}
	  {% if block.type == 'text' %}
	  {{ block.value | md | safe }}
	  {% endif %}
	  {% endfor %}
	</div>
      </div>
    </section>
    <input type="hidden" name="csrftoken" value="{{ request.scope.csrftoken() }}">
  </form>
  {% else %}
  <form class="w100 pt4-25 pr0-85 pb4-25 pl0-85 bdb-dark-red" action="/cart/clear" method="POST">
    <div class="mw-680px mla mra">
      <h4 class="ff-sans fs-large sm-fs-huge pb2">Do you want to clear you cart?</h4>
      <button type="submit" class="fs-small btn-checkout-remove bd-deep-brown fgc-terre bgc-gaow">Clear Cart</button>
    <input type="hidden" name="csrftoken" value="{{ request.scope.csrftoken() }}">
    </div>
  </form>
  {% endif %}
  <div class="checkout-empty-message dn w100 bdb-dark-red pt4-25 pr0-85 pb4-25 pl0-85 copy">
    <div class="mw-680px mla mra">
      <p>Your cart is empty.</p>
    </div>
  </div>
  {% endif %}
  <div id="loader">
    <div class="spinner"></div>
  </div>
</main>
{% with hide_menu=True, custom_border=not data.checkout_items %}
{% include "partials/footer.html" %}
{% endwith %}
{% endblock %}