[{assign var="dynvalue" value=$oView->getDynValue()}]
[{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_creditcard_mobile.tpl" aBrands=$aBrands}]
        </li>
        <li>
            <div class="dropdown">
                [{* only to track selection within DOM *}]
                <input type="hidden" id="sCreditCardSelected" name="ACCOUNT.BRAND" value="" />
                <div class="dropdown-toggle" data-toggle="dropdown" data-target="#">
                    <a id="dLabelCreditCardSelected" role="button" href="#">
                        <span id="creditCardSelected">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_CREDITCARD"}]</span>
                        <i class="glyphicon-chevron-down"></i>
                    </a>
                </div>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabelCreditCardSelected">
                    [{foreach from=$aBrands item='sBrandName' key='sBrandIdent'}]
                        <li class="dropdown-option[{if ($dynvalue.kktype == $sBrandIdent)}] selected[{/if}]">
                            <a tabindex="-1" data-selection-id="[{$sBrandIdent}]">[{$sBrandName}]</a>
                        </li>
                    [{/foreach}]
                </ul>
                [{if !empty($dynvalue.kktype)}]
                    [{oxscript add="$('#sCreditCardSelected').val('$dynvalue.kktype');"}]
                [{/if}]
            </div>
        </li>
        <li>
            <label for="ACCOUNT.NUMBER">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_NUMBER"}]</label>
            <input type="number" class="js-oxValidate js-oxValidate_notEmpty" size="64" maxlength="64" name="ACCOUNT.NUMBER" autocomplete="off" value="[{$dynvalue.kknumber}]" placeholder="[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_NUMBER"}]" />
            <p class="validation-error">
                <span class="js-oxError_notEmpty">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_PAGE_EXCEPTION_INPUT_NOTALLFIELDS"}]</span>
            </p>
        </li>
        <li>
            <label for="ACCOUNT.HOLDER">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_CARDHOLDER"}]</label>
            <input type="text" size="20" class="js-oxValidate js-oxValidate_notEmpty" maxlength="64" name="ACCOUNT.HOLDER" value="[{if $dynvalue.kkname}][{$dynvalue.kkname}][{else}][{$oxcmp_user->oxuser__oxfname->value}] [{$oxcmp_user->oxuser__oxlname->value}][{/if}]" placeholder="[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_CARDHOLDER"}]" />
            <p class="validation-error">
                <span class="js-oxError_notEmpty">[{oxmultilang ident="ERROR_MESSAGE_INPUT_NOTALLFIELDS"}]</span>
            </p>
            <div class="note">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_IF_DIFFERENT_FROM_BILLING_ADDRESS"}]</div>
        </li>
        <li>
            <label>[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_VALID_UNTIL"}]</label>
            <div class="cardValidDateWrapper">
                [{include file="formelement_selectlist_month_mobile.tpl"}]
                <div class="card-valid-date-field card-valid-date-divider">/</div>
                [{include file="formelement_selectlist_year_mobile.tpl"}]
            </div>
        </li>
        <li>
            <label for="ACCOUNT.VERIFICATION">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_CARD_SECURITY_CODE"}]</label>
            <input type="number" class="js-oxValidate js-oxValidate_notEmpty" size="64" maxlength="64" name="ACCOUNT.VERIFICATION" autocomplete="off" value="[{$dynvalue.kkpruef}]" placeholder="[{oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_CARD_SECURITY_CODE"}]" />
            <p class="validation-error">
                <span class="js-oxError_notEmpty">[{oxmultilang ident="D3HEIDELPAY_PAYMENT_PAGE_EXCEPTION_INPUT_NOTALLFIELDS"}]</span>
            </p>
            <div class="note">[{*oxmultilang ident="D3HEIDELPAY_PAYMENT_INPUT_CARD_SECURITY_CODE"*}]</div>
        </li>
        <li>
            <div class="note">
                [{oxmultilang ident="D3PAYMENT_SECURITYCODEDESCRIPTION"}]
                [{if $aCCTypes.AMEX}]
                    [{oxmultilang ident="D3PAYMENT_SECURITYCODEDESCRIPTION_AMEX"}]
                [{/if}]
            </div>

            <img src="[{$sImageUrl}]pruefziffer_visa.jpg" alt="visa">
            [{if $aCCTypes.AMEX}]
                <img src="[{$sImageUrl}]pruefziffer_amex.jpg" alt="visa">
            [{/if}]
        </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}]
