<div ng-controller="TasksController">
  <div ng-repeat="task in tasks()">
    <div class="row">
      <div class="col-md-12">
          <h3>
            <i class="spinner spinner-xs spinner-inline" ng-show="task.status=='started'"></i>
            {{ task | taskTitle }}
            <a ng-show="task.status=='completed'" ng-click="delete(task)" style="cursor:pointer">
              <i class="pficon pficon-close btn-sm"></i>
            </a>
          </h3>
          <div ng-if="task.helpLinks.length">
            <h4>Helpful Links</h4>
            <ul class="list-unstyled">
              <li ng-repeat="link in task.helpLinks">
                <a href="{{ link.link }}" target="_blank">{{ link.title }}</a>
              </li>
            </ul>
          </div>
          <div ng-show="task.hasErrors">
            <a href="javascript:;" ng-click="expanded = !expanded">
              <span ng-hide="expanded">Show details</span>
              <span ng-show="expanded">Hide details</span>
            </a>
          </div>
          <div ng-show="!task.hasErrors || expanded">
            <!-- Don't show a close button for each alert since we have one above for all tasks. -->
            <alerts alerts="task.alerts" hide-close-button="true"></alerts>
          </div>
      </div>
    </div>
  </div>
</div>
