<commit_before><!--
  - @copyright Copyright (c) 2020 <NAME> <<EMAIL>>
  -
  - @author <NAME> <<EMAIL>>
  -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
  - License, or (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  - GNU Affero General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<template>
	<div class="participants-search-results"
		:class="{'scrollable': scrollable }">
		<template v-if="addableUsers.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Add users')" />
			<ParticipantsList :items="addableUsers"
				@click="handleClickParticipant" />
		</template>

		<template v-if="addableGroups.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Add groups')" />
			<ParticipantsList :items="addableGroups"
				@click="handleClickParticipant" />
		</template>

		<template v-if="addableEmails.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Add emails')" />
			<ParticipantsList :items="addableEmails"
				@click="handleClickParticipant" />
		</template>

		<template v-if="addableCircles.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Add circles')" />
			<ParticipantsList :items="addableCircles"
				@click="handleClickParticipant" />
		</template>

		<template v-if="integrations.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Integrations')" />

			<ul>
				<li v-for="(integration, index) in integrations"
					:key="'integration' + index"
					@click="runIntegration(integration)">
					{{ integration.label }}
				</li>
			</ul>
		</template>

		<template v-if="addableRemotes.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Add federated users')" />
			<ParticipantsList :items="addableRemotes"
				@click="handleClickParticipant" />
		</template>
		<AppNavigationCaption v-if="sourcesWithoutResults"
			:title="sourcesWithoutResultsList" />
		<Hint v-if="contactsLoading" :hint="t('spreed', 'Searching …')" />
		<Hint v-if="!contactsLoading && sourcesWithoutResults" :hint="t('spreed', 'No search results')" />
		<template v-if="isNewGroupConversation">
			<template v-if="noResults">
				<div class="icon-category-search participants-search-results__icon" />
				<p class="participants-search-results__warning">
					{{ t('spreed', 'No results') }}
				</p>
			</template>
			<!-- 'search for more' empty content to display at the end of the
				participants list, this is useful in case the participants list is used
				to display the results of a search. Upon clicking on it, an event is
				emitted to the parent component in order to be able to focus on it's
				input field -->
			<div v-if="displaySearchHint && !noResults"
				class="participants-search-results__hint"
				@click="handleClickHint">
				<div class="icon-contacts-dark set-contacts__icon" />
				<p>
					{{ t('spreed', 'Search for more users') }}
				</p>
			</div>
		</template>
	</div>
</template>

<script>
import ParticipantsList from '../ParticipantsList/ParticipantsList.vue'
import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
import Hint from '../../../Hint.vue'

export default {
	name: 'ParticipantsSearchResults',

	components: {
		ParticipantsList,
		AppNavigationCaption,
		Hint,
	},

	props: {
		searchResults: {
			type: Array,
			required: true,
		},
		contactsLoading: {
			type: Boolean,
			required: true,
		},
		/**
		 * Display no-results state instead of list.
		 */
		noResults: {
			type: Boolean,
			default: false,
		},
		/**
		 * Display 'search for more' empty content at the end of the list.
		 */
		displaySearchHint: {
			type: Boolean,<commit_msg>Improve styles<commit_after><!--
  - @copyright Copyright (c) 2020 <NAME> <<EMAIL>>
  -
  - @author <NAME> <<EMAIL>>
  -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
  - License, or (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  - GNU Affero General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<template>
	<div class="participants-search-results"
		:class="{'scrollable': scrollable }">
		<template v-if="addableUsers.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Add users')" />
			<ParticipantsList :items="addableUsers"
				@click="handleClickParticipant" />
		</template>

		<template v-if="addableGroups.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Add groups')" />
			<ParticipantsList :items="addableGroups"
				@click="handleClickParticipant" />
		</template>

		<template v-if="addableEmails.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Add emails')" />
			<ParticipantsList :items="addableEmails"
				@click="handleClickParticipant" />
		</template>

		<template v-if="addableCircles.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Add circles')" />
			<ParticipantsList :items="addableCircles"
				@click="handleClickParticipant" />
		</template>

		<!-- integrations -->
		<template v-if="integrations.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Integrations')" />
			<ul>
				<Button v-for="(integration, index) in integrations"
					:key="'integration' + index"
					type="tertiary-no-background"
					@click="runIntegration(integration)">
					<!-- FIXME: dinamically change the material design icon -->
					<AccountPlus slot="icon"
						decorative
						title=""
						:size="20" />
					{{ integration.label }}
				</Button>
			</ul>
		</template>

		<template v-if="addableRemotes.length !== 0">
			<AppNavigationCaption :title="t('spreed', 'Add federated users')" />
			<ParticipantsList :items="addableRemotes"
				@click="handleClickParticipant" />
		</template>
		<AppNavigationCaption v-if="sourcesWithoutResults"
			:title="sourcesWithoutResultsList" />
		<Hint v-if="contactsLoading" :hint="t('spreed', 'Searching …')" />
		<Hint v-if="!contactsLoading && sourcesWithoutResults" :hint="t('spreed', 'No search results')" />
		<template v-if="isNewGroupConversation">
			<template v-if="noResults">
				<div class="icon-category-search participants-search-results__icon" />
				<p class="participants-search-results__warning">
					{{ t('spreed', 'No results') }}
				</p>
			</template>
			<!-- 'search for more' empty content to display at the end of the
				participants list, this is useful in case the participants list is used
				to display the results of a search. Upon clicking on it, an event is
				emitted to the parent component in order to be able to focus on it's
				input field -->
			<div v-if="displaySearchHint && !noResults"
				class="participants-search-results__hint"
				@click="handleClickHint">
				<div class="icon-contacts-dark set-contacts__icon" />
				<p>
					{{ t('spreed', 'Search for more users') }}
				</p>
			</div>
		</template>
	</div>
</template>

<script>
import ParticipantsList from '../ParticipantsList/ParticipantsList.vue'
import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
import Hint from '../../../Hint.vue'
import AccountPlus from 'vue-material-design-icons/AccountPlus.vue'
import Button from '@nextcloud/vue/dist/Components/Button'

export default {
	name: 'ParticipantsSearchResults',

	components: {
		ParticipantsList,
		AppNavigationCaption,
		Hint,
		AccountPlus,
		Button,
	},

	props: {
		searchResults: {
			type: Array,
			required: true,
		},
		contactsLoading: {
			type: Boolean,
			required: true,
		},
		/**
		 * Display no-results state instead of list.
		 */
		noResults: {
			type: Boolean,
			default: false,
		},
		/**
		 * Display 'search for more' empty content at the end of the list.
		 */
		displaySearchHint: {
			type: Boolean,
{'fraction_non_alphanumeric': 0.14198243992606285, 'fraction_numerical': 0.0030036968576709795, 'mean_word_length': 3.7696969696969695, 'pattern_counts': {'":': 0, '<': 118, '<?xml version=': 0, '>': 118, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3233800', 'n_tokens_mistral': 3073, 'n_tokens_neox': 2600, 'n_words': 746}