<section class="section-panel tasks-section"
         st-table="displayedTasks"
         st-safe-src="vm.tasktable.tasks">
  <div class="container-fluid">
    <div class="row section-header">
      <div class="col-lg-10 collapsed-toggle" ng-click="vm.toggleCollapsed()">
        <h3>
          <span>
            <i ng-show="!vm.collapsed" class="fa fa-angle-up"></i>
            <i ng-show="vm.collapsed" class="fa fa-angle-down"></i>
          </span>
          {{vm.tasktable.label}} ({{ vm.tasktable.tasks.length || 0 }})
          <i class="fa fa-spinner fa-spin" ng-show="vm.waiting"></i>
        </h3>

      </div>
      <div class="tasks-search-bar-container col-lg-2">
        <div class="tasks-search-bar">
          <i class="fa fa-search"></i>
          <input st-search="" placeholder="Search..." type="text"/>
        </div>
      </div>
    </div>
    <div class="row" ng-show="!vm.collapsed">
          <table ng-if="vm.tasktable.tasks.length > 0"
                 class="table table-striped">
            <thead>
              <tr>
                <th st-sort="assignment_start_datetime">Task assigned</th>
                <th st-sort="project">Project</th>
                <th st-sort="step">Task</th>
                <th st-sort="detail">Details</th>
                <th class="tags-col" st-sort="tags" ng-if="vm.showTagsCol">Tags</th>
                <th st-sort="next_todo_dict.title">Next steps</th>
                <th st-sort="next_todo_dict.start_by_datetime">Start by</th>
                <th st-sort="next_todo_dict.due_datetime">Due on</th>
              </tr>
            </thead>
            <tbody>
              <tr
                 ng-class="{'task-row':true, 'danger': vm.isInDanger(task)}"
                 ng-repeat="task in displayedTasks"
                 ng-click="vm.openTask(task)">
                <td><datetime-display datetime="task.assignment_start_datetime" custom-format="'MM/DD/YYYY'" /></td>
                <td>{{task.project}}</td>
                <td>{{task.step}}</td>
                <td>{{task.detail|limitTo:50}}{{task.detail.length > 50 ? '...' : ''}}</td>
                <td class="tags-col" ng-if="vm.showTagsCol">
                  <span ng-repeat="tag in task.tags"
                        class="label label-{{tag.status}}">
                    {{tag.label}}
                  </span>
                </td>
                <td>{{task.next_todo_dict.title|limitTo:50}}{{task.next_todo_dict.title.length > 50 ? '...' : ''}}</td>
                <td><datetime-display datetime="task.next_todo_dict.start_by_datetime" show-time="false" custom-format="vm.getDatetimeFormat(task.next_todo_dict.start_by_datetime)" /></td>
                <td><datetime-display datetime="task.next_todo_dict.due_datetime" show-time="false" custom-format="vm.getDatetimeFormat(task.next_todo_dict.due_datetime)" /></td>
              </tr>
            </tbody>
          </table>
    </div>
  </div>
</section>
