<?xml version="1.0"?>
<t name="Payment Icon List" t-name="payment.icon_list">
        <ul class="payment_icon_list float-end list-inline" data-max-icons="3">
            <t t-set="icon_index" t-value="0"/>
            <t t-set="MAX_ICONS" t-value="3"/>
            <!-- === Icons === -->
            <!-- Only shown if in the first 3 icons -->
            <t t-foreach="provider.payment_icon_ids.filtered(lambda r: r.image_payment_form)" t-as="icon">
                <li t-attf-class="list-inline-item{{'' if (icon_index &lt; MAX_ICONS) else ' d-none'}}">
                    <span t-field="icon.image_payment_form" t-options="{'widget': 'image', 'alt-field': 'name'}" data-bs-toggle="tooltip" t-att-title="icon.name"/>
                </li>
                <t t-set="icon_index" t-value="icon_index + 1"/>
            </t>
            <t t-if="icon_index &gt;= MAX_ICONS">
                <!-- === "show more" button === -->
                <!-- Only displayed if too many payment icons -->
                <li style="display:block;" class="list-inline-item">
                    <span class="float-end more_option text-info">
                        <a name="o_payment_icon_more" data-bs-toggle="tooltip" t-att-title="', '.join([icon.name for icon in provider.payment_icon_ids[MAX_ICONS:]])">
                            show more
                        </a>
                    </span>
                </li>
                <!-- === "show less" button === -->
                <!-- Only displayed when "show more" is clicked -->
                <li style="display:block;" class="list-inline-item d-none">
                    <span class="float-end more_option text-info">
                        <a name="o_payment_icon_less">show less</a>
                    </span>
                </li>
            </t>
        </ul>
    </t>

    