<!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="header-widget-listbox" type="text/x-handlebars-template">
      <form class='search'>
        <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}}">
            <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 class="ui-field-contain">
          <div data-role="controlgroup" data-type="horizontal">
            <a href="#" class="ui-shadow ui-btn ui-corner-all listview-refresh"><i class="fa fa-refresh"></i></a>
            <a href="#" class="ui-shadow ui-btn ui-corner-all listview-filter"><i class="fa fa-filter"></i></i></a>
            <input type="radio" name="listview-sort-radio" id="listview-sort-title" value="title">
            <label for="listview-sort-title" data-i18n="Name">Name <i class="fa fa-sort-alpha-asc"></i></label>
            <input type="radio" name="listview-sort-radio" id="listview-sort-status" value="status">
            <label for="listview-sort-status" data-i18n="Status">Status <i class="fa fa-sort-amount-asc"></i></label>
          </div>
        </div>
      </form>
    </script>

    <script id="promise-widget-listbox" type="text/x-handlebars-template">
      <div class="ui-listview-container">
        {{#with header}}
          {{#if title}}
          <h3 class=""><strong>{{title}}</strong></h3>
          {{/if}}
          <div class="ui-field-contain">
            <fieldset data-role="controlgroup" data-type="horizontal">
              {{#if public_url}}
              <a class="ui-btn ui-corner-all ui-btn-inline ui-mini" target='_blank' href="{{public_url}}" title="Public"><i class="fa fa-folder-open-o"></i></a>
              {{/if}}
              {{#if private_url}}
              <a class="ui-btn ui-corner-all ui-btn-inline ui-mini" target='_blank' href="{{private_url}}" title="Private"><i class="fa fa-lock"></i></a>
              {{/if}}
              {{#if rss_url}}
              <a class="ui-btn ui-corner-all ui-btn-inline ui-mini" target='_blank' href="{{rss_url}}" title="RSS"><i class="fa fa-rss-square"></i></a>
              {{/if}}
            </fieldset>
          </div>
        {{/with}}
        <ul data-role="listview" class="ui-listview-outer" data-inset="true">
          {{#each row_list}}
            <li>
              <a href="#" class="ui-btn ui-btn-icon-right ui-icon-plus">
              <span class="ui-status-icon ui-status-{{status}}"></span>
              <span class="ui-status-text">{{value}}</span>
              </a>
              <div class="ui-collapse-content ui-content-hidden">
                <fieldset>
                  {{#each data_list}}
                    {{#if text_value}}
                      {{#if inline}}
                        <span><i class="{{icon_class}}"></i> {{text_value}}</span>
                      {{else}}
                        <div class="{{class}}">
                          <span><i class="{{icon_class}}"></i> {{text_value}}
                          </span>
                        </div>
                      {{/if}}
                    {{/if}}
                  {{/each}}
                  <div class="ui-field-contain">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                      <a class="ui-btn ui-corner-all ui-btn-inline ui-mini" href="{{href}}"><i class="fa fa-external-link"></i></a>
                      <a class="ui-btn ui-corner-all ui-btn-inline ui-mini" href="{{href}}"><i class="fa fa-folder-open-o"></i></a>
                    </fieldset>
                  </div>
                </fieldset>
              </div>
            </li>
          {{/each}}
        </ul>
      </div>
    </script>

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

    </head>
  <body>
    <input type="hidden" name="listbox-block-indexes", value="" />
    <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 to show:</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="center"></div>
    <div class="ui-grid-a ui-responsive custom-listbox">
      <div class="ui-block-a"></div>
      <div class="ui-block-b"></div>
    </div>
  </body>
</html>
