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

    <t t-name="web.Many2ManyTagsAvatarField">
        <div
            class="many2many_tags_avatar_field_container o_field_tags d-inline-flex flex-wrap mw-100 gap-1"
            t-att-class="{'o_tags_input o_input': !props.readonly}"
            t-ref="many2ManyTagsField"
        >
            <TagsList tags="tags" visibleItemsLimit="visibleItemsLimit"/>
            <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"
                    specification="specification"
                >
                    <t t-set-slot="autoCompleteItem" t-slot-scope="autoCompleteItemScope">
                        <t t-call="{{ constructor.optionTemplate }}"/>
                    </t>
                </Many2XAutocomplete>
            </div>
        </div>
    </t>

    <t t-name="web.Many2ManyTagsAvatarField.option">
        <span class="o_avatar_many2x_autocomplete o_avatar d-flex align-items-center">
            <img t-if="autoCompleteItemScope.record.id" class="rounded me-1"
                t-attf-src="/web/image/{{relation}}/{{autoCompleteItemScope.record.id}}/avatar_128"/>
            <span t-att-class="{ 'fw-bold': isSelected(autoCompleteItemScope.record) }" t-out="autoCompleteItemScope.label"/>
        </span>
    </t>

    <t t-name="web.KanbanMany2ManyTagsAvatarFieldTagsList" t-inherit="web.TagsList" t-inherit-mode="primary">
        <xpath expr="//t[@t-foreach='visibleTags']" position="before">
            <t t-if="canDisplayQuickAssignAvatar">
                <a t-on-click.stop.prevent="openPopover" tabIndex="-1" href="#" data-tooltip="Assign"
                   aria-label="Assign" class="o_quick_assign fa o_m2m_avatar btn-link d-flex align-items-center text-dark" t-attf-class="{{ props.tags.length ? 'fa-pencil' : 'fa-user-plus' }}" role="button"/>
            </t>
        </xpath>
    </t>

    <t t-name="web.KanbanMany2ManyTagsAvatarField" t-inherit="web.Many2ManyTagsAvatarField" t-inherit-mode="primary"
      >
        <xpath expr="//TagsList" position="attributes">
            <attribute name="popoverProps">popoverProps</attribute>
            <attribute name="readonly">!props.isEditable</attribute>
        </xpath>
    </t>
    <t t-name="web.Many2ManyTagsAvatarFieldPopover" t-inherit="web.Many2ManyTagsAvatarField" t-inherit-mode="primary">
        <xpath expr="//div[hasclass('o_field_tags')]" position="attributes">
            <attribute name="class" add="p-2 o_m2m_tags_avatar_field_popover o_field_widget o_field_many2many_tags_avatar" remove="d-inline-flex mw-100" separator=" " />
        </xpath>
        <xpath expr="//div[hasclass('o_field_many2many_selection')]" position="attributes">
            <attribute name="class" add="w-100" separator=" " />
        </xpath>
        <Many2XAutocomplete position="attributes">
            <attribute name="dropdown">false</attribute>
            <attribute name="placeholder">props.placeholder</attribute>
            <attribute name="autofocus">true</attribute>
        </Many2XAutocomplete>
    </t>

</templates>
