<!-- partial HTML -->
<div id="ov-driver-matrix">
    <div class="tabular-header">
        <h2>Driver Matrix</h2>
        <div class="ctrl-btns">
            <!-- TODO: fix (or remove) refresh button -->
            <div class="refresh" ng-class="{active: autoRefresh}"
                 icon icon-id="refresh" icon-size="36"
                 tooltip tt-msg="autoRefreshTip"
                 ng-click="toggleRefresh()"></div>
        </div>
    </div>

    <!-- TODO: handle resizing / scrolling -->
    <div class="driver-matrix">
        <table class="table-header-rotated">
            <thead>
                <tr>
                    <!-- first column header is not rotated -->
                    <th></th>
                    <!-- following headers are rotated -->
                    <th class="rotate" ng-repeat="beh in behaviours track by $index">
                        <div><span>{{beh}}</span></div>
                    </th>
                </tr>

            </thead>

            <tbody>
            <tr ng-repeat="drv in drivers track by $index">
                <!--ng-click="selectCallback($event, item)"-->
                <!--ng-class="{selected: item.id === selId}">-->
                <th class="row-header">
                    {{drv}}
                </th>
                <td ng-repeat="beh in behaviours track by $index"
                    ng-class="{'xmark':cellMarked(drv, beh)}">
                    {{cellValue(drv, beh)}}
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <ov-driver-matrix-item-details-panel></ov-driver-matrix-item-details-panel>
</div>