<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Monitoring Widget Listbox</title>

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

    <script id="listbox-widget-table" type="text/x-handlebars-template">
      {{#if enable_search}}
      <div class="listbox-header">
        <form class='search'>
            <div class="ui-grid-a ui-responsive">
              <div class="ui-block-a">
                <div class="ui-field-contain">
                  <div class="ui-input-text ui-body-{{widget_theme}} ui-corner-all ui-shadow-inset ui-input-has-clear {{widget_status_class}}" style="border-color: #D6D8E0;">
                    <input type="text" data-enhanced="true" value="{{search}}" name="search" {{widget_status_attribute}} />
                    <div class="ui-btn ui-input-clear ui-input-btn ui-corner-all ui-icon-search ui-btn-icon-notext" data-i18n="[node]header-submit">
                      Submit<input data-enhanced="true" type="submit" data-i18n="[value]header-submit" value="Submit" {{widget_status_attribute}} />
                    </div>
                  </div>
                </div>
              </div>
              <div class="ui-block-b">
                <div class="ui-field-contain">
                  <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" class="ui-shadow ui-btn ui-corner-all listbox-refresh"><i class="fa fa-refresh"></i></a>
                    <a href="#" class="ui-shadow ui-btn ui-corner-all listbox-filter"><i class="fa fa-filter"></i></i></a>
                  </div>
                </div>
              </div>
            </div>
        </form>
      </div>
      {{/if}}
      <table class="ui-responsive ui-body-c ui-table-inset custom-force-list">
        <thead class="ui-bar-inherit">
          <tr>
            {{#each column_list}}
              <th>{{this}}</th>
            {{/each}}
          </tr>
        </thead>
        {{> listbox-widget-table-partial}}
        <tfoot class="ui-bar-inherit"></tfoot>
      </table>
    </script>

    <script id="listbox-widget-table-partial" type="text/x-handlebars-template">
      <tbody>
      {{#each row_list}}
        <tr>
        {{#each cell_list}}
          {{#if href}}
            {{#if html_value}}
              <td class='{{class}}'><a class="ui-link" href="{{href}}">{{{html_value}}}</a></td>
            {{else}}
              <td class='{{class}}'><a class="ui-link" title='{{value}}' href="{{href}}">{{value}}</a></td>
            {{/if}}
          {{else}}
            {{#if html_value}}
              <td class='{{class}}'><a class="ui-link">{{{html_value}}}</a></td>
            {{else}}
              <td class='{{class}}'><a class="ui-link" title='{{value}}'>{{value}}</a></td>
            {{/if}}
          {{/if}}
        {{/each}}
        </tr>
      {{/each}}
      </tbody>
    </script>

    <!-- custom script -->
    <script src="gadget_monitoring_widget_listbox.js" type="text/javascript"></script>

    </head>
  <body>
    <div data-gadget-url="gadget_monitoring_jio.html" data-gadget-scope="jio_gadget" data-gadget-sandbox="public"></div>
    <div class="listbox-filter-panel">
      <form class='filter'>
      	<h2>Filter Result</h2>
      	<fieldset data-role="controlgroup">
          <h3>Status contain:</h3>
          <input type="checkbox" id="monitor-promise-success" name="monitor-filter-status" value="success" checked="checked">
          <label for="monitor-promise-success">Success</label>
          <input type="checkbox" id="monitor-promise-error" name="monitor-filter-status" value="error" checked="checked">
          <label for="monitor-promise-error">Error</label>
          <input type="checkbox" id="monitor-promise-warning" name="monitor-filter-status" value="warning" checked="checked">
          <label for="monitor-promise-warning">Warning</label>
        </fieldset>
        <div class="ui-grid-a">
          <input data-enhanced="true" type="submit" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini pvalidate" value="Validate" />
	      </div>
      </form>
    </div>
    <div class="custom-grid-wrap">
      <div class="custom-grid ui-corner-all ui-body-inherit ui-shadow ui-corner-all" style="padding: 10px;">
        <div class="ui-body-c ui-corner-all"></div>
      </div>
    </div>
  </body>
</html>
