module.exports = {
    render: function() {
      return `
      <div class="plugins-settings-panel" ui-view="main">

        <div class="section">
          <div class='block icon icon-versions'>
            <h1 style="display: inline">Variants</h1>
          </div>
          <div class='block'>
            <button class='btn icon icon-plus inline-block-tight'>Create Variant</button>
            <button class='btn btn-primary icon icon-check inline-block-tight'>Save</button>
            <button class='btn btn-error icon icon-x inline-block-tight'>Delete</button>
          </div>
          <h2>Select variants:</h2>
          <div class='block' id="variants-selector-container">

          </div>

        </div>

        <div class="section main-section" id="main-section">

        </div>

      </div>


      <script id="no-entry-template" type="text/x-handlebars-template">
        <div class='block'>
          <h1 style="display: inline">No Variants defined</h1>
        </div>
      </script>


      <script id="variants-template" type="text/x-handlebars-template">
       {{#each variants}}
        <atom-panel>
          <div class="inset-panel">
              <div class="panel-heading"><h1>Variant name: {{name}}</h1></div>
              <!-- begin panel-body -->
              <div class="panel-body padded">
                <div class="block">
                  <h3>Global settings</h3>
                  <button class='btn icon icon-plus inline-block-tight'></button>
                </div>
                <!-- Global -->
                {{#each preference}}
                  <div class="block">
                    <label for={{name}}>{{name}}</label>
                    <input class='input-text' type='text' name="{{name}}" id="{{name}}" placeholder='' value="{{value}}">
                  </div>
                {{/each}}
                <!-- end Global -->

                <div class="line-div"></div>

                {{#each platform}}
                  <div class="block">
                    <h3>{{name}} only</h3>
                    <button class='btn icon icon-plus inline-block-tight'></button>
                  </div>
                  {{#each preference}}
                    <div class="block">
                      <label for={{name}}>{{name}}</label>
                      <input class='input-text' type='text' name="{{name}}" id="{{name}}" placeholder='' value="{{value}}">
                    </div>
                  {{/each}}
                  <div class="line-div"></div>
                {{/each}}

              </div>
              <!-- end panel-body -->
          </div>
        </atom-panel>
        {{/each}}
      </script>

      <script id="single-variant-template" type="text/x-handlebars-template">
        <atom-panel>
          <div class="inset-panel">
              <div class="panel-heading"><h1>Variant name: {{name}}</h1></div>
              <!-- begin panel-body -->
              <div class="panel-body padded">
                <div class="block">
                  <h3>Global settings</h3>
                  <button class='btn icon icon-plus inline-block-tight'></button>
                </div>
                <!-- Global -->
                {{#each preference}}
                  <div class="block">
                    <label for={{name}}>{{name}}</label>
                    <input class='input-text' type='text' variant-ref="{{../name}}" name="{{name}}" id="{{name}}" placeholder='' value="{{value}}">
                  </div>
                {{/each}}
                <!-- end Global -->

                <div class="line-div"></div>

                {{#each platform}}
                  <div class="block">
                    <h3>{{name}} only</h3>
                    <button class='btn icon icon-plus inline-block-tight'></button>
                  </div>
                  {{#each preference}}
                    <div class="block">
                      <label for={{name}}>{{name}}</label>
                      <input class='input-text' type='text' name="{{name}}" id="{{name}}" placeholder='' value="{{value}}">
                    </div>
                  {{/each}}
                  <div class="line-div"></div>
                {{/each}}

              </div>
              <!-- end panel-body -->
          </div>
        </atom-panel>
      </script>

      <script id="variants-selector-template" type="text/x-handlebars-template">
          <div class='btn-group'>
              {{#each variants}}
                <!--<button class='btn selected'>One</button>-->
                <button class='btn' variant-selector="{{name}}">{{name}}</button>
              {{/each}}
          </div>
      </script>
      `
    }
}

@@ -3118,32 +3118,73 @@
 ine-block-tight'
+ variant-add-param vairant-ref=%22%7B%7Bname%7D%7D%22
 %3E%3C/button%3E%0A     
@@ -3170,32 +3170,32 @@
 me%7D%7D%22%3E%3C/button%3E%0A
-
                 
@@ -3448,16 +3448,44 @@
 /name%7D%7D%22
+ variant-param-id=%22%7B%7Bname%7D%7D%22
  name=%22%7B
@@ -3491,32 +3491,44 @@
 %7B%7Bname%7D%7D%22 id=%22%7B%7B
+../name%7D%7D-%7B%7B
 name%7D%7D%22 placehol
@@ -3868,32 +3868,117 @@
 ine-block-tight'
+ variant-add-param-platform variant-ref=%22%7B%7B../name%7D%7D%22 variant-platform-ref=%22%7B%7Bname%7D%7D%22
 %3E%3C/button%3E%0A     
@@ -4203,36 +4203,100 @@
 name=%22%7B%7Bname%7D%7D%22 
-id=%22
+variant-param-platform-id=%22%7B%7Bname%7D%7D%22 id=%22%7B%7B../../name%7D%7D-%7B%7B../name%7D%7D-
 %7B%7Bname%7D%7D%22 placeh

Update html for manage events