{% verbatim %}
<div class="course-report--summary">
  <div>{{ $ctrl.course.course_name }}</div>
  <div>{{ $ctrl.course.course_progress }}%</div>
  <div>
    <div class="course-report--progress">
      <div ng-style="{ width: $ctrl.course.course_progress + '%' }"></div>
    </div>
  </div>
  <div>
    <button class="btn btn-primary" ng-class="{ 'btn-inverse': $ctrl.showDetails }" ng-click="$ctrl.toggleDetails()">
      {{ $ctrl.showDetails ? 'Ocultar etapas' : 'Mostrar etapas' }}
    </button>
  </div>
</div>
<div class="course-report--details" ng-if="$ctrl.showDetails">
  <div class="activity-report">
    <div class="activity-report--step" ng-repeat-start="lesson in $ctrl.lessons track by lesson.slug">
      <div>{{ lesson.name }}</div>
      <div>{{ lesson.progress|number:0 }}%</div>
      <div>
        <div class="activity-report--progress">
          <div ng-style="{ width: lesson.progress + '%' }"></div>
        </div>
      </div>
    </div>
    <div class="activity-report--activities" ng-repeat-end>
      <div class="activity-report--activity" ng-repeat="activity in lesson.activities track by activity.position">
        <div>{{ activity.name }}</div>
        <div ng-class="{ 'done': activity.done == 'true', 'not-done': activity.done == 'false' }">
          <i class="fa" ng-class="{ 'fa-check-circle': activity.done == 'true', 'fa-times-circle': activity.done == 'false' }" aria-hidden="true"></i>
        </div>
        <div>{{ activity.done == 'true' ? 'Feita' : 'Não feita' }}</div>
      </div>
    </div>
  </div>
</div>
{% endverbatim %}