<?xml version="1.0"?>
<data 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>

    </data>

