<div class="list-by-status" ng-if="(todos | filter: {completed: showChecked}).length > 0">
  <h4>{{title}}</h4>
  <div class="todo"
       ng-repeat="todo in todos | filter: {completed: showChecked}">
    <label ng-class="{'text-danger': isInDanger(todo)}">
      <input type="checkbox"
             ng-model="todo.completed"
             ng-change="updateTodo(todo)">
      <span class="todo__role">{{steps[taskSlugs[todo.task]].name}}:&nbsp;</span>
      <span class="todo__description">{{todo.description}}</span>
      <span ng-class="{'todo__dates': true, 'todo__dates-danger': isInDanger(todo)}">
        <span ng-if="isNonEmptyString(todo.start_by_datetime)">
          Start <datetime-display datetime="todo.start_by_datetime" show-time="true"/>
        </span>
        <span ng-if="isNonEmptyString(todo.start_by_datetime) && isNonEmptyString(todo.due_datetime)" class="todo__dates-separator">|</span>
        <span ng-if="isNonEmptyString(todo.due_datetime)">
          Due <datetime-display datetime="todo.due_datetime" show-time="true"/></span>
      </span>
    </label>
  </div>
</div>
