{% extends "@bazar/layouts/input.twig" %}

{% block input %}
{{ include_css('tools/bazar/presentation/styles/inputs/checkbox-drag-and-drop.css') }}
<div class="row row-fluid yeswiki-checkbox checkbox{{ field.required ? ' chk_required' : ''}}">
	<div class="col-lg-4 export-table-container">
		<h4>{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_AVAILABLE_ITEM') }}<img loading="lazy" class="tooltip_aide" title="{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_ITEM_INFO')  ~ "'+'." }}" alt="{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_ITEM_INFO')  ~ "'+'." }}" src="tools/bazar/presentation/images/aide.png" width="16" height="16" /></h4>
		<div class="input-group input-prepend input-append">
			<span class="input-group-addon add-on"><i class="fas fa-filter"></i></span>
			<input class="checkbox-filter-input form-control input-sm" type="text" id="filter-{{field.propertyName}}" value="" placeholder="{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_FILTER_ITEM') }}" style="background: var(--neutral-light-color);;"/>
			<span class="input-group-btn add-on">
				<button class="btn btn-default btn-sm btn-erase-filter" type="button">&times;</button>
			</span>
		</div><!-- /input-group -->
		<span class="help-block align-right">{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_FILTER_TEXT') }}<span class="checkbox-filter-count">
			{%- set nb_selected = not (attribute(selectedOptionsId,0) is empty) ? selectedOptionsId|length : 0 -%}
			{{ options|length - nb_selected }}</span></span>
	<h5>{{ formName }}
		<a class="pull-right btn btn-sm btn-success checkbox-select-all" title="{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_ADD_ALL') }}" href="#">
		  <i class="fas fa-plus"></i> {{ _t('BAZ_DRAG_n_DROP_CHECKBOX_ADD_ALL') }}</a>
	</h5>
	<div class="clearfix"></div>
	  <div style="max-height:{{ height ?? 300 }}px;overflow:auto;">
		<ul class="list-entries-to-export list-group group-{{ field.propertyName }}" data-group="{{ field.propertyName }}">
		{% block list_options %}
			{% for item_id, item in options %}
				{% if item not in selectedOptionsId %}
					{% set selected = false %}
					{% block li_item %}
					<li class="list-group-item">						
						<span class="pull-left {{ not selected ? 'hide ' }}movable btn btn-default btn-xs"><i class="fas fa-arrows-alt-v"></i></span>
						<div class="checkbox-icons-up-down{{ not selected ? ' hide ' }}">
							<div class="checkbox-icons-up btn btn-default btn-xs"><i class="fas fa-chevron-up"></i></div>
							<div class="checkbox-icons-down btn btn-default btn-xs"><i class="fas fa-chevron-down"></i></div>
						</div>
						<div class="checkbox-icon-column-left">
							<span class="movable-h btn btn-default btn-xs{{ selected ? ' hide ' }}"><i class="fas fa-arrows-alt-h"></i></span>
							{%~ block link_for_entry ~%}
							{%~ endblock ~%}
						</div>
						<input type="checkbox" id="{{ field.propertyName }}_{{ item_id }}" value="1" name="{{ field.propertyName  }}[{{ item_id }}]" class="element_checkbox hide"{{ selected ? ' checked' }}><span style="display:none;"></span>
						<span class="list-item-text">{{ item|striptags }}</span>
						<a class="btn btn-xs btn-success select-page-item{{ selected ? ' hide ' }}" title="{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_SELECT_ITEM') ~ " " ~ item|e ~ " " ~ _t('BAZ_DRAG_n_DROP_CHECKBOX_FOR_THE_LIST') }}" href="#">
							<i class="fas fa-plus"></i>
						</a>
						<a class="btn btn-xs btn-danger remove-page-item{{ not selected ? ' hide ' }}" title="{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_DELETE_ITEM') ~ " " ~ item|e ~ " " ~ _t('BAZ_DRAG_n_DROP_CHECKBOX_FROM_THE_LIST') }}" href="#">
							<i class="fas fa-minus"></i>
						</a>
					</li>
					{% endblock %}
				{% endif %}{# if not item_id in selectedOptionsId #}
			{% endfor %}{# for item_id, item in options #}
		{% endblock %}
			<li class="list-group-item empty-list" style="display:none;">{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_EMPTY_LIST') }}</li>
		</ul>
		<input type="hidden" value="{{ oldValue ?? '\'\''}}" name="{{ field.propertyName  ~ field.fromFormId }}">
	  </div>
	</div><!-- /.col-lg-4.export-table-container -->

	<div class="col-lg-8 import-table-container">
		<h4>{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_YOUR') }} {{ name }}<img loading="lazy" class="tooltip_aide" title="{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_ORDER_ITEM_INFO') }}" alt="{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_ORDER_ITEM_INFO') }}" src="tools/bazar/presentation/images/aide.png" width="16" height="16" />
		<a class="pull-right btn btn-sm btn-danger checkbox-remove-all" title="{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_REMOVE_ALL') }}" href="#">
		  <i class="fas fa-minus"></i> {{ _t('BAZ_DRAG_n_DROP_CHECKBOX_REMOVE_ALL') }}
		</a></h4>
		<div class="clearfix"></div>
		<div class="well" style="max-height:{{ height ? height + 110 : 410}}px;overflow:auto;">
			<ul class="checkbox-selection-container list-group group-{{ field.propertyName }}" data-group="{{ field.propertyName }}">
			{% if not (attribute(selectedOptionsId,0) is empty) %}
			{% block list_selected %}
			  {% for item_id in selectedOptionsId %}
				{% set item = attribute(options,item_id) %}
				{% set selected = true %}
				{{ block('li_item') }}
			  {% endfor %}{# for item_id in selectedOptionsId #}
			{% endblock %}
			{% endif %}{# if not (attribute(selectedOptionsId,0) is empty) #}
			<li class="list-group-item empty-list" {% if not (attribute(selectedOptionsId,0) is empty) %}style="display:none;"{% endif %}>{{ _t('BAZ_DRAG_n_DROP_CHECKBOX_EMPTY_LIST') }}</li>
			</ul>
		</div>
	</div> <!-- /.col-lg-8. publication-selection-container -->
</div> <!-- /.row -->
{{ include_javascript('javascripts/vendor/jquery-ui-sortable/jquery-ui.min.js') }}
{{ include_javascript('tools/bazar/libs/vendor/jquery.fastLiveFilter.js') }}
{{ include_javascript('tools/bazar/presentation/javascripts/inputs/checkbox-drag-and-drop.js') }}
{% endblock %}
