<div class="well" ng-show="annotate_error">
  <span class="text-danger">Error: {{ annotate_error.message }}</span>
</div>

<form class="form-inline" role="form">
  From
  <div class="form-group">
    <input
      required
      class="form-control"
      type="text"
      ng-model="annotation.base_first"
      size="6"
      placeholder="Bp"
    />
  </div>
  To
  <div class="form-group">
    <input
      required
      class="form-control"
      type="text"
      ng-model="annotation.base_last"
      size="6"
      placeholder="Bp"
    />
  </div>
  <div class="form-group">
    <input
      class="fs-block"
      required
      class="form-control"
      type="text"
      ng-model="annotation.name"
      size="8"
      placeholder="Name"
    />
  </div>
  <br />
  <div class="form-group space-top-small">
    <select
      required
      class="form-control select-mini"
      ng-model="annotation.type"
      ng-options="feature_type for feature_type in featureTypes"
    >
    </select>
  </div>
  <div class="form-group space-top-small">
    <select
      required
      class="form-control select-mini"
      ng-model="annotation.strand"
    >
      <option value="1">Fwd</option>
      <option value="-1">Rev</option>
    </select>
  </div>
  <div class="form-group space-top-small">
    <button class="btn btn-primary" ng-click="addAnnotation(annotation)">
      Annotate
    </button>
  </div>
</form>

<div class="space-top annotation-control">
  <div class="input-group">
    <span class="input-group-addon"> Search: </span>
    <input ng-model="query" class="form-control" />
    <span class="input-group-addon"> Sort by: </span>
    <select ng-model="annotationOrderProp" class="form-control">
      <option value="base_first">Position</option>
      <option value="name">Alphabetical</option>
    </select>
  </div>
</div>

<div ng-if="display_summary == false || (query && query.length >= 2)">
  <table class="table table-striped table-condensed">
    <thead>
      <tr>
        <th>Start</th>
        <th>End</th>
        <th>Name</th>
        <th>Type</th>
        <th>Strand</th>
      </tr>
    </thead>
    <tr
      ng-repeat="annotation in zoom.annotations | filter:query | orderBy:annotationOrderProp"
    >
      <td>{{ annotation.base_first }}</td>
      <td>{{ annotation.base_last }}</td>
      <td>
        <a
          class="fs-block"
          href="javascript:void(0);"
          ng-click="zoomAt(annotation)"
          title="{{ annotation.formatted_qualifiers }}"
          >{{ annotation.display_name }}</a
        >
      </td>
      <td>{{ annotation.type }}</td>
      <td>{{ annotation.strand }}</td>
    </tr>
  </table>
</div>
