<section class="section-panel todo-list">
  <div class="overlay" ng-if="teamInfoCard.loading">
    <div class="spinner"></div>
  </div>
  <div class="container-fluid">
    <div class="row section-header">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <h3>
          Team info
          <a class="btn"
             ng-if="teamInfoCard.isProjectAdmin"
             ng-href="project/{{teamInfoCard.projectId}}"
             target="_blank">
            Project Management
          </a>
          <a class="btn"
             ng-if="teamInfoCard.isProjectAdmin &&
                    (teamInfoCard.projectStatus === 'Active'
                    || teamInfoCard.projectStatus === 'Paused')"
             ng-click="teamInfoCard.togglePauseProject()">
             {{teamInfoCard.projectStatus == 'Paused' ? 'Unpause' : 'Pause'}} project
          </a>
        </h3>
      </div>
    </div>
    <div class="row section-body">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <table class="table table-striped">
          <thead>
            <th>Role</th>
            <th>Username</th>
            <th>Name</th>
            <th>Recorded time spent</th>
            <th>Status</th>
          </thead>
          <tbody>
            <tr ng-repeat="assignment in teamInfoCard.assignments">
              <td>{{assignment.role}}</td>
              <td>
                <div ng-if="!teamInfoCard.isProjectAdmin || !teamInfoCard.isTaskStaffable(assignment.task_status)">{{assignment.worker.username}}</div>
                <input type="text"
                  ng-if="teamInfoCard.isProjectAdmin && teamInfoCard.isTaskStaffable(assignment.task_status)"
                  ng-keydown="$event.keyCode === 13 && teamInfoCard.handleAssignmentKeydown(assignment.task_id, assignment.id, assignment.stepSlug, assignment.worker)"
                  ng-model="teamInfoCard.assignmentInput[assignment.stepSlug]" />
                <button
                  class="btn btn-default btn-xs"
                  ng-if="teamInfoCard.isProjectAdmin && teamInfoCard.isTaskStaffable(assignment.task_status)"
                  ng-disabled="teamInfoCard.isStaffBotRequestBtnDisabled(assignment.stepSlug)"
                  ng-click="teamInfoCard.staff(assignment.task_id, assignment.stepSlug)">
                  {{
                    teamInfoCard.sentStaffBotRequest[assignment.stepSlug]
                      ? teamInfoCard.sentStaffBotRequest[assignment.stepSlug]
                      : 'Restaff'
                  }}
                </button>
              </td>
              <td>{{assignment.worker.first_name}} {{assignment.worker.last_name}}</td>
              <td>{{assignment.recordedTime}}</td>
              <td>
                {{assignment.task_status}}
                <button type="submit"
                        class="btn btn-default btn-sm"
                        ng-if="teamInfoCard.isProjectAdmin &&
                               assignment.task_status == 'Processing' &&
                               assignment.stepSlug != teamInfoCard.step.slug"
                        ng-click="teamInfoCard.submitTask(assignment.task_id)">
                  Submit
                </button>
              </td>
            </tr>
            <tr ng-if="teamInfoCard.isProjectAdmin">
              <td colspan="5">
                <a
                  class="btn"
                  ng-click="teamInfoCard.toggleShowUnassigned()">
                  {{teamInfoCard.showUnassigned ? 'Hide unassigned' : 'Show unassigned'}}
                </a>
              </td>
            </tr>
            <tr
              ng-if="teamInfoCard.showUnassigned"
              ng-repeat="unassigned in teamInfoCard.unassigned">
              <td>{{unassigned.role}}</td>
              <td>
                <input type="text"
                  placeholder="Username"
                  ng-keydown="$event.keyCode === 13 && teamInfoCard.handleAssignmentKeydown(unassigned.task_id, '', unassigned.stepSlug, unassigned.worker)"
                  ng-model="teamInfoCard.assignmentInput[unassigned.stepSlug]" />
                <button
                  class="btn btn-default btn-xs"
                  ng-disabled="teamInfoCard.isStaffBotRequestBtnDisabled(unassigned.stepSlug)"
                  ng-if="teamInfoCard.isTaskStaffable(unassigned.task_status)"
                  ng-click="teamInfoCard.staff(unassigned.task_id, unassigned.stepSlug)">
                  {{
                    teamInfoCard.sentStaffBotRequest[unassigned.stepSlug]
                      ? teamInfoCard.sentStaffBotRequest[unassigned.stepSlug]
                      : 'Staff'
                  }}
                </button>
              </td>
              <td></td>
              <td>{{unassigned.recordedTime}}</td>
              <td>{{unassigned.task_status}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
