<div class="chart-slider table-chart-slider">
    <span>{{ availableTime[selectedTimeIndex] | date : 'yyyy-MM-dd' }}</span>
    <input type="range" min="0" max="{{ availableTime.length-1 }}" step="1" value="{{ availableTime.length -1 }}" ng-model="selectedTimeIndex">
    <i class="fa fa-play icon-as-button" title="{{ 'Animate over time / increase speed' | translate }}" ng-click="startAnimation()"></i>
    <i class="fa fa-stop icon-as-button" title="{{ 'Stop animation' | translate }}" ng-click="stopAnimation()" ng-show="animationSpeed"></i>
</div>

<div class="loadingIndicator" ng-show="loading" translate>
    Loading notes...
</div>

<table class="table-chart" ng-hide="loading">
    <thead>
        <tr>
            <th>
                <a ng-click="toggleSort(contentFirstColumn)">
                    {{contentFirstColumn}}
                    <span ng-show="sortColumn === contentFirstColumn && sortReverse === true">&#x25BC;</span>
                    <span ng-show="sortColumn === contentFirstColumn && sortReverse === false">&#x25B2;</span>
                </a>
            </th>

            <th ng-repeat="col in visibleColumns">
                <a ng-click="toggleSort(col)">
                    {{col}}
                    <span ng-show="sortColumn === col && sortReverse === true">&#x25BC;</span>
                    <span ng-show="sortColumn === col && sortReverse === false">&#x25B2;</span>
                </a>
            </th>

            <th ng-show="showSparklines">&nbsp;</th>
        </tr>
    </thead>
    <tbody ng-dblclick="addChartNote($event)" ng-mouseover="mouseOver($event)" ng-mouseleave="mouseLeave()">
        <tr ng-repeat="row in visibleRows | orderBy : sortColumnGetter : sortReverse">
            <td ng-class="{ 'table-chart-has-notes': content[row]._hasNotes[contentFirstColumn], 'table-chart-header-column': true }"
                x-notes-keyword="{{:: content[row]._notesKeywords[contentFirstColumn] }}"
                x-notes-column="{{:: contentFirstColumn }}"
                x-notes-entry="{{:: content[row][contentFirstColumn] }}">{{:: columnFormats[contentFirstColumn](content[row][contentFirstColumn]) }}</td>

            <td ng-repeat="col in visibleColumns"
                ng-style="::{ 'background-color': heatmapColor(content[row][col]) }"
                ng-class="{ 'table-chart-has-notes': content[row]._hasNotes[col] }"
                x-notes-keyword="{{:: content[row]._notesKeywords[col] }}"
                x-notes-column="{{:: col }}"
                x-notes-entry="{{:: content[row][contentFirstColumn] }}">{{:: columnFormats[(columnColumn ? valueColumn : col)](content[row][col]) }}</td>

            <td ng-show="showSparklines" ng-if="sparklinesUseGlobalMax">
                <sparkline-chart height="30" width="100" global-min="tableMin" global-max="tableMax" content="content[row]._sparklineContent"></sparkline-chart>
            </td>
            <td ng-show="showSparklines" ng-if="!sparklinesUseGlobalMax">
                <sparkline-chart height="30" width="100" content="content[row]._sparklineContent"></sparkline-chart>
            </td>

        </tr>

        <tr ng-show="showColumnSparklines">
            <td>&nbsp;</td>

            <td ng-repeat="col in visibleColumns">
                <sparkline-chart height="30" width="100" global-min="tableMin" global-max="tableMax" content="columnSparklinesContent[col]" ng-if="sparklinesUseGlobalMax"></sparkline-chart>
                <sparkline-chart height="30" width="100" content="columnSparklinesContent[col]" ng-if="!sparklinesUseGlobalMax"></sparkline-chart>
            </td>

            <td ng-show="showSparklines">&nbsp;</td>
        </tr>
    </tbody>
</table>
