<div data-role='page' data-wq-sync-refresh="true">
<div data-role='header'>
  {{>home}}
  {{#parent_id}}
  <h1>{{parent_label}} Items</h1>
  {{/parent_id}}
  {{^parent_id}}
  <h1>Item List</h1>
  {{/parent_id}}
</div>
<div role="main" class="ui-content">
<div class='ui-grid-a ui-responsive'>
  <div class='ui-block-a'>
    <ul data-role='listview' data-inset='true'>
      {{#list}}
      <li>
        <a href='{{rt}}/items/{{id}}'>{{label}}</a>
        <a data-icon="edit" href='{{rt}}/items/{{id}}/edit'>
          Edit
        </a>
      </li>
      {{/list}}
      {{#unsynced}}
      <li data-role="list-divider">Outbox</li>
      {{#unsyncedItems}}
      <li{{#error}} data-icon="alert"{{/error}}>
        <a href='{{rt}}/outbox/{{id}}'>{{label}}</a>
      </li>
      {{/unsyncedItems}}
      <li>
        <button data-icon="refresh" onclick="require('wq/app').sync(true);">
          Retry
        </button>
      </li>
      {{/unsynced}}
      <li data-icon="plus" data-theme="b">
        <a href="{{rt}}/items/new">Add Item</a>
      </li>
    </ul>
    <a href='{{rt}}/items/four'>FOUR (not stored locally)</a>
  </div>
  <div class='ui-block-b'>
    <div id='item-map' style='height:500px'></div>
  </div>
</div>
{{>context_test}}
{{>footer}}
