<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <template id="payment_custom.token_form" inherit_id="payment.token_form">
        <xpath expr="//t[@t-set='hide_secured_by']" position="attributes">
            <attribute name="t-value" separator=" " add="or provider_sudo.code == 'custom'"/>
        </xpath>
    </template>

    <template id="payment_custom.payment_method_form" inherit_id="payment.method_form">
        <xpath expr="//t[@t-set='hide_secured_by']" position="attributes">
            <attribute name="t-value" separator=" " add="or provider_sudo.code == 'custom'"/>
        </xpath>
    </template>

    <template id="redirect_form">
        <form t-att-action="api_url" method="post">
            <input type="hidden" name="reference" t-att-value="reference"/>
        </form>
    </template>

    <template id="custom_state_header" inherit_id="payment.state_header">

        <xpath expr="//div[@name='o_payment_status_alert']" position="before">
            <h1 t-if=" tx.provider_id.sudo().code == 'custom' and tx.state == 'pending'"
                class="mb-3">
                Finalize your payment
            </h1>
        </xpath>

        <xpath expr="//div[@name='o_payment_status_alert']" position="inside">
            <t t-set="qr_code"
               t-value="tx.provider_id.sudo().qr_code and tx.company_id.sudo().partner_id.bank_ids[:1].build_qr_code_base64(tx.amount, tx._get_communication(), None, tx.currency_id, tx.partner_id)"
            />
            <t t-if="tx.provider_id.sudo().code == 'custom' and qr_code">
                <div class="position-relative order-2 d-flex flex-md-column justify-content-center align-items-center align-items-md-stretch w-100 w-md-auto">
                    <hr class="d-inline d-md-none w-100"/>
                    <div class="vr d-none d-md-block h-100 mx-auto"/>
                    <h6 class="my-1 my-md-3 px-3 px-md-0 text-muted">OR</h6>
                    <hr class="d-inline d-md-none w-100"/>
                    <div class="vr d-none d-md-block h-100 mx-auto"/>
                </div>
                <div class="o_qr_code_card card order-1 order-md-3 bg-info flex-shrink-0">
                    <div class="card-body d-flex flex-column align-items-center justify-content-center pb-3">
                        <img class="mb-2 border border-dark rounded" t-att-src="qr_code"/>
                        <small class="text-center text-wrap lh-sm">Scan me in your banking app</small>
                    </div>
                </div>
            </t>
        </xpath>

        <xpath expr="//t[@t-set='o_payment_status_alert_class']" position="replace">
            <t t-if="tx.provider_id.sudo().code == 'custom'">
               <t t-set="o_payment_status_alert_class"
                  t-value="'d-flex flex-column flex-md-row align-items-stretch gap-2 gap-md-3 mb32'"
               />
            </t>
            <t t-else="">$0</t>
        </xpath>

        <xpath expr="//div[@id='o_payment_status_icon']" position="attributes">
            <attribute name="t-if">tx.provider_id.sudo().code != 'custom'</attribute>
        </xpath>

        <xpath expr="//div[@id='o_payment_status_message']" position="replace">
            <div t-if="tx.provider_id.sudo().code == 'custom'"
                 id="o_payment_status_message"
                 class="order-3 order-md-1 flex-grow-1"
            >
                <div class="card flex-grow-1">
                    <div id="o_payment_status_message_details" class="card-body">
                        <t>$0</t>
                        <t t-if="tx._get_communication()">
                            <hr class="w-100"/>
                            <strong class="mt-auto">Communication: </strong>
                            <span t-out="tx._get_communication()"/>
                        </t>
                    </div>
                </div>
            </div>
            <t t-else="">$0</t>
        </xpath>

    </template>

</odoo>
