{% macro show_cart(oob=False) %}
<div id="cart" {% if oob %} hx-swap-oob="{{oob}}" {% endif%}>
  {# Empty cart #}
  {% if not cart and not calendar_cart_entries  %}
    <div class="rounded-2xl border border-dashed border-stone-300 bg-white/80 p-6 sm:p-8 text-center">
      <div class="inline-flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-stone-100 mb-3">
        <i class="fa fa-shopping-cart text-stone-500 text-sm sm:text-base" aria-hidden="true"></i>
      </div>
      <p class="text-base sm:text-lg font-medium text-stone-800">
        Your cart is empty
      </p>
      {#
      <p class="mt-1 text-xs sm:text-sm text-stone-600">
        Add some items from the shop to see them here.
      </p>
      <div class="mt-4">
        <a
          href="{{ market_url('/') }}"
          class="inline-flex items-center px-4 py-2 text-sm font-semibold rounded-full bg-emerald-600 text-white hover:bg-emerald-700"
        >
          Browse products
        </a>
      </div> #}
    </div>

  {% else %}

    <div _class="grid gap-y-6 lg:gap-8 lg:grid-cols-[minmax(0,2fr),minmax(0,1fr)]">
      {# Items list #}
      <section class="space-y-3 sm:space-y-4">
        {% for item in cart %}
          {% from '_types/product/_cart.html' import cart_item with context %}
          {{ cart_item()}}
        {% endfor %}
        {% if calendar_cart_entries %}
          <div class="mt-6 border-t border-stone-200 pt-4">
            <h2 class="text-base font-semibold mb-2">
              Calendar bookings
            </h2>

            <ul class="space-y-2">
              {% for entry in calendar_cart_entries %}
                <li class="flex items-start justify-between text-sm">
                  <div>
                    <div class="font-medium">
                      {{ entry.name or entry.calendar_name }}
                    </div>
                    <div class="text-xs text-stone-500">
                      {{ entry.start_at }}
                      {% if entry.end_at %}
                        – {{ entry.end_at }}
                      {% endif %}
                    </div>
                  </div>
                  <div class="ml-4 font-medium">
                    £{{ "%.2f"|format(entry.cost or 0) }}
                  </div>
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}
      </section>
      {{summary(cart, total, calendar_total, calendar_cart_entries,)}}
      
    </div>

  {% endif %}
</div>
{% endmacro %}


{% macro summary(cart, total, calendar_total, calendar_cart_entries, oob=False) %}
  <aside id="cart-summary" class="lg:pl-2" {% if oob %} hx-swap-oob="{{oob}}" {% endif %}>
    <div class="rounded-2xl bg-white shadow-sm border border-stone-200 p-4 sm:p-5">
      <h2 class="text-sm sm:text-base font-semibold text-stone-900 mb-3 sm:mb-4">
        Order summary
      </h2>

      <dl class="space-y-2 text-xs sm:text-sm">
        <div class="flex items-center justify-between">
          <dt class="text-stone-600">Items</dt>
          <dd class="text-stone-900">
            {{ cart | sum(attribute="quantity") }}
          </dd>
        </div>
        <div class="flex items-center justify-between">
          <dt class="text-stone-600">Subtotal</dt>
          <dd class="text-stone-900">
            {{ cart_grand_total(cart, total, calendar_total, calendar_cart_entries ) }}
          </dd>
        </div>
      </dl>
      <div class="flex flex-col items-center w-full">
        <h1 class="text-5xl mt-2">
          This is a test - it will not take actual money
        </h1>
        <div>
          use dummy card number: 5555 5555 5555 4444
        </div>
      </div>
      <div class="mt-4 sm:mt-5">
        {% if g.user %}
          <form
            method="post"
            action="{{ page_cart_url(page_post.slug, '/checkout/') if page_post is defined and page_post else cart_url('/checkout/') }}"
            class="w-full"
          >
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button
              type="submit"
              class="w-full inline-flex items-center justify-center px-4 py-2 text-xs sm:text-sm rounded-full border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 transition"
            >
              <i class="fa-solid fa-credit-card mr-2" aria-hidden="true"></i>
              Checkout as {{g.user.email}}
            </button>
          </form>
        {% else %}
          {% set href=login_url(request.url) %}
          <div
            class="w-full flex"
          >
            <a
              href="{{ href }}"
              hx-get="{{ href }}"
              hx-target="#main-panel"
              hx-select ="{{hx_select_search}}"
              hx-swap="outerHTML"
              hx-push-url="true"
              aria-selected="{{ 'true' if local_href == request.path else 'false' }}"
              class="w-full cursor-pointer flex flex-row items-center justify-center p-3 gap-2 rounded bg-stone-200 text-black {{select_colours}}"
              data-close-details
            >
              <i class="fa-solid fa-key"></i>
              <span>sign in or register to checkout</span>

            </a>
          </div>
          
        {% endif %}
      </div>
    </div>
  </aside>
{% endmacro %}

{% macro cart_total(cart, total) %}
  {% set cart_total = total(cart) %}
  {% if cart_total %}
    {% set symbol = "£" if cart[0].product.regular_price_currency == "GBP" else cart[0].product.regular_price_currency %}
    {{ symbol }}{{ "%.2f"|format(cart_total) }}
  {% else %}
    –
  {% endif %}
{% endmacro %}


{% macro cart_grand_total(cart, total,  calendar_total, calendar_cart_entries) %}
  {% set product_total = total(cart) or 0 %}
  {% set cal_total = calendar_total(calendar_cart_entries) or 0 %}
  {% set grand = product_total + cal_total %}

  {% if cart and cart[0].product.regular_price_currency %}
    {% set symbol = "£" if cart[0].product.regular_price_currency == "GBP" else cart[0].product.regular_price_currency %}
  {% else %}
    {% set symbol = "£" %}
  {% endif %}

  {{ symbol }}{{ "%.2f"|format(grand) }}
{% endmacro %}