<partial template="header"></partial>

<div class="container">
  <p class="lead">Genomes</p>

  <div class="well">
    <div class="input-group">
      <span class="input-group-addon"> Search: </span>
      <input class="form-control" ng-model="query" ng-change="delayFetch()" />
    </div>
  </div>

  <div class="pull-right">
    <button
      class="btn btn-primary btn-xs"
      ng-if="hasPrev"
      ng-click="prevPage()"
    >
      Prev Page
    </button>
    &nbsp;
    <button
      class="btn btn-primary btn-xs"
      ng-if="hasMore"
      ng-click="nextPage()"
    >
      Next Page
    </button>
  </div>

  <table class="table table-striped table-condensed">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Parent</th>
      </tr>
    </thead>
    <tr ng-repeat="genome in genomes">
      <td><a href="#/genomes/{{genome.id}}">{{ genome.id }}</a></td>
      <td>
        <a
          class="fs-block"
          href="#/genomes/{{genome.id}}"
          ng-bind-html="genome.name"
        ></a>
      </td>
      <td>
        <a
          class="fs-block"
          href="#/genomes/{{genome.parent_id}}"
          ng-bind-html="genome.parent_name"
        ></a>
      </td>
    </tr>
  </table>
</div>
<!-- container -->
