<link rel="stylesheet" href="/static/css/hsl.css">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet"> 
<div class="container" ng-app="myApp" ng-controller="timetableCtrl">
    <div class="header-row row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">HSL-Aikataulut</div>
        <div class="col-sm-2 time"><p>{{ clock  | date:'HH:mm'}}</p></div>
    </div>
    <table class="table table-striped row">
        <thead>
            <tr>    
                <th>
                    Aika
                </th>
                <th>
                    Linja
                </th>
                <th>
                    Pys&#228;kki
                </th>
                <th>
                    P&#228;&#228;tepys&#228;kki
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="repeat-item" ng-repeat="x in arr | orderBy: ['date','time'] | limitTo: 10">
                <td ng-class='{red : x.hurry, black: !x.hurry}'>
                    {{x.timedelta < 10 ?x.timedelta + ' min' : x.time}}
                </td>
                <td>
                    {{x.bus}}
                </td>
                <td>
                    {{x.stop}}
                </td>
                <td>
                    {{x.laststop}}
                </td>
            </tr>
        </tbody>
    </table>
</div>
