<div id="status">
  <div id="dump">
    <button id="dump-status">Dump status</button>
    <input type="checkbox" id="include-ids">
      Include Identifiers
    </input>
  </div>
  <div id="import">
    <button id="import-status">Import status</button>
  </div>
  <div id="status-data">
    <textarea rows="10" cols="30" id="status-text"></textarea>
  </div>
</div>

<div id='aboutInfo'>
  <div class="section" jsselect="details">
    <h2 jscontent="title"></h2>
    <table class="aboutDetails">
      <tr jsselect="data"
            jsvalues="class:$this.is_valid ? '' : 'uninitialized'"
            jseval='highlightIfChanged(this, this.children[1].innerText, stat_value)'>
        <td class="detail" jscontent="stat_name" width=50%></td>
        <td class="value" jscontent="stat_value" width=50%></td>
      </tr>
    </table>
  </div>

  <div class="section" style="overflow-x: auto">
    <h2>Type Info</h2>
    <table id="typeInfo">
      <tr jsselect="type_status" jsvalues="class:$this.status">
        <td jscontent="name" width=50%></td>
        <td jscontent="value" width=30%></td>
        <td jscontent="num_entries" width=10%></td>
        <td jscontent="num_live" width=10%></td>
      </tr>
    </table>
  </div>

  <div class="section" jsdisplay="unrecoverable_error_detected">
    <p>
      <span class="err" jscontent="unrecoverable_error_message"></span>
    </p>
  </div>

  <div class="section" jsdisplay="actionable_error_detected">
    <p>
      <h2>Actionable Error</h2>
      <table id="actionableError">
        <tr jsselect="actionable_error">
          <td jscontent="stat_name"></td>
          <td jscontent="stat_value"></td>
        </tr>
      </table>
    </p>
  </div>
</div>