<div id="flapSectionsPompo" class="tab-pane fade in boxFlex">

   <div id="custom-content">
      <div class="row">
         <div class="col-md-12">
            <h1 class="h4 main-panel-title">Vlastní obsah</h1>
         </div>
      </div>

      <div class="form-group">
         <div class="col-md-3 control-label">
            <label>ZIP soubor s obsahem</label>
         </div>
         <div class="col-md-6">
            <input type="file" class="filestyle" name="sectionCustomContent" data-iconName="glyphicon-folder-open" data-buttonText="Nahrát .zip">
            {if $body.data.data.customContent}
               <input type="hidden" name="data[data][customContent]" value="1">
               <div style="margin-top: 10px">
                  <a href="{get_pompo_content id_section=$body.data.id}" target="_blank" class="btn btn-sm btn-default">Zobrazit</a>
                  <button type="submit" name="acn" value="downloadCustomContent" class="btn btn-sm btn-default">Stáhnout</button>
                  <button type="submit" name="acn" value="deleteCustomContent" class="btn btn-sm btn-danger">Smazat</button>
               </div>
            {/if}
         </div>
      </div>
   </div>

   <div id="licences">
      <div class="row">
         <div class="col-md-12">
            <h1 class="h4 main-panel-title">Neoblíbenější licence</h1>
         </div>
      </div>

      <div class="row bottom-space">
         <div class="col-md-3">
            <a href="#" data-form-add class="btn btn-success btn-block"><span
                     class="glyphicon glyphicon-plus"></span>&nbsp;Přidat licenci</a>
         </div>
      </div>

      <div data-licence="sortable" class="panel-group panel-group-lists">
         {foreach [[]] + $tab.data.licences as $key => $row}
            <div class="panel" {if $key == 0}data-form-new style="display:none" {else}data-form-item{/if}>
               <div class="row bottom-space">
                  <div class="col-md-1">
                     <span class="drag-drop-mover pull-right">
                        <i class="bi bi-arrows-move handle"></i>
                     </span>
                     <input type="hidden" data-sort="" name="{$tab.prefix}[licences][{$key}][position]" value="{$key}">
                  </div>
                  <div class="col-md-2 control-label"><label>Vyberte licenci</label></div>
                  <div class="col-md-8">
                     <select name="{$tab.prefix}[licences][{$key}][id_value]" class="selecter"
                             data-autocomplete="parametersListValuesByParameter" data-autocomplete-params="id_parameter=42" data-preload="parametersValuesOnly">
                        {if $row}
                           <option value="{$row}" selected>{$row}</option>
                        {/if}
                     </select>
                  </div>
                  <div class="col-md-1">
                     <a class="btn-sm btn btn-danger" data-form-delete>
                        <input class="hidden" type="checkbox" name="{$tab.prefix}[licences][{$key}][delete]"/>
                        <span class="glyphicon glyphicon-remove"></span>
                     </a>
                  </div>
               </div>
            </div>
         {/foreach}
      </div>
   </div>

   <script type="application/javascript">
      initForm({
         selector: '#licences',
         beforeAdd: function (original) {
            var $item = original();
            window.preloadAutocompletes($item);
         },
      });

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

         $('#licences [data-form-add]').click(function() {
            $('[data-licence=sortable]').data('uiSortable')._trigger('update');
         });
   </script>
</div>
