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

    <t t-name="web.Many2ManyTagsField">
        <div
            class="o_field_tags d-inline-flex flex-wrap gap-1 mw-100"
            t-att-class="{'o_tags_input o_input': !props.readonly}"
            t-ref="many2ManyTagsField"
        >
            <TagsList tags="tags"/>
            <div t-if="showM2OSelectionField" class="o_field_many2many_selection d-inline-flex w-100" t-ref="autoComplete">
                <Many2XAutocomplete
                    id="props.id"
                    placeholder="tags.length ? '' : props.placeholder"
                    resModel="relation"
                    autoSelect="true"
                    fieldString="string"
                    activeActions="activeActions"
                    update="update"
                    quickCreate="activeActions.create ? quickCreate : null"
                    context="props.context"
                    getDomain.bind="getDomain"
                    isToMany="true"
                    nameCreateField="props.nameCreateField"
                    searchThreshold="props.searchThreshold"
                >
                    <t t-set-slot="autoCompleteItem" t-slot-scope="autoCompleteItemScope">
                        <span t-att-class="{ 'fw-bold': isSelected(autoCompleteItemScope.record) }">
                            <span t-out="autoCompleteItemScope.label"/>
                        </span>
                    </t>
                </Many2XAutocomplete>
            </div>
        </div>
    </t>

    <t t-name="web.Many2ManyTagsFieldColorListPopover">
        <div class="o_tag_popover m-2">
            <ColorList colors="props.colors" forceExpanded="true" selectedColor="props.tag.colorIndex" onColorSelected="(id) => props.switchTagColor(id, props.tag)"/>
            <CheckBox className="'pt-2'" value="props.tag.colorIndex === 0" onChange.alike="(isChecked) => props.onTagVisibilityChange(isChecked, props.tag)">Hide in Kanban</CheckBox>
        </div>
    </t>

</templates>
