{% load i18n %}

<a-modal ref="user-groups-modal">
    <template #title="{item}">[[ item?.username ]]</template>
    <template #default="{item}">
        <a-many-to-many-edit v-if="item" ref="user-groups"
            :url="'{% url 'api:usergroup-list' %}?user=' + item.id"
            commit-url="{% url 'api:usergroup-commit' %}"

            :source_id="item.id" source_field="user"
            target_field="group"
            :autocomplete="{url:'{% url 'api:group-autocomplete' %}?search=${query}&amp;no_user=' + item.id, 'label-field':'name', 'value-field':'id'}"
            >
            <template #items-title>{% translate "Groups" %}</template>

            <template #item="{item}">
                [[ item.data.group.name ]]
            </template>

            <template #autocomplete-item="{item}">
                [[ item.name ]]
            </template>
        </a-many-to-many-edit>
    </template>
    <template #footer="{item, close}">
        <button type="button" class="button" @click="$refs['user-groups'].save(); close()">
            Save
        </button>
    </template>
</a-modal>
