<div class="boxFlex">
   <div data-actions>
      <div class="row box-header">
         <div class="col-md-7">
            <h1 class="h5">{'actions'|translate}</h1>
         </div>
         <div class="col-md-1">
            <a class="help-tip" data-toggle="tooltip" title="{'actions_tooltip'|translate}"><i class="bi bi-question-circle"></i></a>
         </div>
         <div class="col-md-4">
            <div class="dropdown">
               <a class="btn btn-success btn-block dropdown-toggle" data-toggle="dropdown">
                  <span class="glyphicon glyphicon-plus"></span> {'addAction'|translate}
               </a>
               <ul class="dropdown-menu">
                  <div id="searchActions" style="padding: 8px 20px; border-bottom: 1px solid #e1e3e7;">
                     <input type="text" class="form-control input-sm" placeholder="{'search'|translate}">
                  </div>
                   {foreach $body.actions as $type => $action}
                      <li>
                         <a href="#" data-form-add-action="{$type}" data-action-name="{$action->getName()}">
                            <span class="icon {*{$action->getIconClass()}*}"></span>
                            <p>
                               <strong>
                                   {$action->getName()}
                                   {if isSuperuser()}
                                      <small class="text-muted">
                                         <span class="glyphicon glyphicon-flash" style="color:#AAB2BD;"></span>
                                         [{$type}]
                                      </small>
                                   {/if}
                               </strong>
                                {$action->getDescription()}
                            </p>
                         </a>
                      </li>
                   {/foreach}
               </ul>
            </div>
         </div>
      </div>

      <hr>

      <div class="panel-group panel-group-lists collapse in" id="actions">
         <div class="panel panel-default" data-form-new="action-template" style="display:none;">
            <div class="panel-heading panel-heading-flex">
               <input type="hidden" name="data[actions][0][type]" value="">
               <p class="icon"></p>
               <a class="panel-heading-close" data-form-delete>
                  <input class="hidden" type="checkbox" name="data[actions][0][delete]">
                  <span class="glyphicon glyphicon-remove"></span>
               </a>
            </div>
            <div class="panel-collapse">
               <div class="panel-body" data-form-settings>
               </div>
            </div>
         </div>
          {foreach $body.order_discounts_actions as $key => $order_discounts_action}
              {if array_key_exists($order_discounts_action.type, $body.actions)}
                  {$action = $body.actions[$order_discounts_action.type]}
                 <div class="panel panel-default" data-form-item="{$key}">
                    <div class="panel-heading  panel-heading-flex collapsed" data-toggle="collapse" data-target="#actions_{$key}">
                       <input type="hidden" name="data[actions][{$key}][id]" value="{$order_discounts_action.id}">
                       <input type="hidden" name="data[actions][{$key}][type]"
                              value="{$order_discounts_action.type}">
                       <p class="icon">{$action->getName()}</p>

                       <a class="panel-heading-close" data-form-delete>
                          <input class="hidden" type="checkbox" name="data[actions][{$key}][delete]">
                          <span class="glyphicon glyphicon-remove"></span>
                       </a>
                    </div>
                    <div id="actions_{$key}" class="panel-collapse collapse in">
                       <div class="panel-body" data-form-settings>
                           {$name = "data[actions][{$key}]"}
                           {if $data = $order_discounts_action.data}
                               {$data = json_decode($data, true)}
                           {else}
                               {$data = []}
                           {/if}
                           {$action->printActionSettings($name, $data, $order_discounts_action.id) nofilter}
                       </div>
                    </div>
                 </div>
              {/if}
          {/foreach}
      </div>

      <script type="application/javascript">
         initForm({
            selector: '[data-actions]',
         });

         var $formA = $('[data-actions]');
         $formA.on('click', '[data-form-add-action]', function() {
            var actionType = $(this).data('formAddAction');
            var actionName = $(this).data('actionName');
            var $new = addNewItem($formA.find('[data-form-new="action-template"]'));
            var typeInput = $new.find(':input[type="hidden"][name$="][type]"]');
            typeInput.val(actionType);
            typeInput.next('p').text(actionName);
            var name = typeInput.attr('name').replace('[type]', '');
            var settings = $new.find('[data-form-settings]');
            settings.load('?s=OrderDiscounts.php&acn=loadTemplate&action_type=' + actionType + '&name=' + name,
               function() {
                  unstyleFormInputs('[data-actions]');
                  styleFormInputs('[data-actions]');
                  var filters = $('[data-filter-name^="data[actions]"]');
                  for (var i = 0; i < filters.length; i++) {
                     var filterName = CSS.escape($(filters[i]).data('filter-name'));
                     productsFilter_applyChosen_all(filterName);
                  }
                  preloadAutocompletes($new);
               });
         });
         $('#searchActions').click(function (e) {
            e.stopPropagation();
         });

         $(document).ready(function() {
            $("#searchActions input[type='text']").on("keyup", function() {
               var value = $(this).val().toLowerCase();
               $("[data-actions] .dropdown-menu li").filter(function() {
                  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
               });
            });
         });
      </script>
   </div>

</div>
