[{assign var="dynvalue" value=$oView->D3getDynValueHeidelpay()}]
[{assign var="sImageUrl" value=$oViewConf->getModuleUrl('d3heidelpay','out/img/')}]

[{if $oHeidelpayViewConfig->isPaymentUseInputAfterStep4($paymentmethod->getId())}]
    [{include file="payment_inc_afterstep4_info_mobile.tpl"}]
[{elseif $oView->hasUserHPStoreData($paymentmethod->getId())}]
    [{include file="payment_inc_storeduid_mobile.tpl"}]
[{else}]
    [{assign var='oHeidelPaySettings' value=$oHeidelpayViewConfig->getSettings()}]
    [{assign var='oHeidelPayment' value=$oHeidelPaySettings->getPayment($paymentmethod)}]
    [{assign var="aBrands" value=$oHeidelpayViewConfig->getHeidelpayNgwBrands($paymentmethod, $oHeidelPayment, $oxcmp_user)}]
    <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="img_debitnote_mobile.tpl"}]
            </li>

        [{if $oHeidelpayViewConfig->getHeidelpayConfVar('blSepaMode')}]
            <li>
                <label for="ACCOUNT.BIC">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_BIC"}]</label>
                <input type="text" class="js-oxValidate js-oxValidate_notEmpty" size="64" maxlength="64" name="ACCOUNT.BIC" 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>
                <label for="ACCOUNT.IBAN">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_IBAN"}]</label>
                <input type="text" class="js-oxValidate js-oxValidate_notEmpty" size="64" maxlength="64" name="ACCOUNT.IBAN" 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>
        [{else}]
            <li>
                <label for="ACCOUNT.BANK">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_ROUTINGNUMBER"}]</label>
                <input type="number" class="js-oxValidate js-oxValidate_notEmpty" size="64" maxlength="64" name="ACCOUNT.BANK" autocomplete="off" value="[{$dynvalue.lsblz}]" placeholder="[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_ROUTINGNUMBER"}]" />
                <p class="validation-error">
                    <span class="js-oxError_notEmpty">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_PAGE_EXCEPTION_INPUT_NOTALLFIELDS"}]</span>
                </p>
            </li>

            <li>
                <label for="ACCOUNT.NUMBER">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_ACCOUNTNUMBER"}]</label>
                <input type="number" class="js-oxValidate js-oxValidate_notEmpty" size="64" maxlength="64" name="ACCOUNT.NUMBER" autocomplete="off" value="[{$dynvalue.lsktonr}]" placeholder="[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_ACCOUNTNUMBER"}]" />
                <p class="validation-error">
                    <span class="js-oxError_notEmpty">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_PAGE_EXCEPTION_INPUT_NOTALLFIELDS"}]</span>
                </p>
            </li>
        [{/if}]

            <li>
                <label for="ACCOUNT.HOLDER">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_BANK_ACCOUNTHOLDER"}]</label>
                <input type="text" class="js-oxValidate js-oxValidate_notEmpty" size="64" maxlength="64" name="ACCOUNT.HOLDER" 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" name="ACCOUNT.COUNTRY" value="DE" />
                    [{* 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="D3HEIDELPAY_PAYMENT_INPUT_CREDITCARD"}]</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.kktype)}]
                        [{oxscript add="$('#sCountrySelected').val('$dynvalue.COUNTRY');"}]
                    [{/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>
[{oxscript add="$('#paymentOption_$sPaymentID').find('.dropdown').oxDropDown();"}]
[{/if}]

