{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Gift Cards" isAsideSticky="true" clearPayIcon=true billieIcon=true checkout=true}}

{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
<link type="text/css" rel="stylesheet" href="./css/pages/page_checkout_delivery-new.css">
<link type="text/css" rel="stylesheet" href="./css/components/payment-details-BPS-form.css">
<link type="text/css" rel="stylesheet" href="./css/components/checkout-payment-details-v2.css">

<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
{{/content}}
{{#content "steps"}}
{{> steps-three-steps active-step-index="2"}}
{{/content}}

{{#content "notification"}}
<div class="globalMessages container">
</div>
{{/content}}

{{#content "aside"}}
{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true checkout=true}}
{{/content}}


{{#content "main"}}
<div class="delivery-block">
  <h3 class="delivery-block__heading">Delivery Information</h3>
  <div class="delivery-block__wrapper">
    {{#with checkoutOrder.deliveryPayments.[0]}}
    <div class="checkout-order">
      {{> checkout-order-block}}
    </div>
    {{/with}}
  </div>
</div>

<div class="click-collect-block">
  <h3 class="click-collect-block__heading">Click & Collect</h3>
  <div class="click-collect-block__wrapper">
    {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
    <div class="checkout-order">
      {{> checkout-order-block}}
    </div>
    {{/with}}
  </div>
</div>

<div class="billing-payment-block">
  <h3 class="billing-payment-block__heading">Billing & Payment</h3>
  <div class="billing-payment-block__wrapper">
    {{> checkout-payment-details-v2 apple-pay=true google-pay=true clear-pay=true klarna-method=true}}
  </div>
</div>

{{/content}}

{{#content "foot" mode="append"}}
<script
    async
    src="https://pay.google.com/gp/p/js/pay.js">
</script>
<script defer src="./js/page/checkout-confirmation-new.js"></script>
<script defer src="./js/page/checkout-payment-details.js"></script>
<script defer src="./js/page/klarna-modal-scroll-disable.js"></script>
<script defer src="./js/page/billie-business-type.js"></script>
<script defer src="./js/gift-cards.min.js"></script>
{{> checkout-terms-and-conditions-modal }}
{{> loader hidden=true modifier="page-loader"}}
{{/content}}
{{/extend}}