<div ng-controller="ES.SearchCtrl">
    <div class="">
        <div class="">
            <div class="container-fluid">
                <button ng-click="indexSampleDocs()" class="btn btn-inverse pull-right">Index Sample Docs</button>
            </div>
            <br/>
            <!--<a href="#/search"> <i class="icon-search"></i> Return to Search</a>-->
            <table>
                <tr>
                    <!-- Form -->
                    <td>
                        <div class="row-fluid">
                            <form class="form-horizontal">
                                <div class="control-group">
                                    <label class="control-label" for="esServer" title="Default ES Server">ES Server</label>

                                    <div class="controls">
                                        <input id="esServer" name="esServer" type="text" ng-model="esServer"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="QueryTerm" title="Enter a term to query. Could be *">Query Term</label>

                                    <div class="controls">
                                        <input id="QueryTerm" name="QueryTerm" type="text" ng-model="queryTerm"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="facetField" title="Enter facet field.">Facet Field</label>

                                    <div class="controls">
                                        <input id="facetField" name="facetField" type="text" ng-model="facetField"/>
                                    </div>
                                </div>

                                <div class="control-group">
                                    <label class="control-label" for="facetType" title="Facet Type (table, date histogram)">Facet Type</label>

                                    <div class="controls">
                                        <select id="facetType" ng-model="facetType">
                                            <option selected value="terms">Table</option>
                                            <option value="histogram">Histogram</option>
                                            <option value="date_histogram">Date Histogram</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="indice" title="Enter an index. By example - 'twitter'">Indice to be searched</label>

                                    <div class="controls">
                                        <input id="indice" name="indice" type="text" ng-model="indice"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="docType" title="Enter a document type. By example - 'tweet'">Document Type</label>

                                    <div class="controls">
                                        <input id="docType" name="docType" type="text" ng-model="docType"/>
                                    </div>
                                </div>
                                <div class="control-group" ng-show="facetType == 'terms'">
                                    <div class="controls">
                                        <input type="submit" value="ES Search" class="btn" ng-click="search()"/>
                                    </div>
                                </div>
                                <div class="control-group" ng-show="facetType == 'histogram'">
                                    <div class="controls">
                                        <input type="submit" value="ES Histogram Facet Search" class="btn" ng-click="facetTermsSearch()"/>
                                    </div>
                                </div>
                                <div class="control-group" ng-show="facetType == 'date_histogram'">
                                    <div class="controls">
                                        <input type="submit" value="ES Date Histogram Facet Search" class="btn" ng-click="facetDateHistogramSearch()"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </td>
                    <!-- Histogram -->
                    <td ng-show="facetType == 'histogram'">
                        <div class="span10" style="height:350px">
                            <span class="title">Histogram</span>
                            <fs:bar
                                    width="900"
                                    height="175"
                                    duration="750"
                                    bind="results.facets.termFacet"
                                    />
                        </div>
                    </td>
                    <td ng-show="facetType == 'date_histogram'">
                        <div class="span8" style="height:350px">
                            <span class="title">Date Histogram</span>
                            <fs:date-histo
                                    duration="750"
                                    interval="minute"
                                    bind="results.facets.dateHistoFacet"
                                    />
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="row-fluid">
            <div>
                Documents Found : {{results.hits.total}}
                <!--<a ng-ref="/search"> <i class="icon-search"></i> Return to Search</a>-->
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th>User</th>
                        <th>Posted Date</th>
                        <th>Message</th>
                        <th>Tags</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="doc in results.hits.hits">
                        <td>{{doc._source.user}}</td>
                        <td>{{doc._source.postedDate}}</td>
                        <td>{{doc._source.message}}</td>
                        <td ng-repeat="tag in doc._source.tags">{{tag}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>


        <!-- TODO Error Panel
        <div class="row-fluid">
            <div class="span12 alert alert-error panel-error" ng-hide="!panel.error">
                <a class="close" ng-click="panel.error=false">&times;</a>
                <i class="icon-exclamation-sign"></i> <strong>Oops!</strong> {{panel.error}}
            </div>
        </div>
        -->

        <!--
        <div>
            <div ng-controller='histogram' ng-init="init()" style="height:4">
                <style>
                    .histogram-legend {
                        display: inline-block;
                        padding-right: 5px
                    }

                    .histogram-legend-dot {
                        display: inline-block;
                        height: 10px;
                        width: 10px;
                        border-radius: 5px;
                    }

                    .histogram-legend-item {
                        display: inline-block;
                    }

                    .histogram-chart {
                        position: relative;
                    }
                </style>
                  <span ng-show="panel.spyable" class='spy panelextra pointer'>
                      <i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
                  </span>

                <div>
                    <span ng-show='panel.zoomlinks && data'>
                      <a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>
                      <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> |
                    </span>
                    <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
                      <i class='icon-circle' ng-style="{color: series.info.color}"></i>
                      <span class='small histogram-legend-item'>{{series.info.alias}} ({{series.hits}})</span>
                    </span>
                    <span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
                </div>

                <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
                <div histogram-chart class="histogram-chart" params="{{panel}}"></div>
            </div>
        </div>
        -->
    </div>

</div>
