<%--
/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * The contents of this file are subject to the terms of the Liferay Enterprise
 * Subscription License ("License"). You may not use this file except in
 * compliance with the License. You can obtain a copy of the License by
 * contacting Liferay, Inc. See the License for the specific language governing
 * permissions and limitations under the License, including but not limited to
 * distribution rights of the Software.
 *
 *
 *
 */
--%>

<%@ include file="/init.jsp" %>

<%
RoleItemSelectorViewDisplayContext roleItemSelectorViewDisplayContext = (RoleItemSelectorViewDisplayContext)request.getAttribute(RoleItemSelectorViewConstants.ROLE_ITEM_SELECTOR_VIEW_DISPLAY_CONTEXT);
%>

<clay:management-toolbar
	displayContext="<%= roleItemSelectorViewDisplayContext %>"
/>

<clay:container-fluid
	cssClass="container-form-lg container-view"
	id='<%= liferayPortletResponse.getNamespace() + "roleSelectorWrapper" %>'
>
	<liferay-ui:search-container
		searchContainer="<%= roleItemSelectorViewDisplayContext.getSearchContainer() %>"
	>
		<liferay-ui:search-container-row
			className="com.liferay.portal.kernel.model.Role"
			cssClass="entry"
			keyProperty="roleId"
			modelVar="role"
		>

			<%
			String cssClass = "table-cell-content";

			RowChecker rowChecker = searchContainer.getRowChecker();

			if ((rowChecker != null) && rowChecker.isDisabled(role)) {
				cssClass += " text-muted";
			}

			row.setData(
				HashMapBuilder.<String, Object>put(
					"id", role.getRoleId()
				).put(
					"name", role.getTitle(locale)
				).build());
			%>

			<liferay-ui:search-container-column-text
				cssClass="<%= cssClass %>"
				name="title"
				value="<%= role.getTitle(locale) %>"
			/>

			<liferay-ui:search-container-column-text
				cssClass="<%= cssClass %>"
				name="description"
				value="<%= role.getDescription(locale) %>"
			/>
		</liferay-ui:search-container-row>

		<liferay-ui:search-iterator
			displayStyle="list"
			markupView="lexicon"
		/>
	</liferay-ui:search-container>
</clay:container-fluid>

<c:choose>
	<c:when test="<%= roleItemSelectorViewDisplayContext.getItemSelectorCriterion() instanceof RoleItemSelectorCriterion %>">
		<aui:script require="metal-dom/src/all/dom as dom">
			var selectItemHandler = dom.delegate(
				document.getElementById('<portlet:namespace />roleSelectorWrapper'),
				'change',
				'.entry input',
				function (event) {
					var checked = Liferay.Util.listCheckedExcept(
						document.getElementById(
							'<portlet:namespace /><%= roleItemSelectorViewDisplayContext.getSearchContainerId() %>'
						),
						'<portlet:namespace />allRowIds'
					);

					Liferay.Util.getOpener().Liferay.fire(
						'<%= HtmlUtil.escapeJS(roleItemSelectorViewDisplayContext.getItemSelectedEventName()) %>',
						{
							data: {
								value: checked,
							},
						}
					);
				}
			);

			Liferay.on('destroyPortlet', function removeListener() {
				selectItemHandler.removeListener();

				Liferay.detach('destroyPortlet', removeListener);
			});
		</aui:script>
	</c:when>
	<c:otherwise>
		<aui:script use="liferay-search-container">
			var searchContainer = Liferay.SearchContainer.get(
				'<portlet:namespace /><%= HtmlUtil.escape(roleItemSelectorViewDisplayContext.getSearchContainerId()) %>'
			);

			searchContainer.on('rowToggled', function (event) {
				var allSelectedElements = event.elements.allSelectedElements;
				var selectedData = [];

				allSelectedElements.each(function () {
					var row = this.ancestor('tr');

					var data = row.getDOM().dataset;

					selectedData.push({
						id: data.id,
						name: data.name,
					});
				});

				Liferay.Util.getOpener().Liferay.fire(
					'<%= HtmlUtil.escapeJS(roleItemSelectorViewDisplayContext.getItemSelectedEventName()) %>',
					{
						data: selectedData,
					}
				);
			});
		</aui:script>
	</c:otherwise>
</c:choose>