<div class="t-content" ng-controller="SchedulesExampleController as $ctrl">

    <inv-schedule-chart
        style="height: 400px"
        data="$ctrl.data"
        now="$ctrl.now"
        start="$ctrl.start"
        end="$ctrl.end"
        on-schedule-selected="$ctrl.scheduleSelected(schedule)"
        task-detail-template="$ctrl.taskDetailTemplate">
    </inv-schedule-chart>

    <div>Edit start and end dates to change the data:</div>
    <div>
        Start:
        <inv-datetime-entry entry-mode="date-time" value="$ctrl.editValues.start"
                            on-date-changed="$ctrl.changedStart(date)"></inv-datetime-entry>

        End:
        <inv-datetime-entry entry-mode="date-time" value="$ctrl.editValues.end"
                            on-date-changed="$ctrl.changedEnd(date)"></inv-datetime-entry>

        Schedule count:
        <input ng-model="$ctrl.editValues.scheduleCount"/>

        <button class="inv-button" ng-click="$ctrl.updateData()">Apply</button>
    </div>
</div>

<div class="t-content">
<table>
    <tr><th>Health</th><th>component</th></tr>
    <tr>
        <td>Good</td>
        <td><inv-schedule-health schedule-health="1"></inv-schedule-health></td>
    </tr>
    <tr>
        <td>OK</td>
        <td><inv-schedule-health schedule-health="2"></inv-schedule-health></td>
    </tr>
    <tr>
        <td>Failed</td>
        <td><inv-schedule-health schedule-health="3"></inv-schedule-health></td>
    </tr>
    <tr>
        <td>Not Run </td>
        <td><inv-schedule-health schedule-health="4"></inv-schedule-health></td>
    </tr>
</table>
</div>

<div class="t-content" ng-controller="TaskIconExampleController as $ctrl">
    <div ng-repeat="task in $ctrl.tasks">
        Task status name: <span ng-bind="$ctrl.taskStatusName(task)"></span>
        <inv-task-status-icon task="task"></inv-task-status-icon>
    </div>
</div>

<div class="t-content" ng-controller="TaskIconExampleController as $ctrl">
    <h4>Successful Task:</h4>
    <inv-task-icon
        task="$ctrl.taskSuccess"
        task-detail-template="$ctrl.taskDetailTemplate">
    </inv-task-icon>
    <h4>Failed Task:</h4>
    <inv-task-icon
        task="$ctrl.taskFailure"
        task-detail-template="$ctrl.taskDetailTemplate">
    </inv-task-icon>
</div>

<div class="t-content c-taskHistory" ng-controller="TaskIconExampleController as $ctrl">
    <div ng-repeat="task in $ctrl.tasks">
        <inv-task-icon
            task="task"
            task-detail-template="$ctrl.taskDetailTemplate">
        </inv-task-icon>
    </div>
</div>