<div class="container-fluid" ng-controller="TableShowController">
  <ol class="breadcrumb">
    <li><a href="#/">Top</a></li>
    <li><a href="#/tables/">Tables</a></li>
    <li class="active"><a href="#/tables/{{table.name}}">{{table.name}}</a></li>
  </ol>

  <div class="sidebar">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h2 class="panel-title">Actions</h2>
      </div>
      <div class="panel-body">
        <ul class="list-group">
          <li class="list-group-item">
            <a href="#/tables/{{table.name}}/search">
              <span class="glyphicon glyphicon-search"></span>
              Search
            </a>
          </li>
          <li class="list-group-item">
            <a href="#/tables/{{table.name}}/columns/_new/">
              <span class="glyphicon glyphicon-plus"></span>
              Add a column
            </a>
          </li>
          <li class="list-group-item">
            <button type="button" ng-click="remove()">
              <span class="glyphicon glyphicon-remove"></span>
              Remove
            </button>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="main-content">
    <div class="alert alert-warning" ng-show="message.length &gt; 0">
      <p>{{message}}</p>
    </div>

    <h2>Table: {{table.name}}</h2>
    <div class="table-properties">
      <table>
        <tr>
          <th>ID</th>
          <td>{{table.id}}</td>
        </tr>
        <tr>
          <th>Type</th>
          <td>{{table.type}}</td>
        </tr>
        <tr>
          <th>Key type</th>
          <td>{{table.domain}}</td>
        </tr>
        <tr>
          <th>Value type</th>
          <td>{{table.range}}</td>
        </tr>
        <tr>
          <th>Normalizer</th>
          <td>{{table.normalizer}}</td>
        </tr>
        <tr>
          <th>Tokenizer</th>
          <td>{{table.tokenizer}}</td>
        </tr>
        <tr>
          <th>Token filters</th>
          <td>{{table.tokenFilters}}</td>
        </tr>
        <tr>
          <th>path</th>
          <td>{{table.path}}</td>
        </tr>
      </table>
    </div>

    <h2>Columns</h2>
    <div class="table-columns">
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>type</th>
            <th>value type</th>
            <th>sources</th>
            <th>path</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="column in table.columns track by $index">
            <td>{{column.id}}</td>
            <td>
              <a href="#/tables/{{table.name}}/columns/{{column.name}}">
                {{column.name}}
              </a>
            </td>
            <td>{{column.type}}</td>
            <td>{{column.range}}</td>
            <td>{{column.sources}}</td>
            <td>{{column.path}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
