<div ng-show="display_summary">
    <span ng-repeat="annotation in summary_annotations | orderBy:base_first"
          class="pull-left {{ annotation.display_css }} fs-block"
          ng-click="zoomAt(annotation)" title="bp {{ annotation.base_first | number }}">
        {{ annotation.display_name }}
    </span>
    <div class="clearfix"></div>
    <div ng-if="fragment.length < 10000">
      <button class="btn btn-primary" ng-click="fetchAllSequence()">Show Sequence</button>
      <textarea class="sequence fs-block" readonly ng-if="sequence">{{ sequence.sequence }}</textarea>
    </div>
</div>

<div ng-show="display_summary == false">

    <form class="form-inline bp-control">
        <button class="btn btn-default" ng-click="zoomOut()">
          <span class="glyphicon glyphicon-zoom-out"></span>
        </button>

        <button class="btn btn-default" ng-click="zoomMoveLeft()">
          <span class="glyphicon glyphicon-arrow-left"></span>
        </button>

        Bps:
        <div class="form-group">
            <input class="form-control" type="text" ng-model="zoom.base_first" size="6" ng-change="updateBaseInput()" />
        </div>
        <div class="form-group">
            <input class="form-control" type="text" ng-model="zoom.base_last" size="6" ng-change="updateBaseInput()" />
        </div>
        <button class="btn btn-default" ng-click="userGoto()">Go</button>

        <button class="btn btn-default" ng-click="zoomMoveRight()">
          <span class="glyphicon glyphicon-arrow-right"></span>
        </button>

        <button class="btn btn-default" ng-click="zoomIn()">
          <span class="glyphicon glyphicon-zoom-in"></span>
        </button>

        <button class="btn btn-default" ng-click="showSummary()">
          <span class="glyphicon glyphicon-fullscreen"></span>
        </button>
    </form>

    <div class="zoom-container">
        <span ng-repeat="display in zoom.display"
              class="{{ display.css }} fs-block"
              style="left:{{ display.left }}; top:{{ display.top }}; width:{{ display.width }};"
              ng-click="zoomAtExact(display.annotation)" title="{{ display.formatted_qualifiers }}">
            {{ display.title }}
        </span>
    </div>

    <div class="clearfix"></div>

    <div class="sequence-container">
        <button class="btn btn-primary" ng-click="fetchSequence()">Show Sequence</button>
        <div class="fs-block" ng-show="zoom.has_sequence">
            <div id="sequence-viewer"></div>
        </div>
    </div>

</div>
