<div class='container-fluid'>

    <h5>
        {{title}}
    </h5>
    <div style='padding:0; position:relative'>
    <table class="table tvguide" style="{'column-width': colspanPercent + '%'  }">
        <tr>
            <th colspan="{{channelColspan}}" class='guidenav even' >
                <button class="btn btn-sm btn-primary" ng-click="zoomIn()" ng-disabled='!zoomInEnabled()'>
                    <i class="fa fa-search-plus"></i>
                </button>
                <button class="btn btn-sm btn-primary" ng-click="zoomOut()" ng-disabled='!zoomOutEnabled()'>
                    <i class="fa fa-search-minus"></i>
                </button>
                <button class="btn btn-sm btn-primary" ng-click="back()" ng-disabled='!backEnabled()'>
                    <i class="fa fa-arrow-left"></i>
                </button>
                <button class="btn btn-sm btn-primary" ng-click="next()" ng-disabled='!nextEnabled()'>
                    <i class="fa fa-arrow-right"></i>
                </button>

            </th>
            <th class="hour" ng-Class="{'even' : ($index % 2==1), 'odd' : ($index % 2==0) }"  ng-repeat="time in times track by $index" colspan="{{time.duration}}">
                {{time.label}}
            </th>
        </tr>

        <tr ng-mouseover="channels[channelNumber].mouse=true" ng-mouseleave="channels[channelNumber].mouse=false"  ng-repeat="channelNumber in channelNumbers track by $index" ng-Class="{'even' : ($index % 2==0), 'odd' : ($index % 2==1) }" >
            <td title='{{channels[channelNumber].altTitle}}' class='even channel-number' colspan="{{channelNumberColspan}}" >
                <div>
                    <a role="button" href='/media-player/{{channelNumber}}.m3u' title="Attempt to play channel: '{{channels[channelNumber].altTitle}}' in local media player" class='btn btn-sm btn-outline-primary play-channel'  ng-show='channels[channelNumber].mouse'>
                        <span class='fa fa-play'></span>
                    </a>
                    <span ng-hide='channels[channelNumber].mouse' >
                        {{channels[channelNumber].number}}
                    </span>
                </div>
            </td>
            <td title='{{channels[channelNumber].altTitle}}' class='even channel-icon' colspan="{{channelIconColspan}}" >
                <img src='{{channels[channelNumber].icon}}' alt='{{channels[channelNumber].name}}' ng-click='channels[channelNumber].mouse=true'  ></img>
            </td>

            <td class='odd program' colspan="{{totalSpan}}" ng-if="channels[channelNumber].loading">
                <div class='loader'></div>
            </td>

            <td ng-repeat="program in channels[channelNumber].programs track by $index" colspan="{{program.duration}}"
                title="{{program.altTitle}}"
                ng-Class="{'program' : true, 'program-with-end' : program.end, 'program-with-start' : program.start, 'even' : ($index % 2==1), 'odd' : ($index % 2==0) }"
                ng-if="! channels[channelNumber].loading"
            >
                <div class='show-title'>
                    {{program.showTitle}}
                </div>
                <div class='sub-title'>
                    {{program.subTitle}} <span class='episodeTitle'>{{program.episodeTitle}}</span>
                </div>
            </td>
        </tr>

        <tr>
            <th colspan="{{channelColspan}}" class='guidenav even' >
                <button class="btn btn-sm btn-primary" ng-click="zoomIn()" ng-disabled='!zoomInEnabled()'>
                    <span class="fa fa-search-plus"></span>
                </button>
                <button class="btn btn-sm btn-primary" ng-click="zoomOut()" ng-disabled='!zoomOutEnabled()'>
                    <span class="fa fa-search-minus"></span>
                </button>
                <button class="btn btn-sm btn-primary" ng-click="back()" ng-disabled='!backEnabled()'>
                    <span class="fa fa-arrow-left"></span>
                </button>
                <button class="btn btn-sm btn-primary" ng-click="next()" ng-disabled='!nextEnabled()'>
                    <span class="fa fa-arrow-right"></span>
                </button>

            </th>

            <th class="hour" ng-Class="{'even' : ($index % 2==1), 'odd' : ($index % 2==0) }"  ng-repeat="time in times track by $index" colspan="{{time.duration}}">
                {{time.label}}
            </th>
        </tr>

    </table>
    <div class="tv-guide-now" ng-style="{'left': nowPosition + '%'}" ng-show='showNow' ></div>
    </div>

</div>