<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>
          {{#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">
                      <klarna-placement
                          data-key="sidebar-promotion-auto-size"
                          data-locale="en-GB"
                      ></klarna-placement>
                  </div>
                </label>
              </div>
            </div>
          {{/if}}
          {{#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.png" alt="google pay">
                  </div>
                </label>
              </div>
            </div>
          {{/if}}
          <div class="form-row">
            <div class="form-row__field">
              {{> radiobutton label="Credit/Debit card" name="payment-method" id="checkout-payment-details-card" checked=true value="card"}}
            </div>
          </div>
          <div class="form-row">
            <div class="form-row__field">
              <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>
              <p class="checkout-payment-details__paypal-email">contact@gmail.com <a href="#">Delete</a></p>
            </div>
          </div>
        </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 data-klarna class="checkout-payment-details__klarna" style="display: none;">
        <div class="klarna-info">
          <div class="klarna-info__header">
            <h4 class="klarna-info__header_title">Choose your way to pay</h4>
            <div class="klarna-logo-img-big">
                <klarna-placement
                    data-key="sidebar-promotion-auto-size"
                    data-locale="en-GB"
                ></klarna-placement>
            </div>
          </div>
          <ul class="klarna-info__list">
            <li class="klarna-info__list_item"><i class="fa fa-check"></i>Pay in 3. Interest-free.</li>
            <li class="klarna-info__list_item"><i class="fa fa-check"></i>Pay now or Pay in 30 days.</li>
            <li class="klarna-info__list_item"><i class="fa fa-check"></i>Buyer protection included.</li>
          </ul>
          <div class="klarna-info__learn-more">
            <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>
          </div>
          <div class="klarna-info__accept-info">
            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>
          </div>
        </div>

        <div class="form-row form-row__action form-row__action_custom">
          <div class="form-row__col-btn">
            <button class="btn btn-primary btn_full btn-enter-details">
              <span class="btn__text">Pay with Klarna</span>
            </button>
          </div>
          <div class="form-row__col-terms">
            <p>
              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>
            </p>
          </div>
        </div>
      </div>

      <div data-existing-card>
        <div data-card>
          {{> checkout-edit-billing-address attr="data-card" actionBlock="true" no-set-card="true" }}
        </div>
      </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>
