<header>
  <div class="container">
    <ol class="breadcrumb">
        <li> Edge </li>
        <li> <a href="#/genomes">Genomes</a> </li>
        <li> <a href="#/fragments">Fragments</a> </li>
    </ol>
  </div>
</header>

<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 href="#/genomes/{{genome.id}}" ng-bind-html="genome.name"></a> </td>
    <td> <a href="#/genomes/{{genome.parent_id}}" ng-bind-html='genome.parent_name'></a> </td>
</tr>
</table>

</div> <!-- container -->
