<!-- TODO(akalin): Move to a three-pane view; node tree on the left
(minus leaf nodes), tree contents list on the upper right, selected
item detail on the lower right. -->

<div id="sync-node-main">
  <!-- TODO(akalin): Figure out how to get this element to be as tall
       as its container (style.height=100% doesn't work).  Also fix
       behavior when tree is too tall (currently it makes you scroll the
       entire page). -->
  <div id="sync-node-browser-refresher">
    <button id="node-browser-refresh-button">Refresh</button>
    <div id="node-refresh-status">
      Last refresh time: <span id="node-browser-refresh-time">Never</span>
    </div>
  </div>
  <div id="sync-node-browser-container">
    <div id="sync-node-tree-container">
    </div>
    <div id="sync-node-splitter"></div>
    <div id="node-details">
      <table>
        <tr>
          <td>Title</td>
          <td jscontent="NON_UNIQUE_NAME"></td>
        </tr>
        <tr>
          <td>ID</td>
          <td jscontent="ID"></td>
        </tr>
        <tr>
          <td>Modification Time</td>
          <td jscontent="MTIME"></td>
        </tr>
        <tr>
          <td>Parent</td>
          <td jscontent="PARENT_ID"></td>
        </tr>
        <tr>
          <td>Is Folder</td>
          <td jscontent="IS_DIR"></td>
        </tr>
        <tr>
          <td>Type</td>
          <td jscontent="modelType"></td>
        </tr>
        <tr>
          <td>External ID</td>
          <td jscontent="LOCAL_EXTERNAL_ID"></td>
        </tr>
        <tr jsdisplay="$this.hasOwnProperty('positionIndex')">
          <td>Position Index</td>
          <td jscontent="positionIndex"></td>
        </tr>
      </table>
      <pre jscontent="JSON.stringify($this, null, 2)"></pre></td>
    </div>
  </div>
</div>