[Kimchi-devel] [PATCH] [Kimchi] Create Template UI adjustments based on feedback

20 Apr 2016

Signed-off-by: Socorro Stoppler <socorro@linux.vnet.ibm.com>
---
 ui/css/kimchi.css                     |  29 +++
 ui/css/src/modules/_templates.scss    |  24 +++
 ui/js/src/kimchi.template_add_main.js | 334 ++++++----------------------------
 ui/pages/template-add.html.tmpl       |  80 +-------
 4 files changed, 118 insertions(+), 349 deletions(-)

diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 5afa55d..4049f0a 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -1628,6 +1628,35 @@ body.wok-gallery {
   left: 0;
 }
 
+#template-add-window .filter {
+  height: 40px;
+  overflow: visible;
+  clear: both;
+}
+
+#template-add-window .pull-right .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+  width: 133px;
+}
+
+#template-add-window .filter input[type="text"].form-control {
+  width: 460px;
+  height: 40px;
+  float: right;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+#template-add-window .filter .bootstrap-select.btn-group .btn .caret {
+  border-left: 0;
+}
+
+#template-add-window .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  background: #fcfcfc;
+  border-right: 0;
+}
+
 /* VM List View classes*/
 #templates-root-container .grid-control input[type="text"] {
   height: 38px;
diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
index 86b9305..c15e100 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -217,6 +217,30 @@
     &.modal-content div#iso-local-box {
         left: 0;
     }
+    .filter {
+        height: 40px;
+        overflow: visible;
+        clear: both;
+    }
+    .pull-right .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+        width: 133px;
+    }
+    .filter input[type="text"].form-control {
+        width: 460px;
+        height: 40px;
+        float: right;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    .filter .bootstrap-select.btn-group .btn .caret {
+        border-left: 0;
+    }
+    .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        background: $table-bg-accent;
+        border-right: 0;
+    }
 }
 
 
diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js
index fa5c847..ec6dca4 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -15,41 +15,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-kimchi.switchPage = function(fromPageId, toPageId, direction) {
-    $('.tab-content').css('overflow', 'hidden');
-    direction = direction || 'left';
-    var toLeftBegin;
-    var fromLeftEnd;
-    if ('left' === direction) {
-        toLeftBegin = '100%';
-        fromLeftEnd = '-100%';
-    } else if ('right' === direction) {
-        toLeftBegin = '-100%';
-        fromLeftEnd = '100%';
-    }
-    var formPage = $('#' + fromPageId);
-    var toPage = $('#' + toPageId);
-    toPage.css({
-        left: toLeftBegin
-    });
-    formPage.animate({
-        left: fromLeftEnd,
-        opacity: 0.1
-    }, 400, function() {
-        $('.tab-content').css('overflow', 'visible');
-    });
-    toPage.animate({
-        left: '0',
-        opacity: 1
-    }, 400, function() {
-        $('.tab-content').css('overflow', 'visible');
-    });
-};
-
 kimchi.template_add_main = function() {
     "use strict";
-    var currentPage = 'iso-local-box';
     kimchi.deepScanHandler = null;
+    var isos = [];
+    var local_isos = [];
+    var remote_isos = [];
 
     var deepScan = function(button) {
         kimchi.deepScanHandler = kimchi.stepListDeepScanIsos(function(isos, isFinished) {
@@ -76,7 +47,6 @@ kimchi.template_add_main = function() {
         });
     };
 
-    //1-1-1 local iso list
     var initLocalIsoField = function() {
         kimchi.isoInfo = {};
         $('#local-iso-field').hide();
@@ -94,18 +64,19 @@ kimchi.template_add_main = function() {
         $('#iso-url').val(''); // 4 - Remote folder path text
         $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 1 - Folder path
         $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
-        $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path
-        $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path
-        $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos
         $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes
         $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes
-
     };
 
     var showLocalIsoField = function(isos) {
         var html = '';
         var template = $('#tmpl-list-local-iso').html();
         $.each(isos, function(index, volume) {
+            if ((volume.path).indexOf('http') === -1) { // Didn't find 'http', so must be local
+                volume.icon = 'fa fa-hdd-o';
+            } else {
+                volume.icon = 'fa fa-globe';
+            }
             var isoId = volume.os_distro + '*' + volume.name + '*' + volume.os_version;
             if (!kimchi.isoInfo[isoId]) {
                 volume.isoId = isoId;
@@ -114,31 +85,19 @@ kimchi.template_add_main = function() {
                 html += wok.substitute(template, volume);
             }
         });
+
         $('#list-local-iso').append(html);
         $('#local-iso-field').show();
     };
 
-
-    //1-1-2 local iso file
     var initIsoFileField = function() {
-        //$('#iso-file-check').prop('checked', false);
         $('#iso-file').val('');
         $('vm-image-local-text').val('');
         $('#iso-url').val('');
         $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block');
-
         $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
-
-        $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path
-
-        $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path
-
-        $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos
-
         $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes
-
         $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes
-
     };
 
     $('#iso-file').on('input propertychange keyup focus cut paste click', function() {
@@ -152,9 +111,6 @@ kimchi.template_add_main = function() {
         }, 0);
         if ($('#iso-file').val()) {
             $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
-            $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path
-            $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path
-            $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos
         } else {
             $('#btn-template-file-create').attr('disabled', 'disabled');
         }
@@ -162,57 +118,58 @@ kimchi.template_add_main = function() {
 
     initLocalIsoField();
     initIsoFileField();
-    kimchi.listIsos(function(isos) {
-        if (isos && isos.length) {
-            showLocalIsoField(isos);
-            $('#iso-more').show();
-        } else {
-            $('#iso-search').show();
-        }
+
+    kimchi.listIsos(function(local_isos) { //local ISOs
+        kimchi.listDistros(function(remote_isos) {  //remote ISOs
+            isos = local_isos.concat(remote_isos); //all isos
+            if (isos && isos.length) {
+                showLocalIsoField(isos);
+                $('#iso-more').show();
+            } else {
+                $('#iso-search').show();
+            }
+        });
     }, function(err) {
         wok.message.error(err.responseJSON.reason, '#local-iso-error-container');
     });
+
     $('#template-add-window .modal-body .template-pager').animate({
         height: "689px"
     }, 400);
 
-    // 1-1 local iso
-    $('#iso-local').change(function() {
-        if (this.checked) {
-            if (currentPage === 'vm-image-local-box') {
-                kimchi.switchPage(currentPage, 'iso-local-box', 'right');
-            } else if (currentPage === 'iso-remote-box') {
-                kimchi.switchPage(currentPage, 'iso-local-box', 'right');
+    var filterISOs = function(group, text) {
+        text = text.trim().split(" ");
+        var list = $('#isoRow').find('li');
+        if(text === ""){
+            list.show();
+            return;
+        }
+        list.hide();
+
+        list.filter(function(index, value){
+            var $li = $(this);
+            for (var i = 0; i < text.length; ++i){
+                if ($li.is(":containsNC('" + text[i] + "')")) {
+                    if (group === 'all') {
+                        return true;
+                    } else if (group === 'local') {
+                        return true;
+                    } else if (group === 'remote') {
+                        return true;
+                    }
+                }
             }
-            currentPage = 'iso-local-box';
-            $('#template-add-window .modal-body .template-pager').animate({
-                height: "689px"
-            }, 400);
-            initLocalIsoField();
-            initIsoFileField();
-
-            $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 1 - Folder path
-
-            $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
-
-            $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path
+            return false;
+        }).show();
+    };
 
-            $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path
+    var setupFilters = function() {
+        $('input#template-add-iso-filter', '#form-template-add').on('keyup', function() {
+            filterISOs("all", $(this).val());  // Default to 'all' for now
+        });
+    };
 
-            $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos
-
-            kimchi.listIsos(function(isos) {
-                if (isos && isos.length) {
-                    showLocalIsoField(isos);
-                    $('#iso-more').show();
-                } else {
-                    $('#iso-search').show();
-                }
-            }, function(err) {
-                wok.message.error(err.responseJSON.reason, '#local-iso-error-container');
-            });
-        }
-    });
+    setupFilters();
 
     $('#iso-search').click(function() {
         var settings = {
@@ -263,12 +220,6 @@ kimchi.template_add_main = function() {
 
             $('#btn-template-local-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 2 - Selected ISOs
 
-            $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path
-
-            $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path
-
-            $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos
-
         } else {
             $('#btn-template-local-iso-create').attr('disabled', 'disabled');
         }
@@ -282,14 +233,8 @@ kimchi.template_add_main = function() {
         $('#iso-url').val('');
 
         $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path
-
         $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 2 - Selected ISOs
 
-        $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path
-
-        $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path
-
-        $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos
         if (checkedLength) {
             $('#btn-template-local-iso-create').removeAttr('disabled');
             var length = $('#list-local-iso [type="checkbox"]').length;
@@ -302,12 +247,11 @@ kimchi.template_add_main = function() {
     });
 
     $('#btn-template-local-iso-create').click(function() {
-        submitIso('form-local-iso');
+        submitIso();
     });
 
     $('#btn-template-file-create').click(function() {
         var isoFile = $('#iso-file').val();
-        $('vm-image-local-text').val('');
         if (!kimchi.template_check_path(isoFile)) {
             wok.message.error(i18n['KCHAPI6003E'],'#local-iso-error-container');
             return;
@@ -318,9 +262,6 @@ kimchi.template_add_main = function() {
         addTemplate(data);
     });
 
-    //1-2 remote iso
-    $('#iso-remote').attr("disabled", true).css('cursor', 'not-allowed');
-
     var enabledRemoteIso = function() {
         if (kimchi.capabilities === undefined) {
             setTimeout(enabledRemoteIso, 2000);
@@ -330,36 +271,15 @@ kimchi.template_add_main = function() {
         if (kimchi.capabilities.qemu_stream !== true) {
             return;
         }
-
-        $('#iso-remote').attr("disabled", false).css('cursor', 'pointer');
-        $('#iso-remote').change(function() {
-            if (this.checked) {
-                if (currentPage === 'iso-local-box') { // slide twice
-                    kimchi.switchPage(currentPage, 'iso-remote-box', 'left');
-                } else if (currentPage === 'vm-image-local-box') { // slide once
-                    kimchi.switchPage(currentPage, 'iso-remote-box', 'left');
-                }
-                currentPage = 'iso-remote-box';
-                $('#template-add-window .modal-body .template-pager').animate({
-                    height: "635px"
-                }, 400);
-                initRemoteIsoField();
-                initIsoUrlField();
-                kimchi.listDistros(function(isos) {
-                    showRemoteIsoField(isos);
-                }, function() {});
-            }
-        });
     };
+
     enabledRemoteIso();
 
-    //1-2-1 remote iso list
     var initRemoteIsoField = function() {
         $('#load-remote-iso').show();
         $('#remote-iso-field').hide();
         $('#iso-url-field').hide();
         $('#select-all-remote-iso').prop('checked', false);
-        $('#btn-template-remote-iso-create').attr('disabled', 'disabled');
 
         $('#iso-file').val('');
         $('vm-image-local-text').val('');
@@ -369,12 +289,6 @@ kimchi.template_add_main = function() {
 
         $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
 
-        $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path
-
-        $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 4 - Remote folder path
-
-        $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos
-
         $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes
 
         $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes
@@ -405,152 +319,14 @@ kimchi.template_add_main = function() {
         }
     };
 
-    $('#select-all-remote-iso').click(function() {
-        $('#list-remote-iso [type="checkbox"]').prop('checked', $(this).prop('checked'));
-        if ($(this).prop('checked')) {
-
-            $('#iso-file').val('');
-            $('vm-image-local-text').val('');
-            $('#iso-url').val('');
-            $('#iso-url').parent().removeClass('has-error');
-
-            $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path
-
-            $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
-
-            $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path
-
-            $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path
-
-            $('#btn-template-remote-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 5 - Remote selected isos
-
-        } else {
-            $('#btn-template-remote-iso-create').attr('disabled', 'disabled');
-        }
-    });
-
-    $('#list-remote-iso').on('click', '[type="checkbox"]', function() {
-        $('#iso-url').parent().removeClass('has-error');
-        var checkedLength = $('#list-remote-iso [type="checkbox"]:checked').length;
-        if (checkedLength) {
-            $('#btn-template-remote-iso-create').removeAttr('disabled');
-            var length = $('#list-remote-iso [type="checkbox"]').length;
-            $('#select-all-remote-iso').prop('checked', length === checkedLength);
-
-            $('#iso-file').val('');
-            $('vm-image-local-text').val('');
-            $('#iso-url').val('');
-
-            $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path
-
-            $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
-
-            $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path
-
-            $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path
-
-            $('#btn-template-remote-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 5 - Remote selected isos
-
-        } else {
-            $('#select-all-remote-iso').prop('checked', false);
-            $('#btn-template-remote-iso-create').attr('disabled', 'disabled');
-        }
-    });
-
-    $('#btn-template-remote-iso-create').click(function() {
-        submitIso('form-remote-iso');
-    });
-
-    //1-2-2 remote iso url
-    var initIsoUrlField = function() {
-
-        $('#iso-file').val('');
-        $('vm-image-local-text').val('');
-        $('#iso-url').val('');
-
-        $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path
-
-        $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
-
-        $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path
-
-        $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 4 - Remote folder path
-
-        $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos
-
-    };
-
     $('#iso-url').on('input propertychange keyup focus cut paste click', function() {
         $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false);
         $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false);
-        $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block');
-        $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none');
         setTimeout(function() {
             var isValid = kimchi.template_check_url($('input#iso-url').val());
             $('input#iso-url').parent().toggleClass('has-error', !isValid);
-            $('#btn-template-url-create').attr('disabled', (isValid ? false : true));
         }, 0);
     });
-
-    $('#vm-image-local').change(function() {
-        if (this.checked) {
-            if (currentPage === 'iso-local-box') {
-                kimchi.switchPage(currentPage, 'vm-image-local-box', 'left');
-            } else if (currentPage === 'iso-remote-box') {
-                kimchi.switchPage(currentPage, 'vm-image-local-box', 'right');
-            }
-            currentPage = 'vm-image-local-box';
-            $('#template-add-window .modal-body .template-pager').animate({
-                height: "100px"
-            }, 400);
-
-            $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path
-            $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
-            $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'inline-block'); // 3 - File path
-            $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path
-            $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos
-
-        }
-    });
-    $('input', '#vm-image-local-box').on('input propertychange keyup focus cut paste click', function() {
-        setTimeout(function() {
-            var isValid = kimchi.template_check_path($('input', '#vm-image-local-box').val());
-            $('input', '#vm-image-local-box').parent().toggleClass('has-error', !isValid);
-            $('#vm-image-local-box-button').attr('disabled', (isValid ? false : true));
-        }, 0);
-    });
-    $('input', '#vm-image-local-box').on('input propertychange keyup focus cut paste click', function() {
-        setTimeout(function() {
-            var isValid = kimchi.template_check_path($('input', '#vm-image-local-box').val());
-            $('input', '#vm-image-local-box').parent().toggleClass('has-error', !isValid);
-            $('#vm-image-local-box-button').attr('disabled', (isValid ? false : true));
-        }, 0);
-    });
-    $('#vm-image-local-box-button').on('click', function(){
-        $('input', '#vm-image-local-box').prop('disabled', true);
-        $('#vm-image-local-box-button').text(i18n['KCHAPI6008M']);
-        $('#vm-image-local-box-button').prop('disabled', true);
-        addTemplate({
-            source_media: $('input', '#vm-image-local-box').val()
-        }, function() {
-            $('input', '#vm-image-local-box').prop('disabled', false);
-            $('#vm-image-local-box-button').text(i18n['KCHAPI6005M']);
-            $('#vm-image-local-box-button').prop('disabled', false);
-        });
-    });
-
-    $('#btn-template-url-create').click(function() {
-        var isoUrl = $('#iso-url').val();
-        if (!kimchi.template_check_url(isoUrl)) {
-            wok.message.error.code('KCHAPI6004E');
-            return;
-        }
-        var data = {
-            "source_media": isoUrl
-        };
-        addTemplate(data);
-    });
-
     //do create
     var addTemplate = function(data, callback) {
         kimchi.createTemplate(data, function() {
@@ -568,8 +344,8 @@ kimchi.template_add_main = function() {
         });
     };
 
-    var submitIso = function(formId) {
-        var formData = $('#' + formId).serializeObject();
+    var submitIso = function() {
+        var formData = $('#form-local-iso').serializeObject();
         if (formData.iso) {
             var length = 0;
             var successNum = 0;
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 2926cfa..073679c 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -29,16 +29,6 @@
             </div>
             <div class="modal-body">
                 <div class="template-modal-container">
-                    <div>
-                        <span id="alert-modal-container"></span>
-                        <h5>$_("Where is the source media for this template? ")</h5>
-                        <input type="radio" checked="checked" name="iso-source" id="iso-local" value="iso-local" class="wok-radio">
-                        <label for="iso-local">$_("Local ISO Image")</label>
-                        <input type="radio" name="iso-source" id="vm-image-local" value="vm-image-local" class="wok-radio">
-                        <label for="vm-image-local">$_("Local Image File")</label>
-                        <input type="radio" name="iso-source" id="iso-remote" value="iso-remote" class="wok-radio">
-                        <label for="iso-remote">$_("Remote ISO Image")</label>
-                    </div>
                 </div>
                 <div class="template-pager">
                     <div class="page-list">
@@ -47,7 +37,7 @@
                                 <div id="iso-file-field">
                                     <div id="iso-file-box" class="custom-iso-field">
                                         <div class="form-group">
-                                        <label for="iso-file">$_("Provide a File Path for a specific ISO image:")</label>
+                                        <label for="iso-file">$_("File Path:")</label>
                                         <input type="text" class="form-control" id="iso-file" name="iso-file">
                                         </div>
                                     </div>
@@ -58,6 +48,13 @@
                                 <button class="btn btn-primary" id="iso-search-loading" style="display: none"><span class="wok-loading-icon"></span> $_("Please, wait...")</button>
                                 <!-- 1-1-1 -->
                                 <div id="local-iso-field" class="iso-field" style="display: none;">
+                                    <form id="form-template-add">
+                                        <div class="filter">
+                                            <div class="form-group pull-right">
+                                                <input type="text" class="form-control" id="template-add-iso-filter" placeholder="$_("Filter")" />
+                                            </div>
+                                        </div>
+                                    </form>
                                     <div class="row">
                                         <p>$_("The following ISOs are available:")</p>
                                     </div>
@@ -66,7 +63,7 @@
                                             <input type="checkbox" id="select-all-local-iso">$_("All")
                                         </label>
                                     </div>
-                                    <div class="row">
+                                    <div class="row" id="isoRow">
                                         <form id="form-local-iso">
                                         <ul id="list-local-iso" class="list-iso">
                                         </ul>
@@ -77,6 +74,7 @@
                                                     <input type="checkbox" class="iso-checkbox-hidden" name="iso" value="{isoId}">
                                                     <span class="box-iso-border">
                                                         <span class="box-iso-inner">
+                                                        <span><i class="{icon}"></i></span>
                                                             <h3 class="iso-title {os_distro}" title="{name}">
                                                                 {name}
                                                             </h3>
@@ -108,69 +106,11 @@
                             </div>
                         </div>
 
-                        <!-- 1-2 -->
-                        <div class="page" id="iso-remote-box">
-                            <!-- 1-2-2 -->
-                            <div id="iso-url-field" style="display: none;">
-                                <div id="iso-url-box" class="form-group">
-                                    <label for="iso-url">$_("Provide a URL for a specific ISO image:")</label>
-                                    <input type="text" class="form-control" id="iso-url" name="iso-url">
-                                </div>
-                            </div>
-                            <!-- 1-2-0 -->
-                            <div id="load-remote-iso">
-                                <p><span class="wok-loading-icon"></span> $_("Loading default remote ISOs ...")</p>
-                            </div>
-                            <span id="remote-iso-warning-container"></span>
-                            <span id="remote-iso-error-container"></span>
-                            <!-- 1-2-1 -->
-                            <div id="remote-iso-field" class="iso-field" style="display: none;">
-                                <div class="row">
-                                    <p>$_("The following ISOs are available:")</p>
-                                </div>
-                                <div class="checkbox">
-                                    <label class="check-all">
-                                        <input type="checkbox" id="select-all-remote-iso">$_("All")
-                                    </label>
-                                </div>
-                                <div class="row">
-                                    <form id="form-remote-iso">
-                                    <ul id="list-remote-iso" class="list-iso">
-                                    </ul>
-                                    </form>
-                                    <script id="tmpl-list-remote-iso" type="text/html">
-                                        <li class="col-md-3">
-                                            <label class="box-iso-outer">
-                                                <input type="checkbox" class="iso-checkbox-hidden" name="iso" value="{isoId}">
-                                                <span class="box-iso-border">
-                                                    <span class="box-iso-inner">
-                                                        <h3 class="iso-title {os_distro}" title="{name}">
-                                                            {name}
-                                                        </h3>
-                                                        <dl class="iso-info">
-                                                            <dt>{os_distro}</dt>
-                                                            <dd>$_("OS")</dd>
-                                                            <dt>{os_version}</dt>
-                                                            <dd>$_("Version")</dd>
-                                                            <dt>{os_arch}</dt>
-                                                            <dd>$_("Arch")</dd>
-                                                        </dl>
-                                                    </span>
-                                                </span>
-                                            </label>
-                                        </li>
-                                    </script>
-                                </div>
-                            </div>
-                    </div>
         </div>
     </div>
     <div class="modal-footer">
                 <button class="btn btn-default" id="btn-template-file-create" disabled="disabled">$_("Create")</button>
                 <button class="btn btn-default" id="btn-template-local-iso-create" disabled="disabled">$_("Create")</button>
-                <button id="vm-image-local-box-button" class="btn btn-default ui-button-primary">$_("Create")</button>
-                <button class="btn btn-default" id="btn-template-url-create" disabled="disabled">$_("Create")</button>
-                <button class="btn btn-default" id="btn-template-remote-iso-create" disabled="disabled">$_("Create")</button>
                 <button class="btn btn-default" data-dismiss="modal" type="button">$_("Cancel")</button>
     </div>
 </div>
-- 
2.5.0

    