<div class="container-fluid ng-cloak" ng-cloak>

    <div class="row" ng-show="state === c.ST_LOADING">
        <h4>Loading ...</h4>
    </div>

    <div class="row" ng-show="state === c.ST_STILL_LOADING">
        <h4>Still loading from backend.</h4>
        <div>
            Load time so far: {{ loadTime | number:0 }} s.
        </div>
    </div>

    <div class="row" ng-show="state === c.ST_READY">
        <tabset>
            <tab heading="Unfiled">
                <!-- settings --> 
                <div class="container controlBox">
                    <form class="form-inline settingsForm" novalidate >
                        <legend class="simpleLegend">Settings</legend>
                            <div class="checkbox formPadding">
                                <label>
                                       <input type="checkbox" 
                                           ng-model="settings.showThumbnails">Show thumbnails
                                 </label>
                             </div>

                            <div class="checkbox formPadding">
                                <label>
                                       <input type="checkbox" 
                                     ng-model="settings.mergeIdenticalRows"
                                      ng-change="mergeRowsChanged(mergeIdenticalRows)"> Merge identical rows
                                 </label>
                            </div>

                            <div class="form-group formPadding">
                                 <label for="imageWidth">Image Width</label>
                                     <select ng-model="settings.imageSize" 
                                             ng-options="iSize for iSize in c.IMAGE_SIZES"
                                             class="form-control input-sm">

                                     </select>
                            </div>
                            <div class="form-group formPadding">
                                 <label>Max records</label>
                                     <select ng-model="settings.nRecords" 
                                             ng-options="n for n in c.MAX_RECORDS"
                                             ng-change="maxRecordsChanged();"
                                             class="form-control input-sm">
                                     </select>
                            </div>
                    </form>
                    <br>

                    <form class="form settingsForm" novalidate>
                        <legend class="simpleLegend">Filters</legend>
                        <div class="container-fluid">
                            <div class="col-lg-2 filterBox" ng-repeat="oneCol in filterCols">
                                  <div class="filterKey">{{ oneCol.key }}</div>

                                  <!-- If we filter this column using free-form text match... -->
                                  <div ng-if="oneCol.ftype === c.FILTER_FREE_FORM">
                                    <input type="text"
                                           ng-model="filterVals[$index]"
                                           typeahead="opt.value for opt in oneCol.foptions | filter:$viewValue"
                                           class="form-control input-sm">
                                    <br>
                                    <a ng-click="filterVals[$index]=''"
                                       ng-disabled="'' === filterVals[$index]"
                                       href="">
                                      Clear
                                    </a>
                                  </div>

                                  <!-- If we filter this column using checkboxes... -->
                                  <div ng-if="oneCol.ftype === c.FILTER_CHECK_BOX">

                                      <div class="checkbox" ng-repeat="oneOpt in oneCol.foptions">
                                        <label>
                                          <input type="checkbox" 
                                                 ng-model="filterVals[$parent.$index][$index]">{{oneOpt.value}} ({{ oneOpt.count }})
                                        </label>
                                    </div>
                                    <div>
                                        <a ng-click="setFilterAll($index, true)" href="">All</a> -
                                        <a ng-click="setFilterAll($index, False)" href="">None</a> - 
                                        <a ng-click="setFilterToggle($index)" href="">Toggle</a>
                                    </div>
                                  </div>
                            </div>
                            <br>
                        </div>

                        <div class="container updateBtn">
                            <button class="btn btn-success col-lg-4 pull-left"
                                    ng-click="filtersChanged()"
                                    ng-disabled="updating">
                                        {{ updating && 'Updating ...' || 'Update' }}
                            </button>
                        </div>

                    </form>

                    <br>

                    <!-- Rows --> 

                    <!-- results header -->
                    <div class="col-lg-12 resultsHeaderActions well">
                            <div class="col-lg-6">
                              <h4>Showing {{showingRecords}} of {{selectedRecords}} (of {{totalRecords}} total)</h4>
                              <span ng-show="renderTime > 0">
                                Rendered in {{renderTime | number:0 }} ms (filtered and sorted in {{ filterTime | number:0 }} ms).
                              </span>
                              <br>
                              (click on the column header radio buttons to re-sort by that column)
                            </div>


                            <div class="col-lg-6">
                                All tests shown: 
                                <button class="btn btn-default btn-sm" ng-click="selectAllImagePairs()">Select</button>
                                <button class="btn btn-default btn-sm" ng-click="clearAllImagePairs()">Clear</button>
                                <button class="btn btn-default btn-sm" ng-click="toggleAllImagePairs()">Toggle</button>

                                <div ng-repeat="otherTab in tabs">
                                    <button class="btn btn-default btn-sm"
                                            ng-click="moveSelectedImagePairsToTab(otherTab)"
                                            ng-disabled="selectedImagePairs.length == 0"
                                            ng-show="otherTab != viewingTab">
                                            Move {{selectedImagePairs.length}} selected tests to {{otherTab}} tab
                                    </button>
                                </div>
                            </div>
                            <br>
                    </div>

                    <!-- results --> 
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <!-- Most column headers are displayed in a common fashion... -->
                                <th ng-repeat="oneCol in allCols" ng-style="{ 'min-width': getImageWidthStyle(oneCol, 20, 'auto') }">
                                    <a ng-class="getSortedClass('sort', $index, '')"
                                       ng-click="sortBy($index)"
                                       href=""
                                       class="sortableHeader">
                                          {{ oneCol.ctitle }}
                                    </a>
                                </th>
                                <th>
                                    <div class="checkbox">
                                        <label>
                                               <input type="checkbox" ng-model="allChecked" ng-change="checkAll()">All
                                         </label>
                                     </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="oneRow in data">
                                <td ng-repeat="oneColVal in oneRow.dataCols">
                                    {{oneColVal}}
                                </td>

                                <td ng-repeat="oneCol in oneRow.imageCols" ng-if="oneRow.rowspan > 0" rowspan="{{ oneRow.rowspan }}">
                                    <div ng-show="oneCol.url">
                                        <a href="{{ oneCol.url }}" target="_blank">View Image</a><br/>
                                        <img ng-if="settings.showThumbnails" 
                                             ng-style="{ width: settings.imageSize+'px' }" 
                                             ng-src="{{ oneCol.url }}" />
                                        <div ng-if="oneCol.percent && oneCol.value">
                                            {{oneCol.percent}}% ({{ oneCol.value }})
                                        </div>
                                    </div>
                                    <div ng-hide="oneCol.url" style="text-align:center">
                                        <span ng-show="oneCol.url === null">&ndash;none&ndash;</span>
                                        <span ng-hide="oneCol.url === null">&nbsp;</span>
                                    </div>
                                </td>

                                <td ng-if="oneRow.rowspan > 0" rowspan="{{ oneRow.rowspan }}">
                                    <div class="checkbox">
                                        <input type="checkbox"
                                               ng-model="checkRows[$index]" 
                                               ng-change="rowCheckChanged($index)">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </tab>

            <tab heading="Hidden">
                <h3>Hidden</h3>
            </tab>

            <tab heading="Pending Approval">
                <h3>Pending Approval</h3>
            </tab>

        </tabset>

    </div>
</div>