<%--
/**
 * 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="/asset_addon_entry_selector/init.jsp" %>

<div class="lfr-asset-addon-entry-selector" id="<%= namespace + id %>assetAddonEntrySelector">
	<aui:input name="<%= hiddenInput %>" type="hidden" value='<%= ListUtil.toString(selectedAssetAddonEntries, "key") %>' />

	<ul class="list-inline list-unstyled row selected-entries">

		<%
		for (AssetAddonEntry assetAddonEntry : selectedAssetAddonEntries) {
		%>

			<li class="col-md-4 list-entry" data-key="<%= assetAddonEntry.getKey() %>" data-label="<%= assetAddonEntry.getLabel(locale) %>">
				<div class="card card-horizontal card-type-directory">
					<div class="card-body">
						<div class="card-row">
							<clay:content-col
								expand="<%= true %>"
								gutters="<%= true %>"
							>
								<clay:content-section
									containerElement="section"
								>
									<h3 class="card-title" title="{label}">
										<span class="text-truncate-inline">
											<span class="text-truncate"><%= assetAddonEntry.getLabel(locale) %></span>
										</span>
									</h3>
								</clay:content-section>
							</clay:content-col>

							<clay:content-col>
								<a class="remove-button" href="javascript:void(0);">
									<aui:icon image="times-circle" markupView="lexicon" />
								</a>
							</clay:content-col>
						</div>
					</div>
				</div>
			</li>

		<%
		}
		%>

	</ul>

	<div class="button-holder">
		<aui:button cssClass="select-button" name='<%= id + "selectButton" %>' value="select" />
	</div>
</div>

<aui:script use="liferay-asset-addon-entry-selector">
	var assetAddonEntries = [];

	<%
	for (AssetAddonEntry assetAddonEntry : assetAddonEntries) {
	%>

		assetAddonEntries.push({
			icon: '<%= assetAddonEntry.getIcon() %>',
			key: '<%= assetAddonEntry.getKey() %>',
			label: '<%= assetAddonEntry.getLabel(locale) %>',
		});

	<%
	}
	%>

	var selectedAssetAddonEntries = [];

	<%
	for (AssetAddonEntry assetAddonEntry : selectedAssetAddonEntries) {
	%>

		selectedAssetAddonEntries.push('<%= assetAddonEntry.getKey() %>');

	<%
	}
	%>

	new Liferay.AssetAddonEntrySelector({
		assetAddonEntries: assetAddonEntries,
		dialogTitle: '<liferay-ui:message key="<%= title %>" />',
		rootNode: '#<%= namespace + id %>assetAddonEntrySelector',
		selectedAssetAddonEntries: selectedAssetAddonEntries,
	});
</aui:script>