<div class="card ghost payment">
    <div class="card-header">
        <h2 class="card-header-custom">${Resource.msg('heading.payment', 'checkout', null)}</h2>
    </div>
</div>

<div class="card payment-form">
    <div class="card-header">
        <h2 class="card-header-custom">${Resource.msg('heading.payment', 'checkout', null)}</h2>
    </div>
    <div class="card-body">
        <form autocomplete="on" method="POST" action="${URLUtils.url('CheckoutServices-SubmitPayment')}"
            data-address-mode="${!pdict.order.billing.billingAddress.address ? 'new' : 'edit'}"
            <isprint value=${pdict.forms.billingForm.attributes} encoding="off" /> novalidate>

            <fieldset class="billing-address-block">
                <!-------------------------------------------------------------------------->
                <!-- Billing Address Selector                                             -->
                <!-------------------------------------------------------------------------->
                <fieldset class="address-selector-block">
                    <div class="form-group">
                        <label class="form-control-label" for="billingAddressSelector">
                            ${Resource.msg('heading.billing.address', 'checkout', null)}
                        </label>

                        <isinclude template="checkout/billing/addressSelector" />
                        <div class="invalid-feedback"></div>
                        <div class="row">
                            <button class="col-6 text-center btn-show-details btn" type="button">${Resource.msg('action.update.address', 'checkout', null)}</button>
                            <button class="col-6 text-center btn-add-new btn" type="button">${Resource.msg('action.add.new', 'checkout', null)}</button>
                        </div>
                    </div>
                </fieldset>

                <!-------------------------------------------------------------------------->
                <!-- Billing Address                                                      -->
                <!-------------------------------------------------------------------------->
                <fieldset class="billing-address">
                    <isinclude template="checkout/billing/billingAddress" />
                </fieldset>

                <input type="hidden" name="${pdict.csrf.tokenName}" value="${pdict.csrf.token}"/>
                <input type="hidden" name="localizedNewAddressTitle" value="${Resource.msg('msg.new.address', 'checkout', null)}"/>
            </fieldset>

            <!-------------------------------------------------------------------------->
            <!-- Contact Info (Email and Phone)                                       -->
            <!-------------------------------------------------------------------------->
            <fieldset class="contact-info-block">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group
                            <isif condition=${pdict.forms.billingForm.contactInfoFields.phone.mandatory === true}>required</isif>
                            ${pdict.forms.billingForm.contactInfoFields.phone.htmlName}">
                            <label class="form-control-label" for="phoneNumber">${Resource.msg('field.customer.phone.number','checkout',null)}</label>

                            <button type="button" class="info-icon">
                                <span class="icon" aria-hidden="true">i</span>
                                <span class="sr-only">${Resource.msg('button.help.assistive.text','common',null)}</span>
                                <span class="tooltip d-none">
                                    ${Resource.msg('tooltip.phone.number','creditCard',null)}
                                </span>
                            </button>

                            <input type="tel" class="form-control phone" id="phoneNumber"
                                value="${pdict.order.billing.billingAddress.address
                                ? pdict.order.billing.billingAddress.address.phone||''
                                : ''}" <isprint value=${pdict.forms.billingForm.contactInfoFields.phone.attributes} encoding="off"/>
                                aria-describedby="phoneInvalidMessage" >
                            <div class="invalid-feedback" id="phoneInvalidMessage"></div>
                        </div>
                    </div>
                </div>
            </fieldset>

            <!-------------------------------------------------------------------------->
            <!-- Payment Options                                                      -->
            <!-------------------------------------------------------------------------->
            <fieldset>
                <isinclude template="checkout/billing/paymentOptions" />
            </fieldset>

        </form>
    </div>
</div>
