<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="account_reports.AccountReviewStateSelectionBadgeField">
        <t t-if="this.editableOptions.includes(value)">
            <Dropdown>
                <button t-attf-class="btn {{ this.getDropdownButtonDecoration(value) }} d-flex justify-content-center align-items-center rounded-pill o_account_review_state_selection_badge_button {{ this.additionalClassName }}">
                    <div t-esc="display || '&#8203;'"/>
                </button>
                <t t-set-slot="content">
                    <t t-if="this.editableOptions.includes(false)">
                        <DropdownItem
                            class="'o_account_review_state_selection_badge_dropdown_item'"
                            t-if="!required || !value"
                            t-esc="this.props.placeholder || ''"
                            onSelected="() => this.onChange(false)"
                        />
                    </t>
                    <t t-foreach="options" t-as="option" t-key="option[0]">
                        <t t-if="this.editableOptions.includes(option[0])">
                            <DropdownItem
                                class="'d-flex text-black align-items-center o_account_review_state_selection_badge_dropdown_item'"
                                onSelected="() => this.onChange(option[0])"
                            >
                                <div class="rounded-circle me-2" style="width: 10px; height: 10px;" t-att-class="this.getDropdownItemDecoration(option[0])"/>
                                <span t-esc="option[1]"/>
                            </DropdownItem>
                        </t>
                    </t>
                </t>
            </Dropdown>
        </t>
        <t t-else="">
            <div
                class="cursor-default"
                t-on-click="(ev) => ev.stopPropagation()"
            >
                <button
                    t-attf-class="btn {{ this.getDropdownButtonDecoration(value) }} d-flex justify-content-center align-items-center rounded-pill o_account_review_state_selection_badge_button {{ this.additionalClassName }}"
                    t-att-disabled="true"
                >
                    <div t-esc="display || '&#8203;'"/>
                </button>
            </div>
        </t>
    </t>

</templates>
