<div class="timeline">
    <h3 class="timeline-title hidden-xs">Day Progress</h3>
    <!-- <pre ng-hide="isDemo">{{templates | json}}</pre> -->
    <div class="timeline-item-pane">
        <div class="date">
            <div class="back" ng-click="changeDate(-1)">
                <i class="fa fa-angle-left" aria-hidden="true"></i>
            </div>
            <div class="currentdate">
                <div class="day">{{currentDate | date:"d MMM"}}</div>
                <div class="dayofweek">{{currentDate | date:"EEEE"}}</div>
            </div>
            <div class="next" ng-click="changeDate(1)">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
        <div class="column">
            <div class="item first">
                <div class="location" ng-click="reverseItems()">
                    <i class="fa fa-exchange" aria-hidden="true"
                        ng-show="timelineItems.length > 0"></i>
                </div>
                <div class="timeline-bar"></div>
                <div class="details" ng-class="{'hide': timelineItems.length === 0}"></div>
            </div>
            <div ng-repeat="item in timelineItems">
                <timeline-template item="item"></timeline-template>
            </div>
            <div class="item message" ng-hide="timelineItems.length > 0">
                <div class="location none"></div>
                <div class="timeline-bar"></div>
                <div class="details">
                    <div class="icon">
                        <i ng-show="isLoading.value" class="fa fa-cog fa-spin fa-fw" aria-hidden="true"></i>
                        <i ng-show="!isLoading.value" class="fa fa-anchor" aria-hidden="true"></i>
                    </div>
                    <div class="text">
                        <span ng-show="isLoading.value">Loading snippets</span>
                        <span ng-show="!isLoading.value">Nothing to show here</span>
                    </div>
                </div>
            </div>
            <div class="item last">
                <div class="location">
                    <div class="timeline-item {{::isLocationAvlbl ? 'line' : 'none'}}">
                    </div>
                </div>
                <div class="timeline-bar"></div>
                <div class="details"></div>
            </div>
        </div>
    </div>
    <div class="habit-item-pane visible-xs">
        <div ng-repeat="item in habitItems">
            <pre>{{item | json}}</pre><br>
        </div>
    </div>
</div>