<div class="checkout-payment-details-v2">
  <div class="checkout-payment-details">
    <form class="checkout-payment-details__payment-method">
      <div class="checkout-payment-details__row">
        <div class="checkout-payment-details__descr">
          <h3 class="checkout-payment-details__title">Payment method</h3>
          <div class="form-row">
            <div class="form-row__field form-row__card-payment">
              {{> radiobutton
                  labelIcons=(array "./img/visa-logo.svg" "./img/mastercard.svg")
                  name="payment-method"
                  id="checkout-payment-details-card"
                  checked=true
                  value="card"
              }}
            </div>
          </div>
          {{#if apple-pay}}
            <div class="form-row">
              <div class="form-row__field form-row__field-apple">
                <label
                    class="rbn rbn_align apple-label__rbn"
                    for="checkout-payment-details-apple">
                  <input
                      type="radio"
                      id="checkout-payment-details-apple"
                      name="payment-method"
                      value="apple">
                  <ins></ins>
                  <div class="apple-logo">
                    <img src="img/apple-pay.svg" alt="apple pay">
                  </div>
                </label>
              </div>
            </div>
          {{/if}}
          {{#if google-pay}}
            <div class="form-row">
              <div class="form-row__field form-row__field-google">
                <label
                    class="rbn rbn_align google-label__rbn"
                    for="checkout-payment-details-google">
                  <input
                      type="radio"
                      id="checkout-payment-details-google"
                      name="payment-method"
                      value="google">
                  <ins></ins>
                  <div class="google-logo">
                    <img src="img/google-pay-mark.svg" alt="google pay">
                  </div>
                </label>
              </div>
            </div>
          {{/if}}
          {{#if billie}}
            <div class="form-row">
              <div class="form-row__field form-row__field-billie">
                <label
                    class="rbn rbn_align billie-label__rbn"
                    for="checkout-payment-details-billie"
                >
                  <input
                      type="radio"
                      id="checkout-payment-details-billie"
                      name="payment-method"
                      value="billie"
                  >
                  <ins></ins>
                  <div class="billie-badge-container">
                    <img
                        src="./img/billie-pay-later.svg"
                        alt="Billie Pay Later"
                    >
                  </div>
                </label>
              </div>
            </div>
          {{else if klarna-method}}
            <div class="form-row">
              <div class="form-row__field form-row__field-klarna">
                <label
                    class="rbn rbn_align klarna-label__rbn"
                    for="checkout-payment-details-klarna"
                >
                  <input
                      type="radio"
                      id="checkout-payment-details-klarna"
                      name="payment-method"
                      value="klarna"
                  >
                  <ins></ins>
                  <div class="klarna-logo">
                    <img
                        src="./img/payment/checkout/klarna.svg"
                        class="payments-checkout__image"
                        alt="klarna"
                    >
                  </div>
                </label>
              </div>
            </div>
          {{/if}}
          {{#if clear-pay}}
            <div class="form-row">
              <div class="form-row__field form-row__field-clearpay">
                <label
                    class="rbn rbn_align clearpay-label__rbn"
                    for="checkout-payment-details-clearpay">
                  <input
                      type="radio"
                      id="checkout-payment-details-clearpay"
                      name="payment-method"
                      value="clearpay">
                  <ins></ins>
                  <div class="clearpay-logo">
                    <img class="payments-checkout__image" src="./img/payment/checkout/clearpay.svg" alt="clearpay">
                  </div>
                </label>
              </div>
            </div>
          {{/if}}
          <div class="form-row">
            <div class="form-row__field form-row__field-paypal">
              <label class="rbn rbn_align" for="checkout-payment-details-paypal">
                <input type="radio" id="checkout-payment-details-paypal" name="payment-method" value="paypal">
                <ins></ins>
                <img class="checkout-payment-details__icon" src="img/payments_paypal-large.png" width="90" height="24"
                     alt="paypal">
              </label>
            </div>
          </div>
          {{> gift-cards }}
        </div>
      </div>

      <div data-apple class="form-row form-row__action form-row__save apple-wrap" style="display: none;">
        <div class="form-row__col-btn">
          <apple-pay-button class="apple__button" buttonstyle="black" type="pay" locale="en-GB"></apple-pay-button>
        </div>
        <div class="apple__terms">
          By placing your order, you accept our
          <a href="#" class="link-secondary" data-toggle="modal" data-target="#modal-terms-and-conditions">
            Terms & Conditions of Sale
          </a>
        </div>
      </div>

      <div data-google class="form-row form-row__action form-row__save google-wrap" style="display: none;">
        <div class="form-row__col-btn">
          <div class="google__button" id="google-pay-btn">
            <button type="button" aria-label="Pay with GPay" class="gpay-button black pay en"></button>
          </div>
        </div>
        <div class="google__terms">
          By placing your order, you accept our
          <a href="#" class="link-secondary" data-toggle="modal" data-target="#modal-terms-and-conditions">
            Terms & Conditions of Sale
          </a>
        </div>
      </div>

      <div data-paypal class="form-row form-row__save" style="display: none;">
        <div class="form-row__field">
          {{> checkbox id="chb-payment-details-paypal" label="Save my PayPal account" }}
        </div>
      </div>

      <div class="form-row js-billie-repayment-terms" style="display: none" data-billie data-row-required data-message="Please select repayment terms">
        <div class="form-row__field">
          {{> checkout-payment-repayment-terms
              name="repaymentTerms"
              title="Select repayment terms"
              repaymentTerms=billieTerms
          }}
        </div>
      </div>

      {{> checkout-payment-info-block
          showRepaymentTerms=false
          dataAttr="data-klarna"
          blockClass="checkout-payment-details__klarna"
          infoClass="klarna-info"

          heading="Choose your way to pay"
          brandLogoHtml="<img src='./img/klarna.svg' alt='klarna'>"

          listItem1="Pay in 3. Interest-free."
          listItem2="Pay now or Pay in 30 days."
          listItem3="Buyer protection included"

          learnMoreHtml="<img class='klarna-info__learn-more_icon' src='img/icon_info.png' width='20' height='20' alt='info'>
                 <klarna-placement
                   data-key='top-strip-promotion-auto-size'
                   data-locale='en-GB'
                 ></klarna-placement>"

          acceptInfo="By continuing, I accept the terms of the
              <a href='#' class='klarna-info__link'>Klarna Shopping Service</a>
              and confirm that I have read the
              <a href='#' class='klarna-info__link'>Privacy Notice</a> and
              <a href='#' class='klarna-info__link'>Cookie Notice</a>"

          ctaButtonLabel="Pay with Klarna"
          ctaButtonClass="klarna__button"
          ctaFooterHtml="By placing your order, you accept our
                <a href='#' class='link-secondary' data-toggle='modal' data-target='#modal-terms-and-conditions'>
                  Terms &amp; Conditions of Sale
                </a>"
      }}

      {{> checkout-payment-info-block
          dataAttr="data-billie"
          showRepaymentTerms=true
          blockClass="checkout-payment-details__billie"
          infoClass="billie-info"

          heading="Get first. Pay later <br> Pay <span class='term'>30</span> days after shipment"
          brandLogoHtml="<img
            src='https://static.billie.io/badges/Billie_Checkout_Default.svg'
            alt='Billie Pay Later'
            width='70'
            height='35'>"


          listItem1="Billie charges no fee"
          listItem2="No sign up required"
          listItem3="Europes go-to B2B payment service"

          acceptInfo="By continuing, I accept the
              <a href='#' class='billie-info__link'>Merchant T&Cs of Billie x Klarna Services</a>,
              and confirm that I have read the
              <a href='#' class='billie-info__link'>Billie and Billie Partner Privacy Policies. Imprint</a>"
      }}

      <div data-clearpay class="checkout-payment-details__clearpay" style="display: none;">
        <div class="clearpay-widget">
          <img class="clearpay-widget__image" src="./img/payment/checkout/clearpay-widget.png" alt="clearpay widget">
        </div>
      </div>
      <div class="billing-address">
        {{> checkout-edit-billing-address actionBlock="true" no-set-card="true" billie-form=billie-form}}
      </div>
      <div data-existing-card
           class="form-row form-row__action form-row__action_custom checkout-payment-details__place-order paypal__row">
        <div class="form-row__col-btn" data-paypal style="display: none;">
          <a class="pay-pal_wrap" href="./page_checkout_confirmation-new.html">
            <div class="buttons-container">
              <div class="paypal-button-container">
                <div class="paypal-button">
                  <span class="paypal-button-text">Pay with</span>
                  <img class="paypal-logo paypal-logo_icon" src="./img/paypal.svg" alt="paypallogo">
                  <img class="paypal-logo paypal-logo_icon-text" src="./img/payapal_text.svg" alt="paypallogo">
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="form-row__col-terms" data-paypal style="display: none;">
          By placing your order, you accept our
          <a href="#" class="link-secondary" data-toggle="modal" data-target="#modal-terms-and-conditions">
            Terms & Conditions of Sale
          </a>
        </div>
      </div>
    </form>


    <form class="checkout-payment-details__card-details checkout-payment-details__card-details_hidden">
      {{> payment-details-BPS-form }}
    </form>
  </div>
</div>
