<!doctype html>
<html manifest="gadget_eexpense.appcache">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>ERP5</title>

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="jquerymobile.css">
    <link rel="stylesheet" href="gadget_erp5.css">

    <script src="jquery.js"></script>
    <script src="jquerymobile.js"></script>
    <script src="rsvp.js"></script>
    <script src="renderjs.js"></script>
    <script src="handlebars.js"></script>
    <script src="gadget_global.js" ></script>
    <script src="gadget_eexpense.js"></script>

    <script class="document-list-template" type="text/x-handlebars-template">
      <div class="ui-grid-b ui-responsive">
        <div class="ui-block-a"></div>
        <div class="ui-block-b">
          <ul data-role="listview" data-inset="true">
            {{#each document_list}}
              <li><a href="{{url}}">
                {{title}} || {{reference}} || {{description}}
                </a>
              </li>
            {{else}}
              <li><p>Empty</p></li>
            {{/each}}
          </ul>
          <a href="{{sync_url}}" class="ui-btn ui-btn-inline ui-mini ui-corner-all" data-theme="b">Sync</a>
        </div>
        JSON Dict:
        <div class="ui-block-b">{{json_dict}}</div>
        <div class="ui-block-c"></div>
      </div>
    </script>

    <script class="new-expense-report-template" type="text/x-handlebars-template">
      <div class="ui-grid-b ui-responsive">
        <div class="ui-block-a"></div>
        <div class="ui-block-b">
          <form class="new-expense-report-form">
            <div class="ui-field-contain">
              <label>Title</label>
              <input type="text" name="title" value="Title" required>
            </div>
            <div class="ui-field-contain">
              <label>Reference</label>
              <input type="text" name="reference" value="{{reference}}" required>
            </div>            
            <div class="ui-field-contain">
              <label>Description or reference</label>
              <textarea name="description" value="" required></textarea>
            </div>
            <input data-inline="true" type="submit" value="Add" data-theme="b">
          </form>
        </div>
        <div class="ui-block-c"></div>
      </div>
    </script>

    <script class="view-expense-report-template" type="text/x-handlebars-template">
      <div class="ui-grid-b ui-responsive">
        <div class="ui-block-a"></div>
        <div class="ui-block-b">
          <form class="view-expense-report-form">
            <div class="ui-field-contain">
              <label>Title</label>
              <input type="text" name="title" value="{{title}}" required>
            </div>
            <div class="ui-field-contain">
              <label>Reference</label>
              <input type="text" name="reference" value="{{reference}}" required>
            </div>
            <div class="ui-field-contain">
              <label>Description or reference</label>
              <textarea name="description" required>{{description}}</textarea>
            </div>
          </form>
        </div>
        <div class="ui-block-c"></div>
      </div>
    </script>

    <script class="edit-template" type="text/x-handlebars-template">
      <h1 class="ui-title">{{title}}</h1>
      <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
        <div class="ui-controlgroup-controls">
          <form class="edit-form">
            <button type="submit" class="responsive ui-btn ui-first-child ui-last-child ">{{right_url}}</button>
          </form>
        </div>
      </div>
    </script>

    <script class="synchro-template" type="text/x-handlebars-template">
      <div class="ui-grid-b ui-responsive">
        <div class="ui-block-a"></div>
        <div class="ui-block-b">
          <form class="synchro-form">
            <input data-inline="true" type="submit" value="Launch" data-theme="b">
          </form>
        </div>
        <div class="ui-block-c"></div>
      </div>
    </script>

    <script class="login-template" type="text/x-handlebars-template">
      <div class="ui-grid-b ui-responsive">
        <div class="ui-block-a"></div>
        <div class="ui-block-b">
          <form class="login-form">
            <div class="ui-field-contain">
              <label>Login</label>
              <input type="text" name="jid" placeholder="Ex: john" value="" required>
            </div>
            <div class="ui-field-contain">
              <label>Password</label>
              <input type="password" name="passwd" placeholder="Ex: A1bcF$99" value="" required>
            </div>
            <input data-inline="true" type="submit" value="Log In" data-theme="b">
          </form>
        </div>
        <div class="ui-block-c"></div>
      </div>
    </script>

    <script class="logout-template" type="text/x-handlebars-template">
      <div class="ui-grid-b ui-responsive">
        <div class="ui-block-a"></div>
        <div class="ui-block-b">
          <form class="logout-form">
            <input data-inline="true" type="submit" value="Confirm" data-theme="b">
          </form>
        </div>
        <div class="ui-block-c"></div>
      </div>
    </script>

    <script class="header-template" type="text/x-handlebars-template">
      <h1 class="ui-title">{{title}}</h1>
      {{#if right_url}}
        <a href="{{right_url}}" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all">{{right_title}}</a>
      {{/if}}
    </script>
    
    <script class="sync-loader-template" type="text/x-handlebars-template">
      <h1 class="ui-title">{{title}}</h1>
      <a role="button" data-i18n="Loading" href="" class="responsive ui-btn ui-btn-right ui-icon-spinner ui-btn-icon-left ui-first-child ui-last-child ui-disabled ui-icon-spin">Syncing</a>
    </script>

  </head>

  <body>
    <div class="ui-hidden-accessible connection-gadget-container"></div>

    <div data-role="page">

      <div  data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="d">
      <div class="ui-content">
        <ul data-role="listview" class="ui-listview" data-enhanced="true">
          <li><a href="#page=list">Data Streams</a></li>
          <li><a href="" class="ui-disabled">Inventory</a></li>
          <li><a href="" class="ui-disabled">Production</a></li>
          <li><a href="" class="ui-disabled">Sales</a></li>
          <li class="ui-last-child"><a href="#page=logout">Logout</a></li>
        </ul>
      </div>
      </div>

      <div data-role="header" class="gadget-header" data-theme="a">
        <a href="#mypanel" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all">Menu</a>
        <div></div>
      </div>
      <div data-gadget-url="gadget_jio.html"
          data-gadget-scope="jio_gadget"
          data-gadget-sandbox="public"></div>

      <div role="main" class="ui-content gadget-content"></div>
    </div>

  </body>
</html>
