<!--
  ~ 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 class="row mt20px">
    <form class="col-lg-offset-3 col-lg-9" name="form" novalidate>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" data-ng-model="query" required/>
                <span class="input-group-btn">
                    <button class="btn btn-success" type="submit" data-ng-disabled="form.$invalid" ui-sref="search({ query: query })">
                        <i class="glyphicon glyphicon-search white "></i>
                    </button>
                </span>
        </div>
        <div>
            <small class="small-txt">Search: Table, DB, Column</small>
        </div>
    </form>
</div>
<div class="row mt10px">
    <div class="col-lg-3" data-ng-include="'/modules/navigation/views/navigation.html'"></div>
    <div class="col-lg-9">
        <div ng-switch on="searchMessage">
            <div ng-switch-when="load-gif" class="search-spinner"><img src="../img/spinner.gif" align="middle" /></div>
            <div ng-switch-default><h4 ng-show="searchMessage">{{searchMessage}}</h4></div>
        </div>
        <ul class="list-unstyled"  ng-show='resultCount > 0'>
            <li ng-repeat="result in filteredResults" class="searchresults">
                <h4><a data-ui-sref="details({id:result['$id$'].id || result.guid})">{{result.name || result.guid}}</a></h4>

                <p>{{result.description}}</p>
                            <span ng-repeat="(key, value) in filterSearchResults(result)">
                                <span ng-show="$index <= 3  "><b>{{key}}: </b>{{value}} {{(($index+1 === limit) || $last ) ? '' : ', '}}</span>
                            </span>

                <div collapse="isCollapsed">
                                <span ng-repeat="(key, value) in filterSearchResults(result)">
                                <span ng-show="$index > 3"><b>{{key}}: </b>{{value}}{{$last ? '' : ', '}}</span>
                            </span>
                </div>
                <a href ng-show="isCollapsed && (keyLength > 4)" ng-click="doToggle($event,isCollapsed)">..show more</a>
                <a href ng-show="!isCollapsed" ng-click="doToggle($event,isCollapsed)">..show less</a>

                <h5 ng-show="!dataTransitioned">Tags : <a ng-repeat="(key, value) in result['$traits$']" data-ui-sref="search({query: key})">{{key}}</a></h5>

            </li>
        </ul>
        <div class="pull-right" ng-show='resultCount > 0'>
            <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
            <p>
        </div>
    </div>
</div>