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

<div class="container container-wide">

<h3>
  Fragment {{ fragment.id }}:
  <span ng-bind-html='fragment.name'></span>, {{ fragment.length | number }} bps
</h3>

<div class="lead space-top">
    <p>Genome: <a href="#/genomes/{{ genome.id }}" ng-bind-html='genome.name'></a> </p>
    <p>
      Changes:
      <span ng-repeat="op in genome.operations">
        <span ng-repeat="annotation in op.annotations">
          <span ng-if="annotation.fragment_id === fragment.id">
            <a href="javascript:void(0);"
               ng-click="zoomAt(annotation)"
             >{{ annotation.name }} ({{ annotation.base_first }}-{{ annotation.base_last }})</a>
          </span>
        </span>
      </span>
    </p>
</div>

<partial template="genome-fragment-layout"></partial>

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