<!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="overview-widget-listview" type="text/x-handlebars-template">
      <div class="ui-listview-container">
        <table class="ui-responsive ui-body-c ui-table-inset instance-overview">
          <thead class="ui-bar-inherit">
            <tr>
              {{#each column_list}}
                <th>{{title}}</th>
              {{/each}}
            </tr>
          </thead>
          <tbody>
          {{#each row_list}}
            <tr rel="{{index}}">
              <td class="ui-text-center"><a class="ui-link" href="{{href}}">
                <span class="ui-status-icon ui-status-{{status}}"></span></a></td>
              <td><a class="ui-link" href="{{href}}">{{value}}</a></td>
              <td><a class="ui-link" href="{{href}}">{{hosting_value}}</a></td>
            </tr>
          {{/each}}
          </tbody>
          <tfoot class="ui-bar-inherit"></tfoot>
        </table>
      </div>
    </script>

    <script id="header-widget-overview" type="text/x-handlebars-template">
      <div class="header-form-overview">
        <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 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-cog"></i></a>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </script>

    <script id="details-widget-overview" type="text/x-handlebars-template">
      <div class="overview-header">
        <div class='content-title ui-instance-title'>
          <div class="overview-title">
            <i class="fa fa-cubes"></i><span>
              {{title}}
              {{#if root_title}}
              &nbsp; [{{root_title}}]
              {{/if}}
              </span>
          </div>
          <div class="commands">
            
          </div>
        </div>
      </div>
      <div class="content-details">
        <div class="ui-text-left" style="padding-bottom: 15px;">
          <h2><i class="fa fa-info-circle"></i> <strong>Instance Current State</strong></h2>
          <div class="padding-10">
            <div class="ui-grid-a ui-responsive">
              <div class="ui-block-a">
                <fieldset data-role="controlgroup" data-type="horizontal">
                  {{#if resource_url }}
                  <a href="{{resource_url}}" class="ui-btn ui-corner-all ui-btn-inline ui-mini"><i class="fa fa-pie-chart"></i> Resources</a>
                  {{/if}}
                  {{#if process_url }}
                  <a href="{{process_url}}" class="ui-btn ui-corner-all ui-btn-inline ui-mini"><i class="fa fa-list-alt"></i> Processes</a>
                  {{/if}}
                </fieldset>
              </div>
              <div class="ui-block-b">
                <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> Public</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> Private</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> RSS</a>
                  {{/if}}
                </fieldset>
              </div>
            </div>
            <table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke">
              <tr>
                <th><i class="fa fa-tachometer"></i> <strong>Status</strong></th>
                <td><span class="label label-{{status}}">{{status}}</span></td>
                <td>{{date}}</td>
              </tr>
              
              {{#with instance}}
              <tr>
                <th><i class="fa fa-desktop"></i> <strong>Computer</strong></th>
                <td>{{computer}}</td>
                <td>{{partition}}</td>
              </tr>
              <tr>
                <th><i class="fa fa-globe"></i> <strong>IP Address</strong></th>
                <td>{{ipv4}}</td>
                <td>{{ipv6}}</td>
              </tr>
              {{/with}}
            </table>
          </div>
        </div>
      </div>
    </script>

    <script id="promiselist-widget-template" type="text/x-handlebars-template">
      {{#if promise_list}}
      <h2><i class="fa fa-th-list"></i> <strong>Instance Promise List</strong></h2>
      <div style="overflow: auto;" class="padding-lr-10">
        <table data-role="table" data-mode="columntoggle" class="table-stroke">
          {{#each promise_list}}
          <tr>
            <td><a href="{{href}}">{{title}}</a></td>
            <td style="text-align: center;">{{time}}</td>
            <td style="text-align: center;"><span class="label label-{{status}}">{{status}}</span></td>
          </tr>
          {{/each}}
        </table>
      </div>
      {{/if}}
    </script>

    <!-- custom script -->
    <script src="gadget_monitoring_widget_overview.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 data-gadget-url="gadget_monitoring_login_widget.html" data-gadget-scope="login_gadget" data-gadget-sandbox="public"></div>
    <div class="overview-filter-panel">
      <form class='filter'>
      	<h2>Configure Displayed 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="ui-grid-a ui-responsive custom-listbox">
      <div class="ui-block-a">
        <div class="ui-panel-overview" style="min-height: 450px;">
          <div class="overview-header">
            <div class='content-title ui-instance-title'>
              <div class="overview-title">
                <i class="fa fa-desktop"></i><span>Instances Status Overview</span>
              </div>
              <div class="commands">
              </div>
            </div>
          </div>
          <div class="overview-content">
          </div>
        </div>
      </div>
      <div class="ui-block-b" style="position: relative">
        <div class="signal ui-content-hidden"></div>
        <div class="ui-panel-overview">
          <div class="overview-details">
          </div>
          <div style="margin: 0 20px;">
            <div data-gadget-url="gadget_erp5_graph.html" data-gadget-scope="graph_gadget" class="graph graph-medium "></div>
          </div>
          <div class="promise-list">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
