<!-- Copyright 2020 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<head>
  <link href="./index.css" rel="stylesheet">
</head>
<style>
  #stats {
    display: flex;
    height: 250px;
    background-color: var(--surface-color);
    padding: 10px 10px 10px 10px;
    margin: auto;
  }

  table {
    flex: 1;
    max-height: 250px;
    display: inline-block;
    overflow-y: scroll;
    border-collapse: collapse;
  }
  table td {
    padding: 2px;
  }

  table thead td {
    border-bottom: 1px var(--on-surface-color) dotted;
  }

  table tbody td {
    cursor: pointer;
  }

  #nameTable tr {
    max-width: 200px;

  }

  #nameTable tr td:nth-child(1) {
    text-align: right;
  }

  #typeTable {
    text-align: right;
    max-width: 380px;
  }

  #typeTable tr td:nth-child(2) {
    text-align: left;
  }
</style>
<div class="panel">
  <h2>Map Stats</h2>
  <section id="stats">
    <table id="typeTable" class="statsTable">
      <thead>
        <tr><td></td><td>Type</td><td>Count</td><td>Percent</td></tr>
      </thead>
      <tbody></tbody>
    </table>
    <table id="nameTable">
      <thead>
        <tr><td>Count</td><td>Propery Name</td></tr>
      </thead>
      <tbody></tbody>
      <tfoot>
        <tr><td colspan="2" class="clickable">Show more...</td></tr>
      </tfoo>
    </table>
  </section>
</div>