[{assign var="dynvalue" value=$oView->getDynValue()}]
[{assign var="iPayError" value=$oView->getPaymentError()}]
[{assign var="sImageUrl" value=$oViewConf->getModuleUrl('d3heidelpay','out/img/')}]
[{assign var='oHeidelPaySettings' value=$oHeidelpayViewConfig->getSettings()}]
[{assign var='oHeidelPayment' value=$oHeidelPaySettings->getPayment($paymentmethod)}]
[{assign var="aBrands" value=$oHeidelpayViewConfig->getHeidelpayNgwBrands($paymentmethod, $oHeidelPayment, $oxcmp_user)}]
[{assign var="sBrandIdentELV" value='ELV'}]
[{assign var="sFullImageUrl" value=$sImageUrl|cat:'logo_elv.jpg'}]

[{oxscript add="$('#sCountrySelected_$sPaymentID').on('change', function () {
    var valueSelected = this.value;
    var hideableLi    = $('#sBIC_$sPaymentID').first();

    if (valueSelected == 'DE') {
        hideableLi.hide()
        hideableLi.find('input').attr('disabled', 'disabled');
    } else {
        hideableLi.show()
        hideableLi.find('input').removeAttr('disabled');
    }
});"}]

[{block name="heidelpay_debitnote"}]
    <div id="paymentOption_[{$sPaymentID}]" class="payment-option [{if $oView->getCheckedPaymentId() == $paymentmethod->oxpayments__oxid->value}]active-payment[{/if}]">
        <input id="payment_[{$sPaymentID}]" type="radio" name="paymentid" value="[{$sPaymentID}]" [{if $oView->getCheckedPaymentId() == $paymentmethod->oxpayments__oxid->value}]checked="checked"[{/if}] />
        <ul class="form">
            <li>
                [{include file="payment_heidelpay_img.tpl" sImageUrl=$sFullImageUrl sBrandIdent=$sBrandIdentELV}]
            </li>
            <li [{if $iPayError == -4}]class="invalid-field"[{/if}] id="sBIC_[{$sPaymentID}]">
                <label for="BIC_[{$sPaymentID}]">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_BIC"}]</label>
                <input id="BIC_[{$sPaymentID}]" type="text" class="js-oxValidate js-oxValidate_notEmpty" size="20" maxlength="64" name="dynvalue[lsblz]" autocomplete="off" value="[{$dynvalue.lsblz}]" placeholder="[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_BIC"}]" />
                <p class="validation-error">
                    <span class="js-oxError_notEmpty">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_PAGE_EXCEPTION_INPUT_NOTALLFIELDS"}]</span>
                </p>
            </li>
            <li [{if $iPayError == -5}]class="invalid-field"[{/if}]>
                <label for="sIBAN_[{$sPaymentID}]">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_IBAN"}]</label>
                <input id="sIBAN_[{$sPaymentID}]" type="text" class="js-oxValidate js-oxValidate_notEmpty" size="20" maxlength="64" name="dynvalue[lsktonr]" autocomplete="off" value="[{$dynvalue.lsktonr}]" placeholder="[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_IBAN"}]" />
                <p class="validation-error">
                    <span class="js-oxError_notEmpty">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_PAGE_EXCEPTION_INPUT_NOTALLFIELDS"}]</span>
                </p>
            </li>
            <li>
                <label for="sHOLDER_[{$sPaymentID}]">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_ACCOUNTHOLDER"}]</label>
                <input id="sHOLDER_[{$sPaymentID}]" type="text" class="js-oxValidate js-oxValidate_notEmpty" size="20" maxlength="64" name="dynvalue[lsktoinhaber]" autocomplete="off" value="[{if $dynvalue.lsktoinhaber}][{$dynvalue.lsktoinhaber}][{else}][{$oxcmp_user->oxuser__oxfname->value}] [{$oxcmp_user->oxuser__oxlname->value}][{/if}]" placeholder="[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_ACCOUNTHOLDER"}]" />
                <p class="validation-error">
                    <span class="js-oxError_notEmpty">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_PAGE_EXCEPTION_INPUT_NOTALLFIELDS"}]</span>
                </p>
            </li>
            <li>
                <div class="dropdown">
                    <input type="hidden" id="sCountrySelected_[{$sPaymentID}]" name="dynvalue[lsland]" value="[{$dynvalue.lsland}]" />
                    [{* only to track selection within DOM *}]
                    <div class="dropdown-toggle" data-toggle="dropdown" data-target="#">
                        <a id="dLabelCountrySelected" role="button" href="#">
                            <span id="creditCountrySelected">[{oxmultilang ident="D3PAYMENT_EXT_SELECTPLEASE"}]</span>
                            <i class="glyphicon-chevron-down"></i>
                        </a>
                    </div>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabelCountrySelected">
                        [{foreach from=$aBrands item='sBrandName' key='sBrandIdent'}]
                            <li class="dropdown-option">
                                <a tabindex="-1" data-selection-id="[{$sBrandIdent}]">[{$sBrandName}]</a>
                            </li>
                        [{/foreach}]
                    </ul>
                    [{if !empty($dynvalue.lsland)}]
                        [{oxscript add="$('#sCountrySelected_$sPaymentID').val('`$dynvalue.lsland`').trigger('change');"}]
                    [{/if}]
                </div>
            </li>

        [{block name="checkout_payment_longdesc"}]
            [{if $paymentmethod->oxpayments__oxlongdesc->value}]
                <li>
                    <div class="payment-desc">
                        [{$paymentmethod->oxpayments__oxlongdesc->getRawValue()}]
                    </div>
                </li>
            [{/if}]
        [{/block}]
        </ul>
    </div>
[{/block}]

[{oxscript add="$('#paymentOption_$sPaymentID').find('.dropdown').oxDropDown();"}]
