<templates>
    <t t-name="maintenance.MaintenanceRequestStateSelection" t-inherit="web.StateSelectionField" t-inherit-mode="primary">
        <xpath expr="//Dropdown/button/div" position="replace">
            <div t-if="isKanbanOrMobileView" class="d-flex align-items-center" t-att-title="label">
                <i t-attf-class="{{ stateIcon(currentValue) }} {{ statusColor(currentValue) }}"/>
            </div>
            <div t-else="" class="d-flex align-items-center">
                <span class="o_status_label" t-out="label"/>
            </div>
        </xpath>

        <xpath expr="//Dropdown" position="attributes">
            <attribute name="menuClass" separator=" + " add="' maintenance_request_state_selection_menu'"/>
        </xpath>

        <xpath expr="//Dropdown/button" position="attributes">
            <attribute name="class" remove="p-0" add="shadow-none" separator=" "/>
            <attribute name="t-att-class">getTogglerClass(currentValue)</attribute>
        </xpath>

        <xpath expr="//CheckboxItem/span[1]" position="attributes">
            <attribute name="t-attf-class" separator=" " add="{{ stateIcon(option[0]) }}" remove="o_status"/>
        </xpath>
        <xpath expr="//CheckboxItem/span[2]" position="attributes">
            <attribute name="t-attf-class">{{ statusColor(option[0]) }}</attribute>
        </xpath>
        <!-- Dropdown divider -->
        <xpath expr="//CheckboxItem" position="before">
            <div t-if="option[0] === 'cancelled'" role="separator" class="dropdown-divider"/>
        </xpath>
    </t>
</templates>
