<section class="section-panel todo-list">
  <div class="container-fluid">
    <div class="row section-header">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <h3>
          Todo List
          <a class="btn"
               ng-if="todoList.canSendToPending()"
               ng-click="todoList.sendToPending()">
            Send to pending
          </a>
        </h3>
      </div>
    </div>
    <div class="row section-body" ng-if="todoList.ready">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <form class="new-todo">
          <select name="todoList" id="todoList" ng-model="todoList.newTodoTaskId">
            <option value="" selected>Select owner</option>
            <option value="{{task.id}}" ng-repeat="task in todoList.possibleTasks">{{todoList.steps[task.step_slug].name}}</option>
          </select>
          <input class="new-todo__description"
                 type="text"
                 ng-model="todoList.newTodoDescription"
                 placeholder="Description">
          <button type="submit"
             class="btn btn-primary btn-sm edit-save-handle"
             ng-disabled="!todoList.canAddTodo()"
             ng-click="todoList.addTodo()">
            Add
          </button>
        </form>
      </div>

      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="existing-todos">
          <div class="todo"
               ng-repeat="todo in todoList.todos">
            <label>
              <input type="checkbox"
                     ng-model="todo.completed"
                     ng-click="todoList.updateTodo(todo)">
              <span class="todo__role">{{todoList.steps[todoList.taskSlugs[todo.task]].name}}:&nbsp;</span>
              <span class="todo__description">{{todo.description}}</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
