<html>
  <head>
    <meta content="text/html; charset=windows-1252"
      http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    I have sent a V3 patch that fix this. Please refer to :<br>
    [PATCH V3] Edit Template redefined<br>
    <br>
    Best Regards<br>
    <br>
    Wang Wen<br>
    <div class="moz-cite-prefix">On 11/12/2014 7:35 PM, Aline Manera
      wrote:<br>
    </div>
    <blockquote cite="mid:54634612.3060405@linux.vnet.ibm.com"
      type="cite">
      <meta content="text/html; charset=windows-1252"
        http-equiv="Content-Type">
      <br>
      <div class="moz-cite-prefix">On 11/11/2014 12:27 AM, Wen Wang
        wrote:<br>
      </div>
      <blockquote cite="mid:54617400.1000402@linux.vnet.ibm.com"
        type="cite">
        <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type">
        Hi Aline, <br>
        <br>
        When using iSCSI or SCSI, the disk size is read from the
        response and the input is disabled:<br>
      </blockquote>
      <br>
      I tested it and it is not working in that way for me.<br>
      I tested on Fedora 20 and Firefox 33.<br>
      <br>
      <br>
      <img src="cid:part1.03080907.04070204@linux.vnet.ibm.com" alt=""><br>
      <blockquote cite="mid:54617400.1000402@linux.vnet.ibm.com"
        type="cite"> <br>
        <img alt="" src="cid:part2.04010402.08060902@linux.vnet.ibm.com"
          height="509" width="809"><br>
        <br>
        Above is my 1G iSCSI test from my machine. The function is
        realized by the code below:<br>
        <br>
        +                $('select',
        '#form-template-storage').change(function() { <br>
        +                    var selectedItem =
        $(this).parent().parent(); <br>
        +                    var tempStorageName = $(this).val(); <br>
        +                    tempStorageName
        =tempStorageName.split('/')[0]; <br>
        +                    var scsiCap; <br>
        +                    $.each(result, function(index,
        storageEntities) { <br>
        +                        if (tempStorageName ===
        storageEntities.name) { <br>
        +                           
        selectedItem.find('.template-storage-type').val(storageEntities.type);
        <br>
        +                            scsiCap = storageEntities.capacity
        / Math.pow(1024, 3); <br>
                                  } <br>
        +                    }) <br>
        +                    if (tempStorageName === 'iscsi' ||
        tempStorageName === 'scsi') { <br>
        +                        $('.template-storage-disk',
        selectedItem).attr('readonly', true).val(scsiCap); <br>
        +                    } else { <br>
        +                        $('.template-storage-disk',
        selectedItem).attr('readonly', false).val('10'); <br>
                              } <br>
                          }); <br>
        <br>
        Best Regards<br>
        <br>
        Wang Wen<br>
        <br>
        <div class="moz-cite-prefix">On 11/10/2014 11:54 PM, Aline
          Manera wrote:<br>
        </div>
        <blockquote cite="mid:5460DF99.5030900@linux.vnet.ibm.com"
          type="cite"> <br>
          Just one comment; <br>
          <br>
          When a SCSI/iSCSI pool/volume is selected the the "Disk size"
          must be set with the volume size and the input box must be
          disabled. <br>
          <br>
          It was done by the following code: <br>
          <br>
          -    $('#template-edit-storagePool').change(function() { <br>
          -        storagepool = $(this).val(); <br>
          -        var storageArray = storagepool.split("/"); <br>
          -        if (storageArray.length &gt; 3) { <br>
          -            volumeName = storageArray.pop(); <br>
          -            poolName = storageArray.pop(); <br>
          -            kimchi.getStoragePoolVolume(poolName, volumeName,
          function(result) { <br>
          -                $('input[name="disks"]',
          templateEditForm).val(result.capacity / Math.pow(1024,3)); <br>
          -                $('input[name="disks"]',
          templateEditForm).attr('disabled','disabled'); <br>
          -                return false; <br>
          -            }, function (err) { <br>
          -               
          kimchi.message.error(err.responseJSON.reason); <br>
          <br>
          <br>
          <br>
          On 11/05/2014 08:17 AM, Wen Wang wrote: <br>
          <blockquote type="cite">From: Wen Wang <a
              moz-do-not-send="true" class="moz-txt-link-rfc2396E"
              href="mailto:wenwang@linux.vnet.ibm.com">&lt;wenwang@linux.vnet.ibm.com&gt;</a>
            <br>
            <br>
            V1 -&gt; V2: <br>
            <br>
            1) Enable "iSCSI" and "SCSI" for storage. <br>
            2) Changed the storage tab from "storage" to "Storage". <br>
            3) Fix the defect that when editing/adding "Storage" or
            "Interface" line <br>
            went down issue. <br>
            4) "Storage" and "Interface" content can display properly on
            Remote and <br>
            Image created template. <br>
            5) Fix the defect that "Image" didn't show properly when
            using a Image <br>
            created template. <br>
            <br>
            This patch redesigned "Edit Template" diaguage in
            "Templates". New "Edit <br>
            Template" will display all the related information into tabs
            of <br>
            "General", "Storage" and "Interface". Due to unfinished
            back-end work, <br>
            functions are not fully supported, which will be finished in
            the future <br>
            work. <br>
            <br>
            Temporary disabled functions: <br>
            1) Multiple disk operation with multiple storage pools edit
            in template <br>
            for which reason the add button in "Storage" tab is
            disabled. <br>
            2) iSCSI and SCSI storage pool add is removed since we are
            going to <br>
            allow this kind of operation in the process of creating a
            VM. <br>
            <br>
            Signed-off-by: Wen Wang <a moz-do-not-send="true"
              class="moz-txt-link-rfc2396E"
              href="mailto:wenwang@linux.vnet.ibm.com">&lt;wenwang@linux.vnet.ibm.com&gt;</a>
            <br>
            --- <br>
              ui/css/theme-default/template-edit.css |  116 +++++++----
            <br>
              ui/js/src/kimchi.template_edit_main.js |  364
            +++++++++++++++++++++++--------- <br>
              ui/pages/template-edit.html.tmpl       |  168
            ++++++++------- <br>
              3 files changed, 432 insertions(+), 216 deletions(-) <br>
            <br>
            diff --git a/ui/css/theme-default/template-edit.css
            b/ui/css/theme-default/template-edit.css <br>
            index 4975f1b..094e909 100644 <br>
            --- a/ui/css/theme-default/template-edit.css <br>
            +++ b/ui/css/theme-default/template-edit.css <br>
            @@ -17,24 +17,33 @@ <br>
               */ <br>
              #template-edit-window { <br>
                  font-size: 13px; <br>
            -    height: 600px; <br>
            -    width: 1000px; <br>
            +    height: 500px; <br>
            +    width: 800px; <br>
              } <br>
            <br>
            -.template-edit-fieldset { <br>
            -    float: left; <br>
            -    padding: 1em; <br>
            +#edit-template-tabs { <br>
            +    background: none repeat scroll 0 0 transparent; <br>
            +    border: medium none; <br>
            +    height: 100%; <br>
            +    padding: 0; <br>
              } <br>
            <br>
            -.template-edit-wrapper-label,
            .template-edit-wrapper-controls { <br>
            +#edit-template-tabs .form-template-inline-wrapper { <br>
            +    display: inline-block; <br>
                  vertical-align: top; <br>
            -    width: 470px; <br>
              } <br>
            <br>
              .template-edit-wrapper-label { <br>
            -    height: 18px; <br>
            -    line-height: 18px; <br>
            -    margin-top: 8px; <br>
            +    vertical-align: top; <br>
            +    min-width: 100px; <br>
            +    height: 35px; <br>
            +    line-height: 35px; <br>
            +    margin: 7px 0 8px; <br>
            +} <br>
            + <br>
            +.template-edit-wrapper-controls { <br>
            +    vertical-align: top; <br>
            +    width: 400px; <br>
              } <br>
            <br>
              .template-edit-wrapper-controls input[type="text"] { <br>
            @@ -56,7 +65,7 @@ <br>
            <br>
              .template-edit-wrapper-controls &gt; .dropdown { <br>
                  margin: 5px 0 0 1px; <br>
            -    width: 440px; <br>
            +    width: 372px; <br>
              } <br>
            <br>
              .template-edit-wrapper-controls
            input[type="text"][disabled] { <br>
            @@ -65,41 +74,72 @@ <br>
                  cursor: not-allowed; <br>
              } <br>
            <br>
            -.hidden-area { <br>
            -    display: none; <br>
            +#edit-template-tabs .template-tab-header { <br>
            +    margin-bottom: 8px; <br>
            +    padding-bottom: 2px; <br>
            +    font-weight: bold; <br>
            +    border-bottom: 1px solid #999999; <br>
            +    overflow: hidden; <br>
              } <br>
            <br>
            -.template-edit-wrapper-controls .select-list-box { <br>
            -    width: 464px; <br>
            -    max-height: 168px; <br>
            -    overflow: auto; <br>
            -    margin-top: 5px; <br>
            -    border: 1px solid #ccc; <br>
            +#edit-template-tabs .template-tab-header .action-area { <br>
            +    float: right; <br>
            +    height: 20px; <br>
            +    width: 20px; <br>
              } <br>
            <br>
            -.template-edit-wrapper-controls
            .select-list-box&gt;li&gt;label { <br>
            -    display: block; <br>
            +#edit-template-tabs .template-interface-cell { <br>
            +    display: inline-block; <br>
            +    width: 250px; <br>
              } <br>
            <br>
            -.template-edit-wrapper-controls
            .select-list-box&gt;li&gt;label&gt; <br>
            -input[type="checkbox"] { <br>
            -    display: none; <br>
            +#edit-template-tabs .template-storage-cell{ <br>
            +    display: inline-block; <br>
            +    width: 230px; <br>
            +} <br>
            + <br>
            +#edit-template-tabs .template-storage-cell label { <br>
            +    height: 25px; <br>
            +    padding: 2px; <br>
            +    border: 1px; <br>
              } <br>
            <br>
            -.template-edit-wrapper-controls
            .select-list-box&gt;li&gt;label&gt;.item { <br>
            -    display: block; <br>
            -    height: 41px; <br>
            -    line-height: 41px; <br>
            -    padding: 0 20px 0 40px; <br>
            -    border-bottom: 1px solid #ccc; <br>
            -    box-shadow: 0px 1px 1px #fff; <br>
            -    text-shadow: -1px -1px 1px #ddd, 1px 1px 1px #fff; <br>
            -    color: #222; <br>
            -    font-size: 12px; <br>
            +#form-template-storage .template-tab-body select { <br>
            +    width: 140px; <br>
              } <br>
            <br>
            -.template-edit-wrapper-controls
            .select-list-box&gt;li&gt;label&gt; <br>
            -input[type="checkbox"]:CHECKED+.item { <br>
            -    background: #f8f8f8
            url(../images/theme-default/check-green.png) no-repeat <br>
            -                10px center; <br>
            +#form-template-storage .template-tab-body input { <br>
            +    width: 56px; <br>
            +    height: 17px; <br>
              } <br>
            + <br>
            +#form-template-storage .template-tab-body
            .template-storage-name { <br>
            +    width: 220px; <br>
            +} <br>
            + <br>
            +#edit-template-tabs .template-tab-body input[readonly] { <br>
            +    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); <br>
            +    border-color: transparent; <br>
            +    text-overflow: ellipsis; <br>
            +} <br>
            + <br>
            +#edit-template-tabs .template-tab-body .item { <br>
            +    height: 25px; <br>
            +} <br>
            + <br>
            +#form-template-interface .template-tab-body select { <br>
            +    width: 180px; <br>
            +} <br>
            + <br>
            +#edit-template-tabs .template-tab-body .action-area { <br>
            +    float: right; <br>
            +} <br>
            + <br>
            +#edit-template-tabs .template-tab-body .action-area button
            { <br>
            +    width: 20px; <br>
            +    height: 20px; <br>
            +} <br>
            + <br>
            +#edit-template-tabs .hide { <br>
            +    display: none; <br>
            +} <br>
            \ No newline at end of file <br>
            diff --git a/ui/js/src/kimchi.template_edit_main.js
            b/ui/js/src/kimchi.template_edit_main.js <br>
            index 2f4cc9a..12a9f20 100644 <br>
            --- a/ui/js/src/kimchi.template_edit_main.js <br>
            +++ b/ui/js/src/kimchi.template_edit_main.js <br>
            @@ -16,19 +16,23 @@ <br>
               * limitations under the License. <br>
               */ <br>
              kimchi.template_edit_main = function() { <br>
            -    var templateEditForm = $('#form-template-edit'); <br>
            +    var templateEditMain = $('#edit-template-tabs'); <br>
                  var origDisks; <br>
                  var origPool; <br>
            +    var origNetworks; <br>
                  var templateDiskSize; <br>
            -    $('#template-name',
            templateEditForm).val(kimchi.selectedTemplate); <br>
            -    kimchi.retrieveTemplate(kimchi.selectedTemplate,
            function(template) { <br>
            +    $('#template-name',
            templateEditMain).val(kimchi.selectedTemplate); <br>
            +    templateEditMain.tabs(); <br>
            + <br>
            +    var initTemplate = function(template) { <br>
                      origDisks =  template.disks; <br>
                      origPool = template.storagepool; <br>
            +        origNetworks = template.networks; <br>
                      for(var i=0;i&lt;template.disks.length;i++){ <br>
                          if(template.disks[i].base){ <br>
                              template["vm-image"] =
            template.disks[i].base; <br>
            -               
            $('#templ-edit-cdrom').addClass('hide-content'); <br>
            -               
            $('#templ-edit-vm-image').removeClass('hide-content'); <br>
            +                $('.templ-edit-cdrom').addClass('hide'); <br>
            +               
            $('.templ-edit-vm-image').removeClass('hide'); <br>
                              break; <br>
                          } <br>
                      } <br>
            @@ -37,18 +41,12 @@ kimchi.template_edit_main = function() {
            <br>
                          if (prop == 'graphics') { <br>
                             value = value["type"]; <br>
                          } <br>
            -            $('input[name="' + prop + '"]',
            templateEditForm).val(value); <br>
            -        } <br>
            -        var disks = template.disks; <br>
            -        $('input[name="disks"]').val(disks[0].size); <br>
            -        templateDiskSize = $('input[name="disks"]').val();
            <br>
            -        if (disks[0].volume) { <br>
            -            var spool_value = $('#form-template-edit
            [name="storagepool"]').val(); <br>
            -            $('input[name="storagepool"]',
            templateEditForm).val(spool_value + '/' + disks[0].volume);
            <br>
            -            $('input[name="disks"]',
            templateEditForm).attr('disabled','disabled'); <br>
            +            $('input[name="' + prop + '"]',
            templateEditMain).val(value); <br>
                      } <br>
            <br>
                      var vncOpt = [{label: 'VNC', value: 'vnc'}]; <br>
            +        $('#template-edit-graphics').append('&lt;option
            selected&gt;VNC&lt;/option&gt;'); <br>
            +       
$('#template-edit-graphics').append('&lt;option&gt;Spice&lt;/option&gt;');<br>
                      kimchi.select('template-edit-graphics-list',
            vncOpt); <br>
                      var enableSpice = function() { <br>
                          if (kimchi.capabilities == undefined) { <br>
            @@ -61,119 +59,281 @@ kimchi.template_edit_main = function()
            { <br>
                          } <br>
                      }; <br>
                      enableSpice(); <br>
            - <br>
            -        var scsipools = {}; <br>
            -        kimchi.listStoragePools(function(result) { <br>
            -            var options = []; <br>
            -            if (result &amp;&amp; result.length) { <br>
            -                $.each(result, function(index, storagePool)
            { <br>
            -                    if ((storagePool.state=="active")
            &amp;&amp; (storagePool.type !== 'kimchi-iso')) { <br>
            -                        if ((storagePool.type == 'iscsi')
            || (storagePool.type == 'scsi')){ <br>
            -                            scsipools[storagePool.name] =
            []; <br>
            -                           
            kimchi.listStorageVolumes(storagePool.name, function(result)
            { <br>
            -                                if (result &amp;&amp;
            result.length) { <br>
            -                                    $.each(result,
            function(index, storageVolume) { <br>
            -                                        options.push({ <br>
            -                                            label:
            storagePool.name + '/' + storageVolume.name, <br>
            -                                            value:
            '/storagepools/' + storagePool.name + '/' +
            storageVolume.name <br>
            -                                        }); <br>
            -                                       
            scsipools[storagePool.name].push(storageVolume) <br>
            -                                    }); <br>
            -                                } <br>
            -                               
            kimchi.select('template-edit-storagePool-list', options); <br>
            -                            }); <br>
            +        var initStorage = function(result) { <br>
            +            var scsipools = {}; <br>
            +            var addStorageItem = function(storageData) { <br>
            +                var thisName; <br>
            +                var thisType; <br>
            +                var thisDisk; <br>
            +                var nodeStorage =
            $.parseHTML(kimchi.substitute($('#template-storage-pool-tmpl').html(),
            storageData)); <br>
            +                $('.template-tab-body',
            '#form-template-storage').append(nodeStorage); <br>
            +                $('.edit',
            '#form-template-storage').button({ <br>
            +                    icons : {primary : 'ui-icon-pencil'}, <br>
            +                    text : false <br>
            +                }).click(function(evt) { <br>
            +                    evt.preventDefault(); <br>
            +                    var storageItem =
            $(this).parent().parent(); <br>
            +                    thisName = $('.template-storage-name',
            storageItem).val(); <br>
            +                    thisType = $('.template-storage-type',
            storageItem).val(); <br>
            +                    thisDisk = $('.template-storage-disk',
            storageItem).val(); <br>
            +                    $('.template-storage-name',
            storageItem).hide(); <br>
            +                    $('.template-storage-disk',
            storageItem).attr('readonly', false); <br>
            +                    if (thisType === 'iscsi' || thisType
            === 'scsi') { <br>
            +                        $('.template-storage-disk',
            storageItem).attr('readonly', true); <br>
            +                    } else { <br>
            +                        $('.template-storage-disk',
            storageItem).attr('readonly', false); <br>
            +                    } <br>
            +                    $('.save',
            storageItem).parent().show(); <br>
            +                    $('.delete',
            storageItem).parent().hide(); <br>
            +                    var selectedStorage = $('select',
            storageItem).val(); <br>
            +                    $('.template-storage-name',
            storageItem).val(selectedStorage).hide(); <br>
            +                    $('select',
            storageItem).val(thisName).show(); <br>
            +                }); <br>
            +                $('.delete',
            '#form-template-storage').button({ <br>
            +                    icons : {primary : 'ui-icon-trash'}, <br>
            +                    text : false <br>
            +                }).click(function(evt) { <br>
            +                    evt.preventDefault(); <br>
            +                    $(this).parent().parent().remove(); <br>
            +                }); <br>
            +                $('.cancel',
            '#form-template-storage').button({ <br>
            +                    icons : {primary :
            'ui-icon-arrowreturnthick-1-w'}, <br>
            +                    text : false <br>
            +                }).click(function(evt) { <br>
            +                    evt.preventDefault(); <br>
            +                    var cancelEntity =
            $(this).parent().parent(); <br>
            +                    if ($('.template-storage-name',
            cancelEntity).val() === 'null') { <br>
            +                        cancelEntity.remove(); <br>
            +                    } else { <br>
            +                        $('select', cancelEntity).hide(); <br>
            +                        $('.template-storage-name',
            cancelEntity).val(thisName).attr('readonly', true).show(); <br>
            +                        $('.template-storage-type',
            cancelEntity).val(thisType).attr('readonly', true); <br>
            +                        $('.template-storage-disk',
            cancelEntity).val(thisDisk).attr('readonly', true); <br>
            +                        $('.save',
            cancelEntity).parent().hide(); <br>
            +                        $('.edit',
            cancelEntity).parent().show(); <br>
            +                    } <br>
            +                }); <br>
            +                $('.save',
            '#form-template-storage').button({ <br>
            +                    icons : {primary : 'ui-icon-disk'}, <br>
            +                    text : false <br>
            +                }).click(function(evt) { <br>
            +                    evt.preventDefault(); <br>
            +                    var storageItem =
            $(this).parent().parent(); <br>
            +                    $('.save',
            storageItem).parent().hide(); <br>
            +                    $('.delete',
            storageItem).parent().show(); <br>
            +                    var selectedStorage = $('select',
            storageItem).val(); <br>
            +                    $('.template-storage-name',
            storageItem).val(selectedStorage).attr('readonly',
            true).show(); <br>
            +                    $('.template-storage-disk',
            storageItem).attr('readonly', true); <br>
            +                    $('.template-storage-type',
            storageItem).attr('readonly', true); <br>
            +                    $('select', storageItem).hide(); <br>
            +                }); <br>
            +                var storageOptions = ''; <br>
            +                var scsiOptions = ''; <br>
            +                $('select',
            '#form-template-storage').find('option').remove(); <br>
            +                $.each(result, function(index,
            storageEntities) { <br>
            +                    if((storageEntities.state === 'active')
            &amp;&amp; (storageEntities.type != 'kimchi-iso')) { <br>
            +                        if(storageEntities.type === 'iscsi'
            || storageEntities.type === 'scsi') { <br>
            +                           
            kimchi.listStorageVolumes(storageEntities.name,
            function(currentVolume) { <br>
            +                                $.each(currentVolume,
            function(indexSCSI, scsiEntities) { <br>
            +                                    scsiOptions +=
            '&lt;option&gt;' + storageEntities.name + '/' +
            scsiEntities.name + '&lt;/option&gt;'; <br>
            +                                }); <br>
            +                                $('select',
            '#form-template-storage').append(scsiOptions); <br>
            +                            }, function() {}); <br>
            +                        } else { <br>
            +                            var isSlected =
            storageEntities.name === 'default' ? ' selected' : ''; <br>
            +                            storageOptions += '&lt;option'
            + isSlected + '&gt;' + storageEntities.name +
            '&lt;/option&gt;'; <br>
                                      } <br>
            -                        else { <br>
            -                            options.push({ <br>
            -                                label: storagePool.name, <br>
            -                                value: '/storagepools/' +
            storagePool.name <br>
            -                            }); <br>
            +                    } <br>
            +                }); <br>
            +                $('select',
            '#form-template-storage').append(storageOptions); <br>
            +                $('select',
            '#form-template-storage').change(function() { <br>
            +                    var selectedItem =
            $(this).parent().parent(); <br>
            +                    var tempStorageName = $(this).val(); <br>
            +                    tempStorageName
            =tempStorageName.split('/')[0]; <br>
            +                    var scsiCap; <br>
            +                    $.each(result, function(index,
            storageEntities) { <br>
            +                        if (tempStorageName ===
            storageEntities.name) { <br>
            +                           
            selectedItem.find('.template-storage-type').val(storageEntities.type);
            <br>
            +                            scsiCap =
            storageEntities.capacity / Math.pow(1024, 3); <br>
                                      } <br>
            +                    }) <br>
            +                    if (tempStorageName === 'iscsi' ||
            tempStorageName === 'scsi') { <br>
            +                        $('.template-storage-disk',
            selectedItem).attr('readonly', true).val(scsiCap); <br>
            +                    } else { <br>
            +                        $('.template-storage-disk',
            selectedItem).attr('readonly', false).val('10'); <br>
                                  } <br>
                              }); <br>
            -            } <br>
            -            if ($.isEmptyObject(scsipools)) { <br>
            -               
            kimchi.select('template-edit-storagePool-list', options); <br>
            -            } <br>
            -        }); <br>
            -        kimchi.listNetworks(function(result) { <br>
            -            if(result &amp;&amp; result.length &gt; 0) { <br>
            -                var html = ''; <br>
            -                var tmpl = $('#tmpl-network').html(); <br>
            -                $.each(result, function(index, network) { <br>
            -                    if (result[index].state === 'active') <br>
            -                        html += kimchi.substitute(tmpl,
            network); <br>
            +            }; <br>
            + <br>
            +            if ((origDisks &amp;&amp; origDisks.length)
            &amp;&amp; (origPool &amp;&amp; origPool.length)) { <br>
            +                splitPool = origPool.split('/'); <br>
            +                var defaultPool; <br>
            +                var defaultType; <br>
            +                $.each(result, function(index,
            poolEntities) { <br>
            +                    if (poolEntities.name ===
            splitPool[splitPool.length-1]) { <br>
            +                        defaultType = poolEntities.type; <br>
            +                        defaultPool =
            splitPool[splitPool.length-1] <br>
            +                    } <br>
                              }); <br>
            -               
            $('#template-edit-network-list').html(html).show(); <br>
            -                if(template.networks &amp;&amp;
            template.networks.length &gt; 0) { <br>
            -                    $('input[name="networks"]',
            templateEditForm).each(function(index, element) { <br>
            -                        var value = $(element).val(); <br>
            -                        if(template.networks.indexOf(value)
            &gt;= 0) { <br>
            -                            $(element).prop('checked',
            true); <br>
            -                        } <br>
            -                    }); <br>
            +                if (origDisks[0]['volume']) { <br>
            +                    defaultPool = defaultPool + '/' +
            origDisks[0]['volume']; <br>
                              } <br>
            -            } else { <br>
            -                $('#template-edit-network-list').hide(); <br>
            +                $.each(origDisks, function(index,
            diskEntities) { <br>
            +                    var storageNodeData = { <br>
            +                        viewMode : '', <br>
            +                        editMode : 'hide', <br>
            +                        storageName : defaultPool, <br>
            +                        storageType : defaultType, <br>
            +                        storageDisk : diskEntities.size <br>
            +                    } <br>
            +                    addStorageItem(storageNodeData); <br>
            +                }); <br>
            +               
            $('.template-storage-disk').attr('readonly', true); <br>
                          } <br>
            -        }); <br>
            -    }); <br>
            <br>
            -    $('#template-edit-storagePool').change(function() { <br>
            -        storagepool = $(this).val(); <br>
            -        var storageArray = storagepool.split("/"); <br>
            -        if (storageArray.length &gt; 3) { <br>
            -            volumeName = storageArray.pop(); <br>
            -            poolName = storageArray.pop(); <br>
            -            kimchi.getStoragePoolVolume(poolName,
            volumeName, function(result) { <br>
            -                $('input[name="disks"]',
            templateEditForm).val(result.capacity / Math.pow(1024,3)); <br>
            -                $('input[name="disks"]',
            templateEditForm).attr('disabled','disabled'); <br>
            -                return false; <br>
            -            }, function (err) { <br>
            -               
            kimchi.message.error(err.responseJSON.reason); <br>
            +            $('#template-edit-storage-add-button').button({
            <br>
            +                icons: { <br>
            +                    primary: "ui-icon-plusthick" <br>
            +                }, <br>
            +                text: false, <br>
            +                disabled: true <br>
            +            }).click(function(event) { <br>
            +                event.preventDefault(); <br>
            +                var storageNodeData = { <br>
            +                    viewMode : 'hide', <br>
            +                    editMode : '', <br>
            +                    storageName : 'null', <br>
            +                    storageType : 'dir', <br>
            +                    storageDisk : '10' <br>
            +                } <br>
            +                addStorageItem(storageNodeData); <br>
                          }); <br>
            -        } else { <br>
            -            $('input[name="disks"]',
            templateEditForm).removeAttr('disabled'); <br>
            -            $('input[name="disks"]',
            templateEditForm).val(templateDiskSize); <br>
            -        } <br>
            -    }); <br>
            -    $('input[name="disks"]',
            templateEditForm).keyup(function() { <br>
            -        templateDiskSize = $('input[name="disks"]',
            templateEditForm).val(); <br>
            -    }); <br>
            +        }; <br>
            +        var initInterface = function(result) { <br>
            +            var addInterfaceItem = function(networkData) {
            <br>
            +                var nodeInterface =
            $.parseHTML(kimchi.substitute($('#template-interface-tmpl').html(),
            networkData)); <br>
            +                $('.template-tab-body',
            '#form-template-interface').append(nodeInterface); <br>
            +                $('.edit',
            '#form-template-interface').button({ <br>
            +                    icons : {primary : 'ui-icon-pencil'}, <br>
            +                    text : false, <br>
            +                    disabled : true <br>
            +                }); <br>
            +                $('.delete',
            '#form-template-interface').button({ <br>
            +                    icons : {primary : 'ui-icon-trash'}, <br>
            +                    text : false <br>
            +                }).click(function(evt) { <br>
            +                    evt.preventDefault(); <br>
            +                    $(this).parent().parent().remove(); <br>
            +                }); <br>
            +                $('.cancel',
            '#form-template-interface').button({ <br>
            +                    icons : {primary :
            'ui-icon-arrowreturnthick-1-w'}, <br>
            +                    text : false <br>
            +                }).click(function(evt) { <br>
            +                    evt.preventDefault(); <br>
            +                    $(this).parent().parent().remove(); <br>
            +                }); <br>
            +                $('.save',
            '#form-template-interface').button({ <br>
            +                    icons : {primary : 'ui-icon-disk'}, <br>
            +                    text : false <br>
            +                }).click(function(evt) { <br>
            +                    evt.preventDefault(); <br>
            +                    var interItem =
            $(this).parent().parent(); <br>
            +                    $('.save', interItem).parent().hide();
            <br>
            +                    $('.delete',
            interItem).parent().show(); <br>
            +                    var selectedInterface = $('select',
            interItem).val(); <br>
            +                    $('.template-interface-name',
            interItem).val(selectedInterface).show(); <br>
            +                    $('select', interItem).hide(); <br>
            +                }); <br>
            +                var networkOptions = ''; <br>
            +                for(var i=0;i&lt;result.length;i++){ <br>
            +                    if(result[i].state === "active") { <br>
            +                        var isSlected = i==0 ? ' selected'
            : ''; <br>
            +                        networkOptions += '&lt;option' +
            isSlected + '&gt;' + result[i].name + '&lt;/option&gt;'; <br>
            +                    } <br>
            +                } <br>
            +                $('select',
            '#form-template-interface').find('option').remove(); <br>
            +                $('select',
            '#form-template-interface').append(networkOptions); <br>
            +            }; <br>
            +            if(result &amp;&amp; result.length &gt; 0) { <br>
            +                $.each(result, function(index, data) { <br>
            +                    if($.inArray(data.name, origNetworks)
            &gt; -1) { <br>
            +                        addInterfaceItem({ <br>
            +                            mac : '', <br>
            +                            network : data.name, <br>
            +                            type : 'network', <br>
            +                            viewMode : '', <br>
            +                            editMode : 'hide' <br>
            +                        }); <br>
            +                    } <br>
            +                }); <br>
            +            } <br>
            +           
            $('#template-edit-interface-add-button').button({ <br>
            +                icons: { <br>
            +                    primary: 'ui-icon-plusthick' <br>
            +                }, <br>
            +                text: false <br>
            +            }).click(function(evt) { <br>
            +                evt.preventDefault(); <br>
            +                addInterfaceItem({ <br>
            +                    mac : '', <br>
            +                    network : '', <br>
            +                    type : 'network', <br>
            +                    viewMode : 'hide', <br>
            +                    editMode : '' <br>
            +                }); <br>
            +            }); <br>
            +        }; <br>
            +        kimchi.listNetworks(initInterface); <br>
            +        kimchi.listStoragePools(initStorage); <br>
            +    }; <br>
            +    kimchi.retrieveTemplate(kimchi.selectedTemplate,
            initTemplate); <br>
            + <br>
            <br>
                  $('#tmpl-edit-button-save').on('click', function() { <br>
            -        var editableFields = [ 'name', 'cpus', 'memory',
            'storagepool', 'disks', 'graphics']; <br>
            +        var editableFields = [ 'name', 'cpus', 'memory',
            'disks', 'graphics']; <br>
                      var data = {}; <br>
            +        //Fix me: Only support one storage pool now <br>
            +        var storages = $('.template-tab-body .item',
            '#form-template-storage'); <br>
            +        var tempName = $('.template-storage-name',
            storages).val(); <br>
            +        tempName = tempName.split('/'); <br>
            +        var tempNameHead =tempName[0]; <br>
            +        var tempNameTail = tempNameHead; <br>
            +        if(tempNameHead === 'iscsi' || tempNameHead
            =='scsi') { <br>
            +            tempNameTail = tempName[tempName.length-1]; <br>
            +        } <br>
            +        tempName = '/storagepools/' + tempNameHead; <br>
            +        data['storagepool'] = tempName; <br>
                      $.each(editableFields, function(i, field) { <br>
                          /* Support only 1 disk at this moment */ <br>
                          if (field == 'disks') { <br>
            -               origDisks[0].size =
            Number($('#form-template-edit [name="' + field +
            '"]').val()); <br>
            +                var tmpItem = $('#form-template-storage
            .item'); <br>
            +                origDisks[0].size =
            Number($('.template-storage-disk', tmpItem).val()); <br>
            +                if($('.template-storage-type',
            tmpItem).val() === 'iscsi' || $('.template-storage-type',
            tmpItem).val() =='scsi') { <br>
            +                    origDisks[0]['volume'] = tempNameTail;
            <br>
            +                } else { <br>
            +                    origDisks[0]['volume'] &amp;&amp;
            delete origDisks[0]['volume']; <br>
            +                } <br>
                             data[field] = origDisks; <br>
                          } <br>
                          else if (field == 'graphics') { <br>
            -               var type = $('#form-template-edit [name="' +
            field + '"]').val(); <br>
            +               var type = $('#form-template-general
            [name="' + field + '"]').val(); <br>
                             data[field] = {'type': type}; <br>
                          } <br>
                          else { <br>
            -               data[field] = $('#form-template-edit
            [name="' + field + '"]').val(); <br>
            +               data[field] = $('#form-template-general
            [name="' + field + '"]').val(); <br>
                          } <br>
                      }); <br>
                      data['memory'] = Number(data['memory']); <br>
                      data['cpus']   = Number(data['cpus']); <br>
            -        storagepool = data['storagepool']; <br>
            -        storageArray = storagepool.split("/"); <br>
            -        if (storageArray.length &gt; 3){ <br>
            -            /* Support only 1 disk at this moment */ <br>
            -            data["disks"][0].volume = storageArray.pop(); <br>
            -            data['storagepool'] = storageArray.join("/"); <br>
            -        } else if (data["disks"][0].volume) { <br>
            -            delete data["disks"][0].volume; <br>
            -        } <br>
            -        var networks =
            templateEditForm.serializeObject().networks; <br>
            -        if (networks instanceof Array) { <br>
            -            data.networks = networks; <br>
            -        } else if (networks != null) { <br>
            -            data.networks = [networks]; <br>
            +        var networks = $('.template-tab-body .item',
            '#form-template-interface'); <br>
            +        var networkForUpdate = new Array(); <br>
            +        $.each(networks, function(index, networkEntities) {
            <br>
            +           
            networkForUpdate.push($('.template-interface-name',
            networkEntities).val()); <br>
            +        }); <br>
            +        if (networkForUpdate instanceof Array) { <br>
            +            data.networks = networkForUpdate; <br>
            +        } else if (networkForUpdate != null) { <br>
            +            data.networks = [networkForUpdate]; <br>
                      } else { <br>
                          data.networks = []; <br>
                      } <br>
            diff --git a/ui/pages/template-edit.html.tmpl
            b/ui/pages/template-edit.html.tmpl <br>
            index 5a71d91..018ac10 100644 <br>
            --- a/ui/pages/template-edit.html.tmpl <br>
            +++ b/ui/pages/template-edit.html.tmpl <br>
            @@ -28,74 +28,67 @@ <br>
                      &lt;div class="close"&gt;X&lt;/div&gt; <br>
                  &lt;/header&gt; <br>
                  &lt;div class="content"&gt; <br>
            -        &lt;form id="form-template-edit"&gt; <br>
            +        &lt;div id="edit-template-tabs"&gt; <br>
                          &lt;input type="hidden" id="template-name"
            name="templateName" /&gt; <br>
            -            &lt;fieldset class="template-edit-fieldset"&gt;
            <br>
            -                &lt;div&gt; <br>
            +            &lt;ul&gt; <br>
            +                &lt;li&gt; <br>
            +                    &lt;a
            href="#form-template-general"&gt;$_("General")&lt;/a&gt; <br>
            +                &lt;/li&gt; <br>
            +                &lt;li&gt; <br>
            +                    &lt;a
            href="#form-template-storage"&gt;$_("Storage")&lt;/a&gt; <br>
            +                &lt;/li&gt; <br>
            +                &lt;li&gt; <br>
            +                    &lt;a
            href="#form-template-interface"&gt;$_("Interface")&lt;/a&gt;
            <br>
            +                &lt;/li&gt; <br>
            +            &lt;/ul&gt; <br>
            +            &lt;form id="form-template-general"&gt; <br>
            +                &lt;div
            class="form-template-inline-wrapper"&gt; <br>
                                  &lt;div
            class="template-edit-wrapper-label"&gt; <br>
                                      &lt;label
            for="template-edit-id-textbox"&gt;$_("Name")&lt;/label&gt; <br>
                                  &lt;/div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            -                        &lt;input
            id="template-edit-id-textbox" name="name" type="text" /&gt;
            <br>
            -                    &lt;/div&gt; <br>
            -                &lt;/div&gt; <br>
            -                &lt;div&gt; <br>
                                  &lt;div
            class="template-edit-wrapper-label"&gt; <br>
                                      &lt;label
            for="template-edit-vendor-textbox"&gt;$_("Vendor")&lt;/label&gt;
            <br>
                                  &lt;/div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            -                        &lt;input
            id="template-edit-vendor-textbox" name="os_distro"
            type="text" disabled="disabled" /&gt; <br>
            -                    &lt;/div&gt; <br>
            -                &lt;/div&gt; <br>
            -                &lt;div&gt; <br>
                                  &lt;div
            class="template-edit-wrapper-label"&gt; <br>
                                      &lt;label
            for="template-edit-version-textbox"&gt;$_("Version")&lt;/label&gt;
            <br>
                                  &lt;/div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            -                        &lt;input
            id="template-edit-version-textbox" name="os_version"
            type="text" disabled="disabled" /&gt; <br>
            -                    &lt;/div&gt; <br>
            -                &lt;/div&gt; <br>
            -                &lt;div&gt; <br>
                                  &lt;div
            class="template-edit-wrapper-label"&gt; <br>
                                      &lt;label
            for="template-edit-cpu-textbox"&gt;$_("CPU
            Number")&lt;/label&gt; <br>
                                  &lt;/div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            -                        &lt;input
            id="template-edit-cpu-textbox" name="cpus" type="text" /&gt;
            <br>
            -                    &lt;/div&gt; <br>
            -                &lt;/div&gt; <br>
            -                &lt;div&gt; <br>
                                  &lt;div
            class="template-edit-wrapper-label"&gt; <br>
                                      &lt;label
            for="template-edit-memory-textbox"&gt;$_("Memory
            (MB)")&lt;/label&gt; <br>
                                  &lt;/div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            -                        &lt;input
            id="template-edit-memory-textbox" name="memory" type="text"
            /&gt; <br>
            +                    &lt;div
            class="template-edit-wrapper-label templ-edit-cdrom"&gt; <br>
            +                        &lt;label
            for="template-edit-cdrom-textbox"&gt;$_("CDROM")&lt;/label&gt;
            <br>
            +                    &lt;/div&gt; <br>
            +                    &lt;div
            class="template-edit-wrapper-label templ-edit-vm-image
            hide"&gt; <br>
            +                        &lt;label
            for="template-edit-vmimage-textbox"&gt;$_("Image
            File")&lt;/label&gt; <br>
                                  &lt;/div&gt; <br>
            -                &lt;/div&gt; <br>
            -                &lt;div&gt; <br>
                                  &lt;div
            class="template-edit-wrapper-label"&gt; <br>
            -                        &lt;label
            for="template-edit-disk-textbox"&gt;$_("Disk
            (GB)")&lt;/label&gt; <br>
            +                       
            &lt;label&gt;$_("Graphics")&lt;/label&gt; <br>
                                  &lt;/div&gt; <br>
            +                &lt;/div&gt; <br>
            +                &lt;div
            class="form-template-inline-wrapper"&gt; <br>
                                  &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            -                        &lt;input
            id="template-edit-disk-textbox" name="disks" type="text"
            /&gt; <br>
            +                        &lt;input
            id="template-edit-id-textbox" name="name" type="text" /&gt;
            <br>
                                  &lt;/div&gt; <br>
            -                &lt;/div&gt; <br>
            -            &lt;/fieldset&gt; <br>
            -            &lt;fieldset class="template-edit-fieldset"&gt;
            <br>
            -                &lt;div id="templ-edit-cdrom"&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-label"&gt; <br>
            -                        &lt;label
            for="template-edit-cdrom-textbox"&gt;$_("CDROM")&lt;/label&gt;
            <br>
            +                    &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            +                        &lt;input
            id="template-edit-vendor-textbox" name="os_distro"
            type="text" disabled="disabled" /&gt; <br>
                                  &lt;/div&gt; <br>
                                  &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            -                        &lt;input
            id="template-edit-cdrom-textbox" name="cdrom" type="text"
            disabled="disabled"/&gt; <br>
            +                        &lt;input
            id="template-edit-version-textbox" name="os_version"
            type="text" disabled="disabled" /&gt; <br>
                                  &lt;/div&gt; <br>
            -                &lt;/div&gt; <br>
            -                &lt;div id="templ-edit-vm-image"
            class="hide-content"&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-label"&gt;$_("Image
            File")&lt;/div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-controls"&gt;&lt;input
            name="vm-image" type="text" disabled/&gt;&lt;/div&gt; <br>
            -                &lt;/div&gt; <br>
            -                &lt;div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-label"&gt; <br>
            -                       
            &lt;label&gt;$_("Graphics")&lt;/label&gt; <br>
            +                    &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            +                        &lt;input
            id="template-edit-cpu-textbox" name="cpus" type="text" /&gt;
            <br>
            +                    &lt;/div&gt; <br>
            +                    &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            +                        &lt;input
            id="template-edit-memory-textbox" name="memory" type="text"
            /&gt; <br>
            +                    &lt;/div&gt; <br>
            +                    &lt;div
            class="template-edit-wrapper-controls templ-edit-cdrom"&gt;
            <br>
            +                        &lt;input
            id="template-edit-cdrom-textbox" name="cdrom" type="text"
            disabled="disabled" /&gt; <br>
            +                    &lt;/div&gt; <br>
            +                    &lt;div
            class="template-edit-wrapper-controls templ-edit-vm-image
            hide"&gt; <br>
            +                        &lt;input
            id="template-edit-vmimage-textbox" name="vm-image"
            type="text" disabled="disabled" /&gt; <br>
                                  &lt;/div&gt; <br>
                                  &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
                                      &lt;div class="btn dropdown
            popable"&gt; <br>
            @@ -108,40 +101,26 @@ <br>
                                      &lt;/div&gt; <br>
                                  &lt;/div&gt; <br>
                              &lt;/div&gt; <br>
            -                &lt;div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-label"&gt; <br>
            -                        &lt;label&gt;$_("Storage
            Pool")&lt;/label&gt; <br>
            -                    &lt;/div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            -                        &lt;div class="btn dropdown
            popable"&gt; <br>
            -                            &lt;input
            id="template-edit-storagePool" name="storagepool"
            type="hidden" /&gt; <br>
            -                            &lt;span class="text"
            id="template-edit-storage-label"&gt;&lt;/span&gt;&lt;span
            class="arrow"&gt;&lt;/span&gt; <br>
            -                            &lt;div class="popover"
            style="width: 100%"&gt; <br>
            -                                &lt;ul class="select-list"
            id="template-edit-storagePool-list"
            data-target="template-edit-storagePool"
            data-label="template-edit-storage-label"&gt; <br>
            -                                &lt;/ul&gt; <br>
            -                            &lt;/div&gt; <br>
            -                        &lt;/div&gt; <br>
            -                    &lt;/div&gt; <br>
            +            &lt;/form&gt; <br>
            +            &lt;form id="form-template-storage"&gt; <br>
            +                &lt;div class="template-tab-header"&gt; <br>
            +                    &lt;span
            class="template-storage-cell"&gt;$_("Storage
            Pool")&lt;/span&gt; <br>
            +                    &lt;span
            class="template-storage-cell"&gt;$_("Type")&lt;/span&gt; <br>
            +                    &lt;span
            class="template-storage-cell"&gt;$_("Disk(GB)")&lt;/span&gt;
            <br>
            +                    &lt;button type="button"
            id="template-edit-storage-add-button"
            class="action-area"&gt;&lt;/button&gt; <br>
                              &lt;/div&gt; <br>
            -                &lt;div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-label"&gt; <br>
            -                       
            &lt;label&gt;$_("Network")&lt;/label&gt; <br>
            -                    &lt;/div&gt; <br>
            -                    &lt;div
            class="template-edit-wrapper-controls"&gt; <br>
            -                        &lt;ul class="select-list-box"
            id="template-edit-network-list"&gt; <br>
            -                        &lt;/ul&gt; <br>
            -                        &lt;script id="tmpl-network"
            type="text/html"&gt; <br>
            -                            &lt;li&gt; <br>
            -                                &lt;label&gt; <br>
            -                                    &lt;input
            name="networks" type="checkbox" value="{name}" /&gt; <br>
            -                                    &lt;span
            class="item"&gt;{name}&lt;/span&gt; <br>
            -                                &lt;/label&gt; <br>
            -                            &lt;/li&gt; <br>
            -                        &lt;/script&gt; <br>
            -                    &lt;/div&gt; <br>
            +                &lt;div class="template-tab-body"&gt; <br>
                              &lt;/div&gt; <br>
            -            &lt;/fieldset&gt; <br>
            -        &lt;/form&gt; <br>
            +            &lt;/form&gt; <br>
            +            &lt;form id="form-template-interface"&gt; <br>
            +                &lt;div class="template-tab-header"&gt; <br>
            +                    &lt;span
            class="template-interface-cell"&gt;$_("Network")&lt;/span&gt;
            <br>
            +                    &lt;span
            class="template-interface-cell"&gt;$_("Type")&lt;/span&gt; <br>
            +                    &lt;button type="button"
            id="template-edit-interface-add-button"
            class="action-area"&gt;&lt;/button&gt; <br>
            +                &lt;/div&gt; <br>
            +                &lt;div
            class="template-tab-body"&gt;&lt;/div&gt; <br>
            +            &lt;/form&gt; <br>
            +        &lt;/div&gt; <br>
                  &lt;/div&gt; <br>
                  &lt;footer&gt; <br>
                      &lt;div class="btn-group"&gt; <br>
            @@ -152,3 +131,40 @@ <br>
              &lt;script&gt; <br>
                  kimchi.template_edit_main(); <br>
              &lt;/script&gt; <br>
            +&lt;script id="template-storage-pool-tmpl"
            type="text/html"&gt; <br>
            +    &lt;div class='item'&gt; <br>
            +        &lt;span class="template-storage-cell"&gt; <br>
            +            &lt;input class="template-storage-name
            {viewMode}" value={storageName} readonly=true
            type="text"/&gt; <br>
            +            &lt;select
            class="{editMode}"&gt;&lt;/select&gt; <br>
            +        &lt;/span&gt; <br>
            +        &lt;span class="template-storage-cell"&gt; <br>
            +            &lt;input class="template-storage-type"
            value={storageType} readonly=true type="text" /&gt; <br>
            +        &lt;/span&gt; <br>
            +        &lt;span class="template-storage-cell"&gt; <br>
            +            &lt;input class="template-storage-disk"
            value={storageDisk} type="text" /&gt; <br>
            +        &lt;/span&gt; <br>
            +        &lt;span class="action-area {editMode}"&gt; <br>
            +            &lt;button
            class="save"&gt;&lt;/button&gt;&lt;button
            class="cancel"&gt;&lt;/button&gt; <br>
            +        &lt;/span&gt; <br>
            +        &lt;span class="action-area {viewMode}"&gt; <br>
            +            &lt;button
            class="edit"&gt;&lt;/button&gt;&lt;button
            class="delete"&gt;&lt;/button&gt; <br>
            +        &lt;/span&gt; <br>
            +    &lt;/div&gt; <br>
            +&lt;/script&gt; <br>
            +&lt;script id="template-interface-tmpl"
            type="text/html"&gt; <br>
            +    &lt;div class="item"&gt; <br>
            +        &lt;span class="template-interface-cell"&gt; <br>
            +            &lt;input class="template-interface-name
            {viewMode}" readonly="true" type="text"  value={network}
            /&gt; <br>
            +            &lt;select
            class="{editMode}"&gt;&lt;/select&gt; <br>
            +        &lt;/span&gt; <br>
            +        &lt;span class="template-interface-cell"&gt; <br>
            +            &lt;input value={type} readonly=true
            type="text" /&gt; <br>
            +        &lt;/span&gt; <br>
            +        &lt;span class="action-area {editMode}"&gt; <br>
            +            &lt;button
            class="save"&gt;&lt;/button&gt;&lt;button
            class="cancel"&gt;&lt;/button&gt; <br>
            +        &lt;/span&gt; <br>
            +        &lt;span class="action-area {viewMode}"&gt; <br>
            +            &lt;button
            class="edit"&gt;&lt;/button&gt;&lt;button
            class="delete"&gt;&lt;/button&gt; <br>
            +        &lt;/span&gt; <br>
            +    &lt;/div&gt; <br>
            +&lt;/script&gt; <br>
            \ No newline at end of file <br>
          </blockquote>
          <br>
          <br>
        </blockquote>
        <br>
      </blockquote>
      <br>
    </blockquote>
    <br>
  </body>
</html>