<div id="flapSearch" class="tab-pane boxStatic box">
   <div class="row">
      <div class="col-xs-12">
         <p>{'filtersIntroText'|translate:'sections'}</p>
      </div>
   </div>

   <div class="row m-b-1">
      <div class="col-xs-6 d-flex align-items-center">
         {if $tab.data.type == 'sections' && $tab.data.ID > 0}
            {print_toggle attrs="id='data[inherit]'" nameRaw="data[inherit]" value=$tab.data.inherit}
            <label for="data[inherit]">{'filtersInherit'|translate:'sections'}</label>
         {/if}
      </div>

      <div class="col-xs-6 d-flex align-items-center justify-content-end">
         {print_toggle attrs="id='hideInactive'" nameRaw="hideInactive" disabled=($tab.data.inherit == "Y")}
         <label for="hideInactive">{'filtersHideInactive'|translate:'sections'}</label>
         <script type="text/javascript">
            $(() => {
               function getInactiveItems() {
                  return $('[data-filter-item-enabler]').filter((i, el) => !$(el).prop('checked')).closest('[data-filter-item]');
               }

               $('input[name="hideInactive"]').on('change', function () {
                  getInactiveItems().toggleClass('hidden')
               });
            });
         </script>
      </div>
   </div>

   <div class="wpj-panel wpj-panel-default">
      <div class="wpj-panel-heading">
         <div class="row">
            <div class="col-xs-3">
               <span class="drag-drop-mover"><i class="bi bi-arrows-move handle"></i></span>
               <small>{'name'|translate:'sections'}</small>
            </div>
            <div class="col-xs-2">
               <small>{'type'|translate:'sections'}</small>
            </div>
            <div class="col-xs-2">
               <small>{'filterEnable'|translate:'sections'}</small>
            </div>
            <div class="col-xs-3">
            </div>
            {ifmodule CONVERTORS}
               <div class="col-xs-2">
                  <small>{'filterVariationConvertor'|translate:'sections'}</small>
               </div>
            {/ifmodule}
         </div>
      </div>
         <div class="wpj-list-group m-b-0" id="sorter" disabled>
            {foreach from=$tab.data.filterItems item=filter key=key}
               {if $tab.data.inherit == "Y" and $filter.enabled != "Y"}
                  {continue}
               {/if}
               {* String parametry nejdou použít jako filtr *}
               {if $filter.type == 'parameter' && $filter.value_type == 'char' && $filter.enabled != "Y"}
                  {continue}
               {/if}
               {if $filter.type == 'sellers' && $filter.enabled != "Y" && findModule('sellers','my_seller')}
                  {continue}
               {/if}
               <div class="wpj-list-group-item{if $tab.data.inherit == "Y" and $filter.enabled == "Y"} disabled{/if}" data-filter-item="{$key}">
                  <div class="row">
                     <div class="col-xs-3">
                        {if $filter.id and ($filter.id_source_section == $tab.data.ID or $filter.id_source_producer == $tab.data.ID)}
                           <input type="hidden" name="data[filters][{$key}][id]" value="{$filter.id}" />
                        {/if}
                        <input type="hidden" name="data[filters][{$key}][type]" value="{$filter.type}" />

                        <input
                           type="hidden"
                           name="data[filters][{$key}][{if $tab.data.type == 'sections'}id_source_section{else}id_source_producer{/if}]"
                           value="{$tab.data.ID}"
                        />

                        {if $filter.type == 'parameter'}
                           <input type="hidden" name="data[filters][{$key}][id_parameter]" value="{$filter.id_parameter}" />
                        {elseif $filter.type == 'variation'}
                           <input type="hidden" name="data[filters][{$key}][id_variation_label]" value="{$filter.id_variation_label}" />
                        {/if}

                        <div class="d-flex align-items-center">
                           <input type="hidden" name="data[filters][{$key}][position]" value="{$filter.position|default:-1}"
                                  data-sort=""/>
                           <span class="drag-drop-mover{if $filter.enabled != "Y"} disabled{/if}">
                              <i class="bi bi-arrows-move handle"></i>
                           </span>
                           <strong>
                              {if !$filter.name && $filter.type}
                                 {"filter_`$filter.type`"|translate:'filters'}
                              {else}
                                 {$filter.name}
                              {/if}
                           </strong>

                           {if $filter.type == 'parameter' and $filter.value_type == 'char'}
                              <a class="help-tip" data-toggle="tooltip" title="" data-original-title="Parameter typu &quot;text&quot; není podporován a proto nebude v sekci zobrazen.">
                                 <span class="list-no bi bi-x-circle-fill"></span>
                              </a>
                           {/if}
                        </div>
                     </div>
                     <div class="col-xs-2">
                        {if $filter.type == 'variation'}
                           <span class="d-flex align-items-center">
                              <i class="bi bi-lg bi-diagram-2 m-r-2 text-muted"></i>{'typeVariation'|translate:'sections'}
                           </span>
                        {elseif $filter.type == 'parameter'}
                           <span class="d-flex align-items-center">
                              <i class="bi bi-lg bi-sliders m-r-2 text-muted"></i>{'typeParameter'|translate:'sections'}
                           </span>
                        {else}
                           <span class="d-flex align-items-center">
                              <i class="bi bi-lg bi-gear m-r-2 text-muted"></i>{'typeOther'|translate:'sections'}
                           </span>
                        {/if}
                     </div>
                     <div class="col-xs-2">
                        {print_toggle nameRaw="data[filters][`$key`][enabled]" value=$filter.enabled attrs="data-filter-item-enabler=\"`$key`\""  disabled=($tab.data.inherit == "Y")}
                        {if $tab.data.inherit == "Y" and $filter.enabled == "Y"}
                           <input type="hidden" name="data[filters][{$key}][enabled]" value="{$filter.enabled}">
                        {/if}
                        <script type="text/javascript">
                           $(() => {
                              $('input[name="data[filters][{$key}][enabled]"]').on('change', function () {
                                 $(this).closest('[data-filter-item]').find('.drag-drop-mover').toggleClass('disabled');
                              });
                           });
                        </script>
                     </div>
                     <div class="col-xs-3">
                        {ifmodule INDEXED_FILTER}
                           {if $filter.indexing_allowed|default:true and ($filter.type == 'parameter' or $filter.type == 'variation' or $filter.type == 'producer')}
                              <div class="d-flex justify-content-between" style="max-width: 260px;">
                                 <div class="checkbox">
                                    <input type="hidden" name="data[filters][{$key}][indexing]" value="N">
                                    <input type="checkbox" class="check" name="data[filters][{$key}][indexing]" id="PRMINDEX{$key}"
                                           value="Y" {if $filter.indexing == 'Y'}checked="checked"{/if} />

                                    <label for="PRMINDEX{$key}">
                                       {'Index'|translate:'filters'}
                                    </label>
                                 </div>
                                 <div class="checkbox">
                                    <input type="hidden" name="data[filters][{$key}][to_title]" value="N">
                                    <input type="checkbox" class="check" name="data[filters][{$key}][to_title]" id="PRMTITLE{$key}"
                                           value="Y" {if $filter.to_title == 'Y'}checked="checked"{/if} />
                                    <label for="PRMTITLE{$key}">
                                       {'toTitle'|translate:'filters'}
                                    </label>
                                 </div>
                              </div>
                           {/if}
                        {/ifmodule}
                     </div>
                     {ifmodule CONVERTORS}
                        <div class="col-xs-2">
                           {if $filter.type == 'variation'}
                              <select
                                 class="selecter"
                                 name="data[filters][{$key}][convertor]" data-type="convertor"
                                 data-preload="Convertors"
                                 data-filter-type="autocomplete"
                                 data-autocomplete="Convertors"
                                 data-autocomplete-params="allow_empty=1"
                              >
                                 {if $filter.convertor}
                                    <option value="{$filter.convertor}" selected>{$filter.convertor}</option>
                                 {/if}
                              </select>
                           {/if}
                        </div>
                     {/ifmodule}
                  </div>
               </div>
            {/foreach}
         </div>
   </div>

   <script type="text/javascript">
      sort_section('#sorter');

      function sort_section(name) {
         $(name).sortable({
            helper: function (e, row) {
               var $row = $(row);
               var $helper = $row.clone().addClass('drag-drop');
               return $helper[0];
            },
            stop: function (event, ui) {
               $(this).children().each(function (index, item) {
                  $(item).find('[data-sort]').val($(item).index()).change();
               });

               window.somethingChanged = true;
            },
            handle: '.handle',
            placeholder: 'placeholder',
         });
      }
   </script>
</div>
