<?xml version="1.0"?>
<t t-name="payment.state_header">
        <!-- Parameters description:
            - tx: The transaction whose status must be displayed.
            - is_processing: Whether the transaction is being processed.
        -->
        <t t-set="waiting_heading">
            <p>Please wait...</p>
        </t>
        <t t-if="tx.state == 'draft'">
            <t t-set="alert_style" t-value="'warning'"/>
            <t t-if="is_processing" t-set="status_heading" t-value="waiting_heading"/>
            <t t-set="status_message">
                <p>Your payment has not been processed yet.</p>
            </t>
        </t>
        <t t-elif="tx.state == 'pending'">
            <t t-set="alert_style" t-value="'info'"/>
            <t t-if="is_processing" t-set="status_heading" t-value="waiting_heading"/>
            <t t-if="tx.operation == 'validation'" t-set="status_message">
                <p>Saving your payment method.</p>
            </t>
            <t t-else="" t-set="status_message" t-value="tx.provider_id.sudo().pending_msg"/>
        </t>
        <t t-elif="tx.state == 'authorized'">
            <t t-set="alert_style" t-value="'success'"/>
            <t t-if="is_processing" t-set="status_heading" t-value="waiting_heading"/>
            <t t-set="status_message" t-value="tx.provider_id.sudo().auth_msg"/>
        </t>
        <t t-elif="tx.state == 'done'">
            <t t-set="alert_style" t-value="'success'"/>
            <t t-if="not is_processing" t-set="status_heading">
                <p>Thank you!</p>
            </t>
            <t t-if="tx.operation == 'validation'" t-set="status_message">
                <p>Your payment method has been saved.</p>
            </t>
            <t t-else="" t-set="status_message" t-value="tx.provider_id.sudo().done_msg"/>
        </t>
        <t t-elif="tx.state == 'cancel'">
            <t t-set="alert_style" t-value="'danger'"/>
            <t t-if="tx.operation == 'validation'" t-set="status_message">
                <p>The saving of your payment method has been canceled.</p>
            </t>
            <t t-else="" t-set="status_message" t-value="tx.provider_id.sudo().cancel_msg"/>
        </t>
        <t t-elif="tx.state == 'error'">
            <t t-set="alert_style" t-value="'danger'"/>
            <t t-if="tx.operation == 'validation'" t-set="status_message">
                <p class="mb-0">An error occurred while saving your payment method.</p>
            </t>
            <t t-else="" t-set="status_message">
                <p class="mb-0">An error occurred during the processing of your payment.</p>
            </t>
        </t>

        <t t-if="is_html_empty(status_message)" t-set="status_message" t-value="''"/>
        <t t-set="o_payment_status_alert_class" t-value="'alert alert-'+ alert_style +' d-flex gap-3'"/>

        <div t-if="status_heading or status_message or tx.state_message" name="o_payment_status_alert" t-attf-class="{{o_payment_status_alert_class}}">
            <t t-set="alert_icon" t-value="'fa-cog fa-spin' if is_processing and alert_style != 'danger'                         else 'fa-check' if alert_style == 'success'                         else 'fa-info-circle' if alert_style == 'info'                         else 'fa-exclamation-triangle'"/>
            <div id="o_payment_status_icon">
                <i t-attf-class="fa {{alert_icon}}"/>
            </div>
            <div id="o_payment_status_message" class="w-100">
                <h5 t-if="status_heading" t-out="status_heading" class="alert-heading mb-0"/>
                <t t-if="status_message" t-out="status_message" class="mb-0"/>
                <t t-if="tx.state_message" t-out="tx.state_message" class="mb-0"/>
            </div>
            <a t-if="is_processing" t-att-href="tx.landing_route" class="alert-link ms-auto text-nowrap">
                Skip <i class="oi oi-arrow-right ms-1 small"/>
            </a>
        </div>
    </t>

    