{extends "../window.tpl"}

{block tabs}
   {windowTab id='Bannery' label="Bannery"}
   {if {find_module name="products_sections"} && $body.acn == "edit"}
      {windowTab id='flapRelation' label={'flapRelation'|translate:'parameters'}}
   {/if}
{/block}

{block tabsContent}
   <input type="hidden" name="page" value="{$pager.number}">
   <div id="Bannery" class="tab-pane fade active in boxStatic window-sliders">
      <legend>Bannery</legend>
      <div class="row">
         <div class="col-md-6">
            <div class="form-group form-group-flex">
               <label class="col-md-3 control-label">{'name'|translate}</label>
               <div class="col-md-9">
                  <input type="text" class="form-control input-sm" name="data[name]" size="20" maxlength="30"
                         value="{$body.data.name}">
               </div>
            </div>
         </div>
         {if isSuperuser()}
            <div class="col-md-6">
               <div class="form-group form-group-flex">
                  <label class="col-md-3 control-label">
                     <span class="glyphicon glyphicon-flash" style="color: #aab2bd;" title="Vidí pouze superadmin"></span>
                     Label
                  </label>
                  <div class="col-md-9">
                     <input type="text" class="form-control input-sm" name="data[label]" maxlength="50" value="{$body.data.label}">
                  </div>
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group form-group-flex">
                  <label class="col-md-3 control-label">
                     <span class="glyphicon glyphicon-flash" style="color: #aab2bd;" title="Vidí pouze superadmin"></span>
                     {'size'|translate}
                  </label>
                  <div class="col-md-9">
                     <input type="text" class="form-control input-sm" name="data[size]" maxlength="30"
                            value="{$body.data.size}">
                  </div>
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group form-group-flex">
                  <label class="col-md-3 control-label">
                     <span class="glyphicon glyphicon-flash" style="color: #aab2bd;" title="Vidí pouze superadmin"></span>
                     {'size_tablet'|translate}
                  </label>
                  <div class="col-md-9">
                     <input type="text" class="form-control input-sm" name="data[size_tablet]" maxlength="30"
                            value="{$body.data.size_tablet}">
                  </div>
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group form-group-flex">
                  <label class="col-md-3 control-label">
                     <span class="glyphicon glyphicon-flash" style="color: #aab2bd;" title="Vidí pouze superadmin"></span>
                     {'size_mobile'|translate}
                  </label>
                  <div class="col-md-9">
                     <input type="text" class="form-control input-sm" name="data[size_mobile]" maxlength="30"
                            value="{$body.data.size_mobile}">
                  </div>
               </div>
            </div>
         {/if}
      </div>
      <hr>
      <div id="sliders">
         <div class="row m-b-2">
            <div class="col-md-6">
               <a href="#" data-form-add class="btn btn-success btn-block">
                  <span class="glyphicon glyphicon-plus"></span>&nbsp;{'addBannerItem'|translate}
               </a>
            </div>
            {if $body.data.size and !$body.data.size_tablet and !$body.data.size_mobile}
               <div class="col-md-6">
                  <span class="help-block">
                     {'bannerSizeNote'|translate}
                     <strong>{$body.data.size}</strong>
                     {'pixels'|translate}
                  </span>
               </div>
            {/if}
         </div>

         <div id="sliders">
            <div id="sorter">
               {foreach array_merge([[]], $body.images) as $key => $image}
                  <div class="panel {if $key > 0 and !$image.active}old{/if}" {if $key == 0}data-form-new style="display: none;"
                       {else}data-form-item{/if}>
                     <input type="hidden" name="data[images][{$key}][id]" value="{$image.id}">
                     <input type="hidden" name="data[images][{$key}][id_photo]" value="{$image.id_photo}">
                     <div class="panel-body">
                        <div class="row row-flex">
                           <div class="col-md-1 text-center actions">
                              {if $key > 0}
                                 <span class="drag-drop-mover"><span class="bi bi-arrows-move handle"></span></span>
                              {/if}
                           </div>
                           {if $key > 0}
                              <div class="col-md-3 text-center photo">
                                 <a href="{get_photo photo=$image.img size='slider'}" class="thumbnail" data-rel="bigphoto">
                                    <img src="{get_photo photo=$image.img size='slider'}" class="img-rounded img-limited">
                                 </a>
                              </div>
                              <div class="col-md-3 sizes">
                                 {* Desktop obrázek - vždy by měl být nastaven, pokud je slider uložen *}
                                 <div>
                                    <span class="fc icons_desktop"></span>
                                    {* Náhled obrázku *}
                                    <a href="{get_photo photo=$image.img size='slider'}" data-rel="bigphoto">{$body.data.size}</a>
                                    {* Editace obrázku *}
                                    <a href="javascript:nw('photos', '{$image.img.id}');">
                                       <span class=" glyphicon glyphicon-cog"></span>{'edit'|translate}
                                    </a>
                                 </div>

                                 {* Verze obrázku pro tablet - nemusí být nastaven, pokud je slider uložen,
                                 takže mu dáváme možnost obrázek dohrát, když ještě není nastaven *}
                                 {if $body.data.size_tablet or $image.img.imageTablet}
                                    <div>
                                       <span class="fc icons_tablet"></span>
                                       {* Náhled obrázku *}
                                       {if $image.img.imageTablet}
                                          <a href="{get_photo photo=$image.img size='slider' version='tablet'}" data-rel="bigphoto">
                                             {$body.data.size_tablet|default:"Tablet"}
                                          </a>
                                       {else}
                                          {$body.data.size_tablet|default:"Tablet"}
                                       {/if}
                                       {* Editace / upload obrázku *}
                                       {if !$image.img.imageTablet}
                                          <input type="file" class="filestyle" name="image[{$key}][tablet]"
                                                 data-input="false" data-buttonText="Nahrát">
                                       {else}
                                          <a href="javascript:nw('photos', '{$image.img.id}', 'flap=flapResponsive');"
                                             title="Upravit banner"><span class="glyphicon glyphicon-cog"></span>{'edit'|translate}
                                          </a>
                                       {/if}
                                    </div>
                                 {/if}

                                 {* Verze obrázku pro mobil - nemusí být nastaven, pokud je slider uložen,
                                 takže mu dáváme možnost obrázek dohrát, když ještě není nastaven *}
                                 {if $body.data.size_mobile or $image.img.imageMobile}
                                    <div>
                                       <span class="fc icons_mobile"></span>
                                       {* Náhled obrázku *}
                                       {if $image.img.imageMobile}
                                          <a href="{get_photo photo=$image.img size='slider' version='mobile'}" data-rel="bigphoto">
                                             {$body.data.size_mobile|default:"Mobil"}
                                          </a>
                                       {else}
                                          {$body.data.size_mobile|default:"Mobil"}
                                       {/if}
                                       {* Editace / upload obrázku *}
                                       {if !$image.img.imageMobile}
                                          <input type="file" class="filestyle" name="image[{$key}][mobile]"
                                                 data-input="false" data-buttonText="Nahrát">
                                       {else}
                                          <a href="javascript:nw('photos', '{$image.img.id}', 'flap=flapResponsive');">
                                             <span class="glyphicon glyphicon-cog"></span>{'edit'|translate}
                                          </a>
                                       {/if}
                                    </div>
                                 {/if}
                                 <div>
                                    <span class="help-block m-t-0">
                                       <strong>ID:</strong> {$image.id}
                                    </span>
                                 </div>
                              </div>
                           {else}
                              <div class="col-md-3 text-center photo">
                                 <a href="{get_photo photo=0 size='slider'}" class="thumbnail" rel="bigphoto">
                                    <img src="{get_photo photo=0 size='slider'}" class="img-rounded img-limited" style="max-height: 70px;">
                                 </a>
                              </div>
                              <div class="col-md-3 sizes unstyled">
                                 <div>
                                    <span class="fc icons_desktop"></span>
                                    {$body.data.size}
                                    <input type="file" class="filestyle" name="image[{$key}][desktop]" data-input="false"
                                           data-buttonText="Nahrát">
                                 </div>
                                 {if $body.data.size_tablet or $image.img.imageTablet}
                                    <div>
                                       <span class="fc icons_tablet"></span>
                                       {$body.data.size_tablet}
                                       <input type="file" class="filestyle" name="image[{$key}][tablet]" data-input="false"
                                              data-buttonText="Nahrát">
                                    </div>
                                 {/if}
                                 {if $body.data.size_mobile or $image.img.imageMobile}
                                    <div>
                                       <span class="fc icons_mobile"></span>
                                       {$body.data.size_mobile}
                                       <input type="file" class="filestyle" name="image[{$key}][mobile]" data-input="false"
                                              data-buttonText="Nahrát">
                                    </div>
                                 {/if}
                              </div>
                           {/if}

                           <div class="col-md-4 dates">
                              <div class="row form-group">
                                 <div class="col-md-5 control-label">
                                    <label>{'labelFrom'|translate}</label>
                                 </div>
                                 <div class="col-md-7">
                                    <input type="text" name="data[images][{$key}][date_from]"
                                           id="{if $key == 0}date_from_init{else}date_from{$key}{/if}" class="form-control input-sm"
                                           value="{$image.date_from|format_datetime:"empty"}" autocomplete="off">
                                    {if $key != 0}
                                       {insert_calendar selector="#date_from`$key`" format='datetime'}
                                    {/if}
                                 </div>
                              </div>
                              <div class="row form-group">
                                 <div class="col-md-5 control-label">
                                    <label>{'labelTo'|translate}</label>
                                 </div>
                                 <div class="col-md-7">
                                    <input type="text" name="data[images][{$key}][date_to]"
                                           id="{if $key == 0}date_to_init{else}date_to{$key}{/if}" class="form-control input-sm"
                                           value="{$image.date_to|format_datetime:"empty"}" autocomplete="off">
                                    {if $key != 0}
                                       {insert_calendar selector="#date_to`$key`" format='datetime'}
                                    {/if}
                                 </div>
                              </div>

                              {if !$body.duplicate}
                                 <a class="badge" href="javascript:topPosition('{$image.id}')" title="{'topPositionTitle'|translate}">
                                    <span class="glyphicon glyphicon-arrow-up handle"></span>{'topPosition'|translate}
                                 </a>
                              {/if}
                           </div>
                           <div class="col-md-1 open">
                              <a href="" data-opener=".opener-content-{$key}">
                                 <span class="is-active"><span class="glyphicon glyphicon-chevron-down"></span> {'more'|translate}</span>
                                 <span class="is-inactive"><span class="glyphicon glyphicon-chevron-up"></span> {'less'|translate}</span>
                              </a>
                           </div>
                           <div class="col-md-1 delete">
                              <a class="btn-sm btn btn-danger" data-form-delete>
                                 <input class="hidden" type="checkbox" name="data[images][{$key}][delete]">
                                 <span class="glyphicon glyphicon-remove"></span>
                              </a>
                           </div>
                        </div>

                        <div class="row opener-content" style="display: none;">
                           <div class="col-md-12">
                              {block "description"}
                                 <div class="row form-group">
                                    <div class="col-md-2 control-label">
                                       <label>Nadpis</label>
                                    </div>
                                    <div class="col-md-10">
                                       <textarea name="data[images][{$key}][data][title]" class="form-control input-sm">{$image.data.title}</textarea>
                                    </div>
                                 </div>
                                 <div class="row form-group">
                                    <div class="col-md-2 control-label">
                                       <label>{'labelDescription'|translate}</label>
                                    </div>
                                    <div class="col-md-10">
                                       <input type="hidden" name="data[images][{$key}][position]"
                                              value="{$image.position}" data-sort="">
                                       <textarea name="data[images][{$key}][description]" id="sliderTitleID0"
                                                 class="form-control input-sm">{$image.description}</textarea>
                                    </div>
                                 </div>
                              {/block}
                              <div class="row form-group">
                                 <div class="col-md-2 control-label">
                                    <label>{'labelLink'|translate}</label>
                                 </div>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control input-sm"
                                           name="data[images][{$key}][link]" size="15" value="{$image.link}"
                                           style="width: 100%;">
                                 </div>
                              </div>
                              <div class="row form-group">
                                  <div class="col-md-2 control-label">
                                    <label>{'figure'|translate}</label>
                                  </div>
                                  <div class="col-md-10">
                                    {print_toggle nameRaw="data[images][`$key`][figure]" value=$image.figure}
                                    {include "utils/translations.figure.tpl"
                                       figureData=$image.sliderTranslationsFigure
                                       parentFigure=$image.figure
                                       inputPrefix="data[images][`$key`]"
                                       parentFigureInput="[name=\"data[images][`$key`][figure]\"]"
                                    }
                                  </div>
                              </div>
                              {block "custom-data"}
                                 {if in_array($body.data.label, ["home"])}
                                    <div class="row form-group">
                                       <div class="col-md-2 control-label">
                                          <label for="custom-color">Tlačítko</label>
                                       </div>
                                       <div class="col-md-10">
                                          <input name="data[images][{$key}][data][btn]" value="{$image.data.btn}" class="form-control">
                                       </div>
                                    </div>
                                    <div class="row form-group">
                                       <div class="col-md-2 control-label">
                                          <label for="custom-color">Pozadí</label>
                                       </div>
                                       <div class="col-md-4">
                                          <select name="data[images][{$key}][data][color]" class="form-control">
                                             <option value="black" {if $image.data.color == "black"}selected{/if}>Tmavé</option>
                                             <option value="white" {if $image.data.color == "white"}selected{/if}>Světlé</option>
                                          </select>
                                       </div>
                                    </div>
                                    {ifmodule COMPONENTS}
                                       <div class="row form-group">
                                          <div class="col-md-2 control-label">
                                             <label for="custom-color">Barva tlačítka</label>
                                          </div>
                                          <div class="col-md-4">
                                             <select name="data[images][{$key}][data][btncolor]" class="form-control">
                                                <option value="light" {if $image.data.btncolor == "light"}selected{/if}>Světlé</option>
                                                <option value="dark" {if $image.data.btncolor == "dark"}selected{/if}>Tmavé</option>
                                             </select>
                                          </div>
                                       </div>
                                    {/ifmodule}
                                    {if $cfg.tpl.slider_product}
                                       <div class="row form-group">
                                          <div class="col-md-2 control-label">
                                             <label>Produkt</label>
                                          </div>
                                          <div class="col-md-10">
                                             <select name="data[images][{$key}][data][products][]" multiple='multiple'
                                                     class="selecter selecter-sortable" id="products{$key}"
                                                     data-preload="products" data-autocomplete="productId">
                                                {foreach $image.data.products as $product}
                                                   <option value="{$product}" selected>{$product}</option>
                                                {/foreach}
                                             </select>
                                          </div>
                                       </div>
                                    {/if}
                                 {/if}
                              {/block}
                           </div>
                        </div>
                     </div>
                  </div>
               {/foreach}
            </div>
         </div>

         {include "utils/pager.tpl"}
      </div>

      {if empty($body.images)}
         <script src="./static/js/jquery.datetimepicker.js"></script>
         <script src="./static/js/jquery-ui.datepicker-cs.js"></script>
      {/if}

      <script>
         $('#sliders').on('click', '[data-opener]', function () {
            let $target = $(this).closest('.panel-body').find('.opener-content');
            $target.slideToggle();
            $(this).toggleClass('active');
            return false;
         });


         var inited = 0
         initForm({
            selector: '#sliders',
            beforeAdd: function (original) {
               var $item = original()

               window.preloadAutocompletes($item);

               var $input = $item.find('#date_from_init')
               $input.attr('id', 'date_from_init' + inited)
               $input.datetimepicker({
                  dateFormat: 'd.m.yy',
                  timeFormat: 'hh:mm:ss'
               })

               $input = $item.find('#date_to_init')
               $input.attr('id', 'date_to_init' + inited)
               $input.datetimepicker({
                  dateFormat: 'd.m.yy',
                  timeFormat: 'hh:mm:ss'
               })

               inited++

               return false
            },
         })
      </script>

      <script>
         $('#sorter').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() +{($pager.number-1)*$pager.onPage}).change()
               })
            },
            handle: '.handle',
            placeholder: 'placeholder'
         })

         function topPosition(id) {
            if (id) {
               document.location = document.location + '&acn=drag&page=1&moved_item=' + id
            }
            return false
         }
      </script>
   </div>
   {if {find_module name="products_sections"} && $body.acn == "edit"}
      <div id="flapRelation" class="tab-pane fade boxStatic box">
         {$positions = KupShop\ContentBundle\Util\SliderUtil::getPositions()}
         <div class="row bottom-space">
            <div class="col-xs-6">
               <div class="wpj-form-group">
                  <label>{'addSection'|translate}</label>
                  <div data-sections-autocomplete></div>
               </div>
            </div>
         </div>
         <div class="wpj-panel wpj-panel-default">
            <div class="wpj-panel-heading">
               <div class="row">
                  <div class="col-xs-2">
                     <small>{'sectionName'|translate:'sliders'}</small>
                  </div>
                  {foreach $positions as $position => $positionName}
                     <div class="col-xs-2">
                        <div class="checkbox">
                           <input
                              type="checkbox"
                              class="check"
                              id="check-all-{$position}"
                              data-check-all="{$position}"
                           />
                           <label for="check-all-{$position}">
                              {if count($positions) === 1}
                                 Banner
                              {else}
                                 {$positionName} banner
                              {/if}
                           </label>
                        </div>
                     </div>
                  {/foreach}
                  <div class="col-xs-2 m-l-auto">
                     <small>{'sectionTags'|translate:'sliders'}</small>
                  </div>
               </div>
            </div>

            <div class="wpj-list-group">
               <div class="wpj-list-group-item" style="display: none;" data-form-new>
                  <div class="row" data-section-id="">
                     <div class="col-xs-2" data-section-name></div>
                     <div class="col-xs-2 m-l-auto" data-section-badges></div>
                  </div>
               </div>
               {foreach $body.data.slider_sections as $sliderSection}
                  {$sectionId = $sliderSection.id}

                  <div class="wpj-list-group-item" data-form-item>
                     <div class="row" data-section-id="{$sectionId}">
                        <div class="col-xs-2" data-section-name>
                           <strong>{$sliderSection.name}</strong><br />
                           <small class="text-muted">{if strcasecmp($sliderSection.name, $sliderSection.full_path)}{$sliderSection.full_path}{/if}</small>
                        </div>
                        {foreach $positions as $position => $_}
                           {$sliderPosition = $sliderSection.positions[$position]}
                           <span data-checkbox='{ldelim}"id_section":{$sectionId},"id_slider":{$body.ID},"position":"{$position}"{rdelim}'
                                 {if $sliderPosition.id_slider == $body.ID}data-checked{/if}
                                 data-title="{$sliderPosition.slider_name}"
                           ></span>
                        {/foreach}
                        <div class="col-xs-2 m-l-auto" data-section-badges>
                           {foreach $sliderSection.badges as $badge}
                              {$badge.title = $badge.translate_key|translate:'sections'}
                              <span data-badge='{$badge|json_encode nofilter}'></span>
                           {/foreach}
                        </div>
                     </div>
                  </div>
               {/foreach}
            </div>
         </div>
      </div>
   {/if}
{/block}

<script type="text/javascript">
   {block onready append}
   initForm({
      selector: '#flapRelation',
   });

   async function checkAndAddSection(sectionId, withSubsections = false) {
      {literal}
      if (!$(`[data-section-id="${sectionId}"]`).length) {
         await addSectionRow(sectionId);
         return true;
      }
      {/literal}

      if (!withSubsections) {
         alert('Tato sekce je už přidána.');
      }

      return false;
   }

   async function addSectionRow(sectionId) {
      const sliderId = {$body.ID};
      {literal}
      const endpoint = `launch.php?s=sliders.php&acn=ajaxSection&id_section=${sectionId}`;
      const url = new URL(endpoint, window.location.href);

      let newSection = undefined;
      try {
         newSection = await fetch(url.href, { method: 'POST' }).then(response => response.json());
      } catch (e) {
         console.error(e);
      }

      if (!newSection) {
         alert('Nepodařilo se přidat sekci.');
         return;
      }

      const $newItem = addNewItem($('#flapRelation [data-form-new]'));
      $newItem.find('[data-section-id]').attr('data-section-id', sectionId);

      const $name = $newItem.find('[data-section-name]');
      const isTopsection = newSection.name === newSection.full_path;
      $name.prop('innerHTML', `
         <strong>${newSection.name}</strong><br />
         <small class="text-muted">${!isTopsection ? newSection.full_path : ''}</small>
      `);

      let $afterElement = $name;

      for (const position in newSection.positions) {
         const sliderAtPosition = newSection.positions[position];
         const checkboxValue = {
            position,
            id_slider: sliderId,
            id_section: sectionId,
         };

         const $newCheckbox = createCheckbox(
            sliderAtPosition?.id_slider === sliderId || Object.keys(newSection.positions).length === 1,
            sliderAtPosition?.slider_name,
            checkboxValue,
         );

         $newCheckbox.insertAfter($afterElement);
         $afterElement = $newCheckbox;
      }

      if (newSection.badges) {
         const $badgesTarget = $newItem.find('[data-section-badges]');

         for (const badge of newSection.badges) {
            const $badge = createBadge(badge.title, badge.class, badge.icon);
            $badgesTarget.append($badge);
         }
      }

      shouldCheckAllBeChecked();
      {/literal}
   }

   function addWithSubsections(idTopsection) {
      const endpoint = '{path('kupshop_catalog_admin_sectionsautocomplete_getsubsections', ['id' => '$', 'all_subsections' => 1])}';
      {literal}
      const url = new URL(
         endpoint.replace(encodeURIComponent('$'), idTopsection),
         `${window.location.protocol}${window.location.host}`,
      );

      fetch(url.href)
         .then(response => response.json())
         .then(async subsections => {
            if (!Array.isArray(subsections)) {
               alert('Nepodařilo se přidat sekce');
               console.error('Subsections are not an array', subsections);
               return;
            }

            const results = await Promise.all([
               checkAndAddSection(idTopsection, true),
               ...subsections.map(section => checkAndAddSection(section.id, true))
            ]);

            const addedCount = results.filter(Boolean).length;

            if (addedCount > 0) {
               alert(`${addedCount} sekcí bylo přidáno.`);
            } else {
               alert('Všechny sekce jsou již přidány.');
            }
         })
         .catch(alert);
      {/literal}
   }

   function createBadge(title, className, icon = undefined) {
      {literal}
      const iconSpan = icon ? `<span class="bi bi-${icon}"></span>` : '';

      return $(`
         <span class="badge ${className}" title="${title}" data-toggle="tooltip">
            ${iconSpan}
            <span class="tooltip-text m-l-1">${title}</span>
         </span>
      `);
      {/literal}
   }

   function createCheckbox(isChecked, title, value) {
      {literal}
      const uniqueIndex = `${value.id_section}_${value.position}`;

      const $checkbox = $(`
            <div class="col-xs-2" data-slider-position="${value.position}">
                <div class="checkbox">
                   <input
                      type="checkbox"
                      name="data[slider_sections][${uniqueIndex}]"
                      class="check"
                      value='${JSON.stringify(value)}'
                      ${isChecked ? 'checked' : ''}
                      id="${uniqueIndex}"
                   />
                   <label for="${uniqueIndex}">${title || ''}</label>
                </div>
            </div>
         `);

      $checkbox.find('.check').on('change', function () {
         shouldCheckAllBeChecked();
      });

      return $checkbox;
      {/literal}
   }

   $('[data-badge]').each(function () {
      const $this = $(this);
      const badgeProps = $this.data('badge');
      const $badge = createBadge(badgeProps.title, badgeProps.class, badgeProps.icon);
      $this.replaceWith($badge);
   });

   $('[data-checkbox]').each(function () {
      {literal}
      const $this = $(this);
      const checkboxProps = $this.data('checkbox');
      const $checkbox = createCheckbox(
         'checked' in $this.prop('dataset'),
         $this.data('title'),
         checkboxProps,
      );
      $this.replaceWith($checkbox);
      {/literal}
   });

   const $_checkAllCheckboxes = $('[data-check-all]');

   function shouldCheckAllBeChecked() {
      $_checkAllCheckboxes.each(function () {
         const $this = $(this);

         if ($('[data-section-id][data-section-id!=""]').length === 0) {
            $this.parent('.checkbox').hide();

            return;
         }

         $this.parent('.checkbox').show();
         this.checked = $(`[data-slider-position="${ldelim}$this.data('check-all'){rdelim}"] .check:not(:checked)`).length === 0;
      });
   }

   $(function () {
      {literal}
      $_checkAllCheckboxes.on('change', function () {
         $(`[data-slider-position="${this.dataset.checkAll}"] .check`).prop('checked', this.checked);
      });
      shouldCheckAllBeChecked();

      const { prepareRuntime, mountAutocomplete } = wpj.SectionsAutocomplete;
      const container = $('[data-sections-autocomplete]').get(0);

      prepareRuntime().then(() => mountAutocomplete(container, {
         onAddSection: checkAndAddSection,
         onAddWithSubsections: addWithSubsections,
      }));
      {/literal}
   });
   {/block}
</script>