<!--
  ~ 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>
    <div class="search">
        <form name="form" novalidate class="container">
            <div class="col-lg-7 col-lg-offset-3">
                <div class="row 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 class="row">
                    <small class="small-txt">search: Table, DB, Column</small>
                </div>
            </div>
        </form>
    </div>
    <div class="container">
        <div class="row">

            <div  data-ng-include="'/modules/navigation/views/navigation.html'"></div>

            <div class="col-lg-9" ng-show='resultCount > 0' >
                <h4 ng-show="searchMessage">{{searchMessage}}</h4>

                <ul class="list-unstyled">
                    <li ng-repeat="result in filteredResults" class="searchresults">
                        <h4><a data-ui-sref="details({id:result['$id$'].id})">{{result.name}}</a></h4>
                        <p>{{result.description}}</p>
                            <span ng-repeat="(key, value) in filterSearchResults(result)" >
                                <span ng-show="$index < 4 "><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 > 4"><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="resultsPagination" ng-show='resultCount > 0'>
                    <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
                    <p>
                </div>

            </div>
        </div>
    </div>
</div>