<section class="wrapper">
  <section class="section-panel tasks-section">
    <div class="container-fluid">
      <div class="row section-header">
        <div class="col-lg-12">
          <h3>
            Active Tasks ({{ vm.orchestraTasks.activeTasks().length || 0 }})
            <button type="button"
                    ng-if="vm.enableNewTaskButtons"
                    ng-click="vm.newTask('entry_level')"
                    ng-class="{'disabled': vm.orchestraTasks.preventNew ||
                                           vm.noTaskTimer}"
                    class="btn btn-primary btn-new-entry-task">
              New delivery task
            </button>
            <button type="button"
                    ng-if="vm.orchestraTasks.reviewerStatus &&
                           vm.enableNewTaskButtons"
                    ng-click="vm.newTask('reviewer')"
                    ng-class="{'disabled': vm.orchestraTasks.preventNew ||
                                           vm.noTaskTimer}"
                    class="btn btn-primary btn-new-review-task">
              New review task
            </button>
            <span class="warning-message"
                  ng-show="vm.newTaskError && !vm.orchestraTasks.preventNew">
              No tasks available at the moment
            </span>
            <i class="fa fa-spinner fa-spin" ng-show="vm.waiting"></i>
          </h3>
        </div>
      </div>
      <div class="row padded active-tasks">
        <div class="col-lg-3 col-md-3 col-task">
          <div taskcards="{tasks: vm.orchestraTasks.tasks.in_progress, label: 'In progress'}"
          class="task-cards-wrapper">
          </div>
        </div>
        <div class="col-lg-3 col-md-3 col-task col-waiting">
          <div taskcards="{tasks: vm.orchestraTasks.tasks.pending_review, label: 'Pending review'}"
          class="task-cards-wrapper">
          </div>
        </div>
        <div class="col-lg-3 col-md-3 col-task">
          <div taskcards="{tasks: vm.orchestraTasks.tasks.returned, label: 'Returned from reviewer'}"
          class="task-cards-wrapper">
          </div>
        </div>
        <div class="col-lg-3 col-md-3 col-task col-waiting">
          <div taskcards="{tasks: vm.orchestraTasks.tasks.pending_processing, label: 'Pending update'}"
          class="task-cards-wrapper">
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--/section-panel tasks-section -->

  <section class="section-panel tasks-section">
    <div class="container-fluid">
      <div class="row section-header">
        <div class="col-lg-12">
          <h3>
            Completed Tasks ({{ vm.orchestraTasks.tasks.complete.length || 0 }})
          </h3>
        </div>
      </div>
      <div class="row completed-tasks">
        <div class="col-lg-12 col-task">
          <div class="row">
            <div taskcards="{tasks: vm.orchestraTasks.tasks.complete, flowable: true}"></div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--/section-panel tasks-section -->
</section>
<!--/wrapper -->
