div(id='detail-demand', data-ng-show='forecast !== undefined')
    h3 #{__('demand breakdown')}
    table(id='table-detail-demand', class='table scrollFix table-striped table-data')
        thead
            tr
                th#colBucket(ng-click="predicate = 'material'; reverse=!reverse") #{__('time bucket')}
                th#colOnHand(ng-click="predicate = 'uom'; reverse=!reverse") #{__('confirmed')}
                th#colDemand(ng-click="predicate = 'onHand'; reverse=!reverse") #{__('will call')}
                th#colDeliveries(ng-click="predicate = 'capacity'; reverse=!reverse")
                    span.text.underline #{__('weather permitting')}
        tbody
            tr(data-ng-repeat='bucket in forecast', data-ng-class="{empty: forecast.length < 8}")
                td {{bucket.startTime | date: 'shortTime'}}
                td {{bucket.confirmed | number : 2}}
                td {{bucket.willCall | number : 2}}
                td {{bucket.weatherPermitting | number : 2}}
            tr(class="empty", data-ng-show='!forecast || forecast.length === 0')
                td
                td
                td
                td