{% load i18n %}

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

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

            <template #item="{item}">
                <b class="mr-3">[[ item.data.user.username ]]</b>
                <span>[[ item.data.user.first_name ]] [[ item.data.user.last_name ]]</span>
            </template>

            <template #autocomplete-item="{item}">
                <b class="mr-3">[[ item.username ]]</b>
                <span class="text-light">[[ item.first_name ]] [[ item.last_name ]]</span>
                &mdash;
                <i>[[ item.email ]]</i>
            </template>
        </a-many-to-many-edit>
    </template>
    <template #footer="{item, close}">
        <button type="button" class="button" @click="$refs['group-users'].save(); close()">
            Save
        </button>
    </template>
</a-modal>
