Use angular-chosen instead of ui-select for better performance.

The jQuery select field from angular-chosen is used for all ui-select
fields. See https://github.com/leocaseiro/angular-chosen/

Use input delay on users filter field with 'debounce'.

Fixed #2006.

bower.json

@@ -12,12 +12,12 @@
     "angular-sanitize": "~1.4.9",
     "angular-bootstrap": "~0.14.3",
     "angular-bootstrap-colorpicker": "~3.0.24",
+    "angular-chosen-localytics": "~1.3.0",
     "angular-csv-import": "~0.0.27",
     "angular-formly-templates-bootstrap": "~6.2.0",
     "angular-formly": "~7.3.9",
     "angular-loading-bar": "~0.8.0",
     "angular-ui-router": "~0.2.17",
-    "angular-ui-select": "~0.13.1",
     "angular-ui-tree": "~2.5.0",
     "angular-gettext": "~2.2.0",
     "angular-scroll-glue": "~2.0.6",

gulpfile.js

@@ -68,6 +68,12 @@ gulp.task('fonts-libs', function() {
         .pipe(gulp.dest(path.join(output_directory, 'fonts')));
 });
 
+// Catches image files for angular-chosen.
+gulp.task('angular-chosen-img', function () {
+    return gulp.src(path.join('bower_components', 'chosen', '*.png'))
+        .pipe(gulp.dest(path.join(output_directory, 'css')));
+});
+
 // Catches all skins files for TinyMCE editor.
 gulp.task('tinymce-skins', function () {
     return gulp.src(path.join('bower_components', 'tinymce-dist', 'skins', '**'))
@@ -108,7 +114,7 @@ gulp.task('translations', function () {
 });
 
 // Gulp default task. Runs all other tasks before.
-gulp.task('default', ['js-libs', 'css-libs', 'fonts-libs', 'tinymce', 'translations'], function () {});
+gulp.task('default', ['js-libs', 'css-libs', 'fonts-libs', 'tinymce', 'angular-chosen-img', 'translations'], function () {});
 
 
 /**

openslides/agenda/static/js/agenda/site.js

@@ -226,18 +226,14 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
     'operator',
     'Agenda',
     'User',
-    'LimitUsers',
     'item',
-    function ($scope, $filter, $http, $state, operator, Agenda, User, LimitUsers, item) {
+    function ($scope, $filter, $http, $state, operator, Agenda, User, item) {
         Agenda.bindOne(item.id, $scope, 'item');
         User.bindAll({}, $scope, 'users');
         $scope.speakerSelectBox = {};
         $scope.alert = {};
         $scope.speakers = $filter('orderBy')(item.speakers, 'weight');
 
-        // limit the number of users in ui-select field
-        $scope.LimitUsers = LimitUsers;
-
         $scope.$watch(function () {
             return Agenda.lastModified();
         }, function () {

openslides/agenda/static/templates/agenda/item-detail.html

@@ -130,20 +130,14 @@
     <uib-alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
       {{ alert.msg }}
     </uib-alert>
-    <div os-perms="agenda.can_manage" class="input-group">
+    <div os-perms="agenda.can_manage">
-      <ui-select ng-model="speakerSelectBox.selected" ng-change="addSpeaker(speakerSelectBox.selected.id)">
+      <select chosen ng-model="speakerSelectBox.selected" ng-change="addSpeaker(speakerSelectBox.selected)"
-        <ui-select-match placeholder="{{ 'Select or search a participant ...' | translate }}">
+          ng-options="user.id as user.get_full_name() for user in users"
-          {{ $select.selected.get_full_name() }}
+          search-contains="true"
-        </ui-select-match>
+          placeholder-text-single="'{{ 'Select or search a participant ...' | translate }}'"
-        <ui-select-choices repeat="user in users | filter: $select.search | limitTo: LimitUsers">
+          no-results-text="'{{ 'No results available ...' | translate }}'"
-          <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
+          class="form-control">
-        </ui-select-choices>
+      <select>
-      </ui-select>
-      <span class="input-group-btn">
-        <a ng-click="speakerSelectBox={}" class="btn btn-default">
-          <i class="fa fa-times-circle"></i>
-        </a>
-      </span>
     </div>
     <p class="spacer">
       <button ng-if="isAllowed('add')" ng-click="addSpeaker()" class="btn btn-default">

openslides/assignments/static/js/assignments/site.js

@@ -268,10 +268,9 @@ angular.module('OpenSlidesApp.assignments.site', ['OpenSlidesApp.assignments'])
     'operator',
     'Assignment',
     'User',
-    'LimitUsers',
     'assignment',
     'phases',
-    function($scope, $http, filterFilter, gettext, ngDialog, AssignmentForm, operator, Assignment, User, LimitUsers, assignment, phases) {
+    function($scope, $http, filterFilter, gettext, ngDialog, AssignmentForm, operator, Assignment, User, assignment, phases) {
         User.bindAll({}, $scope, 'users');
         Assignment.bindOne(assignment.id, $scope, 'assignment');
         Assignment.loadRelations(assignment, 'agenda_item');
@@ -279,9 +278,6 @@ angular.module('OpenSlidesApp.assignments.site', ['OpenSlidesApp.assignments'])
         $scope.phases = phases;
         $scope.alert = {};
 
-        // limit the number of users in ui-select field
-        $scope.LimitUsers = LimitUsers;
-
         // open edit dialog
         $scope.openDialog = function (assignment) {
             ngDialog.open(AssignmentForm.getDialog(assignment));

openslides/assignments/static/templates/assignments/assignment-detail.html

@@ -90,22 +90,16 @@
     <uib-alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
       {{ alert.msg }}
     </uib-alert>
-    <div os-perms="assignments.can_nominate_other" class="input-group">
+    <div os-perms="assignments.can_nominate_other">
-      <ui-select ng-model="candidateSelectBox.selected" ng-change="addCandidate(candidateSelectBox.selected.id)">
+      <select chosen ng-model="candidateSelectBox.selected" ng-change="addCandidate(candidateSelectBox.selected)"
-        <ui-select-match placeholder="{{ 'Select or search a participant ...' | translate }}">
+          ng-options="user.id as user.get_full_name() for user in users"
-          {{ $select.selected.get_full_name() }}
+          search-contains="true"
-        </ui-select-match>
+          placeholder-text-single="'{{ 'Select or search a participant ...' | translate }}'"
-        <ui-select-choices repeat="user in users | filter: $select.search | limitTo: LimitUsers">
+          no-results-text="'{{ 'No results available ...' | translate }}'"
-          <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
+          class="form-control">
-        </ui-select-choices>
+      <select>
-      </ui-select>
-      <span class="input-group-btn">
-        <a ng-click="candidateSelectBox={}" class="btn btn-default">
-          <i class="fa fa-times-circle"></i>
-        </a>
-      </span>
     </div>
-    <p os-perms="assignments.can_nominate_self">
+    <p os-perms="assignments.can_nominate_self" class="spacer">
       <button ng-if="!isCandidate()" ng-click="addMe()" class="btn btn-default">
         <i class="fa fa-plus"></i>
         <translate>Add me</translate>

openslides/core/static/css/app.css

@@ -660,6 +660,10 @@ img {
     margin-top: 5px;
 }
 
+/* angular-chosen: override default width of select fields in quickmode */
+.quickmode .chosen-container {
+    width: 100% !important;
+}
 
 /* angular-ui-tree style */
 

openslides/core/static/js/core/site.js

@@ -10,11 +10,11 @@ angular.module('OpenSlidesApp.core.site', [
     'colorpicker.module',
     'formly',
     'formlyBootstrap',
+    'localytics.directives',
     'ngBootbox',
     'ngDialog',
     'ngMessages',
     'ngCsvImport',
-    'ui.select',
     'ui.tinymce',
     'luegg.directives',
 ])
@@ -104,13 +104,6 @@ angular.module('OpenSlidesApp.core.site', [
     }
 ])
 
-.config([
-    'uiSelectConfig',
-    function(uiSelectConfig) {
-        uiSelectConfig.theme = 'bootstrap';
-    }
-])
-
 .config([
     '$stateProvider',
     '$urlMatcherFactoryProvider',
@@ -349,14 +342,14 @@ angular.module('OpenSlidesApp.core.site', [
           templateUrl: 'static/templates/core/editor.html',
         });
         formlyConfig.setType({
-          name: 'ui-select-single',
+          name: 'select-single',
           extends: 'select',
-          templateUrl: 'static/templates/core/ui-select-single.html'
+          templateUrl: 'static/templates/core/select-single.html'
         });
         formlyConfig.setType({
-          name: 'ui-select-multiple',
+          name: 'select-multiple',
           extends: 'select',
-          templateUrl: 'static/templates/core/ui-select-multiple.html'
+          templateUrl: 'static/templates/core/select-multiple.html'
         });
     }
 ])
@@ -610,14 +603,11 @@ angular.module('OpenSlidesApp.core.site', [
                 },
                 {
                     key: 'attachments_id',
-                    type: 'ui-select-multiple',
+                    type: 'select-multiple',
                     templateOptions: {
                         label: gettextCatalog.getString('Attachment'),
-                        optionsAttr: 'bs-options',
                         options: Mediafile.getAll(),
-                        ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
+                        ngOptions: 'option.id as option.title_or_filename for option in to.options',
-                        valueProp: 'id',
-                        labelProp: 'title_or_filename',
                         placeholder: gettextCatalog.getString('Select or search an attachment ...')
                     }
                 },
@@ -1064,9 +1054,6 @@ angular.module('OpenSlidesApp.core.site', [
     }
 ])
 
-// define maximum number of users shown in users select fields (e.g. in motion or speakers forms)
-.value('LimitUsers', 50)
-
 .directive('osFocusMe', [
     '$timeout',
     function ($timeout) {

openslides/core/static/templates/core/select-multiple.html

@@ -0,0 +1,10 @@
+<!-- custom angular formly template for angular-chosen multiple form field -->
+<select multiple chosen
+    data-ng-model="model[options.key]"
+    ng-required="{{ to.required }}"
+    ng-options="{{ to.ngOptions }}"
+    search-contains="true"
+    placeholder-text-multiple="'{{ to.placeholder }}'"
+    no-results-text="'{{ 'No results available ...' | translate }}'"
+    class="form-control">
+</select>

openslides/core/static/templates/core/select-single.html

@@ -0,0 +1,12 @@
+<!-- custom angular formly template for angular-chosen single form field -->
+<select chosen
+    data-ng-model="model[options.key]"
+    ng-required="{{ to.required }}"
+    ng-options="{{ to.ngOptions }}"
+    allow-single-deselect="true"
+    search-contains="true"
+    placeholder-text-single="'{{ to.placeholder }}'"
+    no-results-text="'{{ 'No results available ...' | translate }}'"
+    class="form-control">
+  <option value=""></option>
+</select>

openslides/core/static/templates/core/ui-select-multiple.html

@@ -1,10 +0,0 @@
-<!-- custom angular formly template for ui-select multiple form field -->
-<ui-select multiple data-ng-model="model[options.key]" data-required="{{to.required}}"
-    data-disabled="{{to.disabled}}" theme="bootstrap">
-  <ui-select-match placeholder="{{to.placeholder}}">
-    {{$item[to.labelProp]}}
-  </ui-select-match>
-  <ui-select-choices data-repeat="{{to.ngOptions}}">
-    <div ng-bind-html="option[to.labelProp] | highlight: $select.search"></div>
-  </ui-select-choices>
-</ui-select>

openslides/core/static/templates/core/ui-select-single.html

@@ -1,10 +0,0 @@
-<!-- custom angular formly template for ui-select single form field -->
-<ui-select data-ng-model="model[options.key]" data-required="{{to.required}}"
-    data-disabled="{{to.disabled}}" theme="bootstrap">
-  <ui-select-match placeholder="{{to.placeholder}}" data-allow-clear="true">
-    {{$select.selected[to.labelProp]}}
-  </ui-select-match>
-  <ui-select-choices data-repeat="{{to.ngOptions}}">
-    <div ng-bind-html="option[to.labelProp] | highlight: $select.search"></div>
-  </ui-select-choices>
-</ui-select>

openslides/mediafiles/static/js/mediafiles/site.js

@@ -222,13 +222,11 @@ angular.module('OpenSlidesApp.mediafiles.site', ['ngFileUpload', 'OpenSlidesApp.
     '$scope',
     'MediafileForm',
     'User',
-    'LimitUsers',
+    function($scope, MediafileForm, User) {
-    function($scope, MediafileForm, User, LimitUsers) {
         User.bindAll({}, $scope, 'users');
         $scope.mediafile = {};
         $scope.alert = {};
         $scope.users = User.getAll();
-        $scope.LimitUsers = LimitUsers;
 
         // upload and save mediafile
         $scope.save = function (mediafile) {
@@ -253,13 +251,11 @@ angular.module('OpenSlidesApp.mediafiles.site', ['ngFileUpload', 'OpenSlidesApp.
     'operator',
     'Mediafile',
     'User',
-    'LimitUsers',
     'mediafile',
-    function($scope, operator, Mediafile, User, LimitUsers, mediafile) {
+    function($scope, operator, Mediafile, User, mediafile) {
         User.bindAll({}, $scope, 'users');
         $scope.alert = {};
         $scope.users = User.getAll();
-        $scope.LimitUsers = LimitUsers;
 
         // set initial values for form model by create deep copy of motion object
         // so list/detail view is not updated while editing

openslides/mediafiles/static/templates/mediafiles/mediafile-form.html

@@ -24,17 +24,19 @@
   <!-- uploader -->
   <div os-perms="mediafiles.can_manage" class="form-group">
     <label for="inputTitle" translate>Uploaded by</label>
-    <ui-select ng-model="mediafile.uploader_id">
+    <select chosen
-      <ui-select-match placeholder="{{ 'Select or search a participant ...' | translate }}" data-allow-clear="true">
+        ng-model="mediafile.uploader_id"
-        {{ $select.selected.get_full_name() }}
+        ng-options="user.id as user.get_full_name() for user in users"
-      </ui-select-match>
+        allow-single-deselect="true"
-      <ui-select-choices repeat="user.id as user in users | filter: $select.search | limitTo: LimitUsers">
+        search-contains="true"
-        <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
+        placeholder-text-single="'{{ 'Select or search a participant ...' | translate }}'"
-      </ui-select-choices>
+        no-results-text="'{{ 'No results available ...' | translate }}'"
-    </ui-select>
+        class="form-control">
+      <option value=""></option>
+    <select>
   </div>
 
-  <i ng-show="mediafile.file.$error.maxSize">File too large
+  <i ng-if="mediafile.file.$error.maxSize">File too large
     {{ picFile.size / 1000000|number:1}}MB: max {{ mediafile.mediafile.$errorParam}}</i>
 
   <button type="submit" ng-disabled="mediafileForm.$invalid" class="btn btn-primary" translate>

openslides/motions/static/js/motions/site.js

@@ -159,8 +159,7 @@ angular.module('OpenSlidesApp.motions.site', ['OpenSlidesApp.motions'])
     'Tag',
     'User',
     'Workflow',
-    'LimitUsers',
+    function (gettextCatalog, operator, Editor, Category, Config, Mediafile, Tag, User, Workflow) {
-    function (gettextCatalog, operator, Editor, Category, Config, Mediafile, Tag, User, Workflow, LimitUsers) {
         return {
             // ngDialog for motion form
             getDialog: function (motion) {
@@ -205,14 +204,11 @@ angular.module('OpenSlidesApp.motions.site', ['OpenSlidesApp.motions'])
                 },
                 {
                     key: 'submitters_id',
-                    type: 'ui-select-multiple',
+                    type: 'select-multiple',
                     templateOptions: {
                         label: gettextCatalog.getString('Submitters'),
-                        optionsAttr: 'bs-options',
                         options: User.getAll(),
-                        ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search | limitTo: ' + LimitUsers,
+                        ngOptions: 'option.id as option.full_name for option in to.options',
-                        valueProp: 'id',
-                        labelProp: 'full_name',
                         placeholder: gettextCatalog.getString('Select or search a submitter ...')
                     },
                     hide: !operator.hasPerms('motions.can_manage')
@@ -274,70 +270,56 @@ angular.module('OpenSlidesApp.motions.site', ['OpenSlidesApp.motions'])
                 },
                 {
                     key: 'attachments_id',
-                    type: 'ui-select-multiple',
+                    type: 'select-multiple',
                     templateOptions: {
                         label: gettextCatalog.getString('Attachment'),
-                        optionsAttr: 'bs-options',
                         options: Mediafile.getAll(),
-                        ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
+                        ngOptions: 'option.id as option.title_or_filename for option in to.options',
-                        valueProp: 'id',
-                        labelProp: 'title_or_filename',
                         placeholder: gettextCatalog.getString('Select or search an attachment ...')
                     },
                     hideExpression: '!model.more'
                 },
                 {
                     key: 'category_id',
-                    type: 'ui-select-single',
+                    type: 'select-single',
                     templateOptions: {
                         label: gettextCatalog.getString('Category'),
-                        optionsAttr: 'bs-options',
                         options: Category.getAll(),
-                        ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
+                        ngOptions: 'option.id as option.name for option in to.options',
-                        valueProp: 'id',
-                        labelProp: 'name',
                         placeholder: gettextCatalog.getString('Select or search a category ...')
                     },
                     hideExpression: '!model.more'
                 },
                 {
                     key: 'tags_id',
-                    type: 'ui-select-multiple',
+                    type: 'select-multiple',
                     templateOptions: {
                         label: gettextCatalog.getString('Tags'),
-                        optionsAttr: 'bs-options',
                         options: Tag.getAll(),
-                        ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
+                        ngOptions: 'option.id as option.name for option in to.options',
-                        valueProp: 'id',
-                        labelProp: 'name',
                         placeholder: gettextCatalog.getString('Select or search a tag ...')
                     },
                     hideExpression: '!model.more'
                 },
                 {
                     key: 'supporters_id',
-                    type: 'ui-select-multiple',
+                    type: 'select-multiple',
                     templateOptions: {
                         label: gettextCatalog.getString('Supporters'),
-                        optionsAttr: 'bs-options',
                         options: User.getAll(),
-                        ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search | limitTo: ' + LimitUsers,
+                        ngOptions: 'option.id as option.full_name for option in to.options',
-                        valueProp: 'id',
-                        labelProp: 'full_name',
                         placeholder: gettextCatalog.getString('Select or search a supporter ...')
                     },
                     hideExpression: '!model.more'
                 },
                 {
                     key: 'workflow_id',
-                    type: 'ui-select-single',
+                    type: 'select-single',
                     templateOptions: {
                         label: gettextCatalog.getString('Workflow'),
                         optionsAttr: 'bs-options',
                         options: workflows,
-                        ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
+                        ngOptions: 'option.id as option.name for option in to.options',
-                        valueProp: 'id',
-                        labelProp: 'name',
                         placeholder: gettextCatalog.getString('Select or search a workflow ...')
                     },
                     hideExpression: '!model.more',

openslides/motions/static/templates/motions/motion-list.html

@@ -197,7 +197,7 @@
           </span>
 
         <!-- quickEdit columns -->
-        <td ng-if="motion.quickEdit && motion.isAllowed('quickedit')" colspan="6">
+        <td ng-if="motion.quickEdit && motion.isAllowed('quickedit')" class="quickmode" colspan="6">
           <h4>{{ motion.getTitle() }} <span class="text-muted">&ndash; <translate>QuickEdit</translate></span></h4>
             <uib-alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
               {{ alert.msg }}
@@ -206,51 +206,49 @@
               <div class="col-xs-6">
                 <label for="inputIdentifier" translate>Identifier</label>
                 <input type="text" ng-model="motion.identifier" class="form-control input-sm"
-                    name="inputIdentifier">
+                    id="inputIdentifier">
               </div>
               <div class="col-xs-6">
                 <label for="selectCategory" translate>Category</label>
                 <select ng-options="category.id as category.name for category in categories"
-                    ng-model="motion.category_id" class="form-control" name="selectCategory">
+                    ng-model="motion.category_id" class="form-control" id="selectCategory">
                 </select>
               </div>
             </div>
             <div class="row">
               <div class="col-xs-6">
                 <label for="selectSubmitter" translate>Submitters</label>
-                <ui-select multiple ng-model="motion.submitters_id" name="selectSubmitter">
+                <select multiple chosen
-                  <ui-select-match placeholder="{{ 'Select or search a submitter ...' | translate }}">
+                    ng-model="motion.submitters_id"
-                    {{ $item.get_full_name() }}
+                    ng-options="user.id as user.full_name for user in users"
-                  </ui-select-match>
+                    search-contains="true"
-                  <ui-select-choices repeat="user.id as user in users | filter: $select.search">
+                    id="selectSubmitter"
-                    <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
+                    class="form-control">
-                  </ui-select-choices>
+                </select>
-                </ui-select>
               </div>
               <div class="col-xs-6">
                 <label for="selectTags" translate>Tags</label>
-                <ui-select multiple ng-model="motion.tags_id">
+                <select multiple chosen
-                  <ui-select-match placeholder="{{ 'Select or search a tag ...' | translate }}">
+                    ng-model="motion.tags_id"
-                    {{ $item.name }}
+                    ng-options="tag.id as tag.name for tag in tags"
-                  </ui-select-match>
+                    search-contains="true"
-                  <ui-select-choices repeat="tag.id as tag in tags | filter: $select.search">
+                    id="selectTag"
-                    {{ tag.name }}
+                    class="form-control">
-                  </ui-select-choices>
+                </select>
-                </ui-select>
               </div>
             </div>
             <div class="row">
               <div class="col-xs-6">
                 <div ng-if="config('motions_min_supporters') > 0">
-                  <label for="selectSubmitter" translate>Supporters</label>
+                  <label for="selectSupporter" translate>Supporters</label>
-                  <ui-select multiple ng-model="motion.supporters_id">
+                  <select multiple chosen
-                    <ui-select-match placeholder="{{ 'Select or search a supporter ...' | translate }}">
+                      ng-model="motion.supporters_id"
-                      {{ $item.get_full_name() }}
+                      ng-options="user.id as user.full_name for user in users"
-                    </ui-select-match>
+                      search-contains="true"
-                    <ui-select-choices repeat="user.id as user in users | filter: $select.search">
+                      id="selectSupporter"
-                      <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
+                      class="form-control">
-                    </ui-select-choices>
+                    <option value=""></option>
-                  </ui-select>
+                  </select>
                 </div>
               </div>
             </div>

openslides/users/static/js/users/site.js

@@ -300,16 +300,12 @@ angular.module('OpenSlidesApp.users.site', ['OpenSlidesApp.users'])
                 },
                 {
                     key: 'groups',
-                    type: 'ui-select-multiple',
+                    type: 'select-multiple',
                     templateOptions: {
                         label: gettextCatalog.getString('Groups'),
-                        optionsAttr: 'bs-options',
                         options: Group.getAll(),
-                        ngOptions: 'option[to.valueProp] as option in to.options | ' +
+                        ngOptions: 'option.id as option.name for option in to.options | ' +
-                                   'filter: {id: "!1"} | filter: {id: "!2"} | ' +
+                                   'filter: {id: "!1"} | filter: {id: "!2"}',
-                                   'filter: $select.search',
-                        valueProp: 'id',
-                        labelProp: 'name',
                         placeholder: gettextCatalog.getString('Select or search a group ...')
                     }
                 },

openslides/users/static/templates/users/user-list.html

@@ -52,7 +52,7 @@
         <div class="form-group">
           <div class="input-group">
             <div class="input-group-addon"><i class="fa fa-search"></i></div>
-            <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+            <input type="text" os-focus-me ng-model="filter.search" ng-model-options="{debounce: 500}" class="form-control"
                placeholder="{{ 'Search' | translate}}">
           </div>
         </div>