<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 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 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>

