<header>
  <div class="container">
    <ol class="breadcrumb">
        <li> Edge </li>
        <li> <a href="#/genomes">Genomes</a> </li>
        <li ng-bind-html='genome.name'></li>
    </ol>
  </div>
</header>

<div class="container">

<h3>
  <div class="dropdown pull-right">
    <a class="btn btn-default" href="javascript:void(0);" data-toggle="dropdown">Operations <span class='caret'></span></a>
    <ul class="dropdown-menu">
      <li> <a href="#/genomes/{{ genome.id }}/blast">Blast</a> </li>
      <li> <a href="#/genomes/{{ genome.id }}/pcr">PCR</a> </li>
      <li> <a href="#/genomes/{{ genome.id }}/recombination">Recombination</a> </li>
      <li class="divider"></li>
      <li> <a href="/admin/edge/genome/{{ genome.id }}/">Edit Name, Status</a> </li>
      <li> <a href="/edge/genomes/{{ genome.id }}/export">Export to GFF</a> </li>
    </ul>
  </div>

  Genome {{ genome.id }}: <span ng-bind-html='genome.name'></span>
</h3>

<div class="lead space-top">
  <p>Parent: <span ng-bind-html="parent"></span></p>
  <p ng-if="genome.notes">Notes: {{ genome.notes }} </p>
</div>

<div ng-if="genome.operations">
  <p class="lead">History:</p>
  <div ng-repeat='op in genome.operations'>
    <p>
      {{ op.type }} on
      <a href="#/genomes/{{genome.parent_id}}">Genome {{ genome.parent_id }}: {{ genome.parent_name }}</a>
    </p>
    <ul>
      <li ng-repeat="a in op.annotations">
        <a href="#/genomes/{{genome.id}}/fragments/{{a.fragment_id}}"
         >{{ a.fragment_name }}: {{ a.name }} [{{ a.base_first }}, {{ a.base_last }}]</a>
      </li>
      <li ng-repeat='(k,v) in op.params' class="op-params">
        {{ k }}: {{ v }}
      </li>
    </ul>
  </div>
</div>

<table class="table table-striped table-condensed space-top">
<thead><tr>
    <th>Fragment</th><th>Length (bps)</th><th>Changes</th>
</tr></thead>
<tr ng-repeat="fragment in genome.fragments | orderBy:id">
    <td> <a href="#/genomes/{{genome.id}}/fragments/{{fragment.id}}"
          ng-bind-html='fragment.name'></a> </td>
    <td>
      <span ng-if='fragment.length'>{{fragment.length | number}}</span>
      <span ng-if='!fragment.length'><em>Not indexed</em></span>
    </td>
    <td>
      <span ng-repeat="op in genome.operations">
        <span ng-repeat="annotation in op.annotations">
          <span ng-if="annotation.fragment_id === fragment.id">
            {{ annotation.base_first }}-{{ annotation.base_last }}
          </span>
        </span>
      </span>
    </td>
</tr>
</table>

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