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

   {if $tab.data.manager}
      <h1 class="h4 main-panel-title">{'user_managed_by'|translate:'userManagerTab'}</h1>
      <p class="product-title">
         <a href="javascript:nw('users', '{$tab.data.manager.id}')">{$tab.data.manager.text}</a>
      </p>
   {/if}

   <h1 class="h4 main-panel-title">{'users_manager'|translate:'userManagerTab'}</h1>

   <div id="userManager">
      <div class="row bottom-space">
         <div class="col-md-6">
            <input type="text" data-autocomplete-search="user-manager-users" autocomplete="off" class="form-control input-sm autocomplete-control" name="addUser" placeholder="Přidat uživatele...">
         </div>
      </div>

      <div data-autocomplete-items="user-manager-users" class="panel-group panel-group-lists">

         <script id="multiselectAutocomplete-user-manager-users" type="text/x-dot-template">
            {literal}
               {{~it.items :item :index}}
               <div class="panel autocomplete-results" data-form-item="{{=item.id}}" style="display:none">
                  <div class="panel-body">
                     <input type="hidden" class="form-control input-sm" name="UserManagerTab[users_manager_relations][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][id_user]"
                            value="{{=item.id}}">
                     <p class="product-title">
                        <a href="javascript:nw('users', '{{=item.id}}')">{{=item.text}}</a>
                     </p>
                     <a class="btn-sm btn btn-danger" data-form-delete>
                        <input class="hidden" type="checkbox" name="UserManagerTab[users_manager_relations][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][delete]"/>
                        <span class="glyphicon glyphicon-remove"></span>
                     </a>
                  </div>
               </div>
               {{~}}
            {/literal}
         </script>

      </div>

      <script>
         $('[data-autocomplete-search="user-manager-users"]')
                 .multiSelectAutoComplete({
                    formTemplate: '#multiselectAutocomplete-user-manager-users',
                    formWrapper: 'user-manager-users',
                    itemIdentifierKey: 'id',
                    {literal}
                    subtemplates: {
                       menuItem: '<div tabindex="-1" data-autocomplete-item="{{=index}}">' +
                               '<p>{{=item.text}}</p>' +
                               '{{#def.buttons}}' +
                               '</div>' +
                               '{{#def.bottom}}',
                    },
                    {/literal}
                    type: 'users',
                    append: false
                 })
                 .multiSelectAutoComplete('addItems', {$tab.data.users|json_encode nofilter});

         $(document).ready(function () {
            initForm({
               selector: '#userManager'
            });
         });
      </script>
   </div>
</div>
