<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>ERP5 Sort Editor</title>
    <link rel="http://www.renderjs.org/rel/interface" href="interface_sub_editor_panel.html">

    <!-- renderjs -->
    <script src="rsvp.js"></script>
    <script src="renderjs.js"></script>
    <script src="handlebars.js"></script>

    <!-- custom script -->
    <script src="gadget_erp5_sort_editor.js"></script>

    <script id="sort-item-template" type="text/x-handlebars-template">
      <button type="submit" class="ui-icon ui-icon-minus"></button>
      <div class="sort_item ui-controlgroup-controls" >
        <select>
          {{#each option}}
            <option {{#if selected}}selected="selected"{{/if}} data-i18n="{{text}}" value="{{value}}">{{text}}</option>
          {{/each}}
        </select>

        <select>
          <option {{#equal operator "ascending"}}selected="selected"{{/equal}} data-i18n="ascending" value="ascending">ascending</option>
          <option {{#equal operator "descending"}}selected="selected"{{/equal}} data-i18n="descending" value="descending">descending</option>
        </select>

      </div>
    </script>

    <script id="sort-template" type="text/x-handlebars-template">
      <div>
        <div data-role="header" class="ui-header">
          <div class="ui-btn-right">
            <div class="ui-controlgroup-controls">
              <button data-i18n="Submit" type="submit" class="ui-btn-icon-left ui-icon-check">Submit</button>
            </div>
          </div>

          <h1 data-i18n="Sort Editor">Sort Editor</h1>

          <div class="ui-btn-left">
            <div class="ui-controlgroup-controls">
              <button data-i18n="Close" type="submit" class="close ui-btn-icon-left ui-icon-times">Close</button>
            </div>
          </div>
        </div>

        <section>
          <div class="sort_item_container"></div>
          <button type="submit" class="plus ui-icon-plus ui-btn-icon-left">Add Criteria</button>
          <button type="button" class="trash ui-icon-trash-o ui-btn-icon-left">Reset</button>
        </section>
      </div>
    </script>

  </head>
  <body>
    <form>
      <div class="container"></div>
    </form>
  </body>
</html>