<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div flex="100" layout="column" class="md-padding">
    <div style="width:100%">
        <md-autocomplete
                ng-disabled="false"
                md-no-cache="false"
                md-selected-item="ctrl.selectedItem"
                md-search-text-change="ctrl.searchTextChange(searchText)"
                md-search-text="searchText"
                md-selected-item-change="ctrl.selectedItemChange(item)"
                md-items="item in ctrl.querySearch(searchText)"
                md-item-text="item.label"
                md-min-length="0"
                placeholder="Unit" style="width:100%">
            <md-item-template>
                <span md-highlight-text="searchText"
                      md-highlight-flags="^i">{{item.label}} ({{item.abbreviation}})</span>
            </md-item-template>
            <md-not-found>
                No measurement unit matching "{{searchText}}" were found.
            </md-not-found>
        </md-autocomplete>
        <p/>
    </div>
</div>
