my-challenges.jade

.my-challenges-container
  .my-challenges

    .page-header
      page-state-header(handle="{{vm.handle}}", page-title="My Challenges", hide-money="true", show-back-link="true", default-state="dashboard")

    .content
      .never-participated(ng-if="vm.neverParticipated")
        empty-state-placeholder(state-name="my-challenges-never-participated", show="vm.neverParticipated", theme="offwhite")
      section.participated(ng-if="!vm.neverParticipated")
        .top
          .filters
            a(ng-click="vm.statusFilter !== 'active' && vm.changeFilter('active')", ng-class="{disabled: vm.statusFilter == 'active'}") Active
            span   |  
            a(ng-click="vm.statusFilter !== 'completed' && vm.changeFilter('completed')", ng-class="{disabled: vm.statusFilter == 'completed'}") Past

          .challenge-view-toggle
            button.tile(ng-click="vm.changeView('tile')", ng-class="{ disabled: vm.view === 'tile' }") Grid

            button.list(ng-click="vm.changeView('list')", ng-class="{ disabled: vm.view === 'list' }") List

        section.noChallenges(ng-show="vm.myChallenges.length === 0 && vm.loading === 'ready'")

          empty-state-placeholder(state-name="my-challenges-past", show="vm.statusFilter === 'completed'", theme="offwhite")
          empty-state-placeholder(state-name="my-challenges-active", show="vm.statusFilter === 'active'", theme="offwhite")

        .hasChallenges(ng-show="vm.myChallenges.length", state="vm.loading")

          .data(ng-class="vm.view + '-view'")
            challenge-tile(
              ng-repeat="challenge in vm.myChallenges | orderBy:vm.orderBy:true",
              challenge="challenge", view="vm.view", ng-class="vm.view + '-view'")

          tc-section.load-more-section(state="vm.loading")