challenge-tile.jade

.challenge.tile-view(ng-show="view === 'tile'", ng-class="challenge.track")
  .active-challenge(ng-show="challenge.status === 'ACTIVE'")

    header
      a.name(ng-href="{{challenge|challengeLinks:'detail'}}", title="{{challenge.name}}", ng-show="!challenge.isPrivate") #[span {{challenge.name}}]
      span.name(title="{{challenge.name}}", ng-show="challenge.isPrivate") {{challenge.name}}

      p.subtrack-color {{challenge.subTrack | underscoreStrip}}

      challenge-links(challenge="challenge", view="'tile'")
    .challenge-card__bottom.challenge-card__bottom--active
      .challenge-details
        p.currentPhase {{challenge.userCurrentPhase}}

        .challenge-calendar(ng-show="challenge.userCurrentPhaseEndTime", ng-class="{'challenge-late' : challenge.isLate}")
          p.ends-in {{challenge.isLate ? 'Late for' : 'Ends In'}}
          p.time-remaining {{challenge.userCurrentPhaseEndTime[0]}}
          p.unit-of-time {{challenge.userCurrentPhaseEndTime[1]}}

        .stalled-challenge(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused.

        .phase-action(ng-show="challenge.userAction", ng-switch="challenge.userAction")
          a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Submit", ng-href="{{challenge|challengeLinks:'submit'}}") Submit

          .submitted(ng-switch-when="Submitted") Submitted

          // TODO: Need styling and JS logic for this one
          .registered(ng-switch-when="Registered") Registered

      // Only show if not data science track
      p.roles 
        span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
          span Role:  
          span {{challenge.userDetails.roles | listRoles}}

  .completed-challenge(
    ng-show="challenge.status === 'COMPLETED' || challenge.status === 'PAST'",
    ng-switch="challenge.track")

    header
      a.name(ng-href="{{challenge|challengeLinks:'detail'}}", title="{{challenge.name}}", ng-show="!challenge.isPrivate") #[span {{challenge.name}}]
      span.name(title="{{challenge.name}}", ng-show="challenge.isPrivate") {{challenge.name}}

      p.subtrack-color {{challenge.subTrack | underscoreStrip}}

      p.date-completed {{challenge.submissionEndDate | date : 'MMMM yyyy'}}

      .winner-ribbon(ng-show="challenge.wonFirst && !challenge.isPrivate")

    .challenge-card__bottom.challenge-card__bottom--completed
      .challenge-details(ng-switch-when="DATA_SCIENCE", ng-switch="challenge.subTrack", ng-class="challenge.track")

        div
          .marathon-score
            p.score {{challenge.pointTotal || 0 }}

            p Total Points

      .challenge-details(ng-switch-when="DEVELOP")
        dev-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate")
        .invite-only-banner(ng-show="challenge.isPrivate")
          .title INVITE-ONLY CHALLENGE
          img(ng-src=require("../../../assets/images/ico-invite-only-prj.svg"))
          span CHALLENGE INFORMATION IS CONFIDENTIAL#[br]RESULTS ARE NOT INCLUDED IN STATISTICS

      .challenge-details(ng-switch-when="DESIGN")
        design-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate")
        .invite-only-banner(ng-show="challenge.isPrivate")
          .title INVITE-ONLY CHALLENGE
          img(ng-src=require("../../../assets/images/ico-invite-only-prj.svg"))
          span CHALLENGE INFORMATION IS CONFIDENTIAL#[br]RESULTS ARE NOT INCLUDED IN STATISTICS

      // Only show if not data science track
      p.roles
        span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
          span Role:  
          span {{challenge.userDetails.roles | listRoles}}

.challenge.list-view(ng-show="view=='list'", ng-class="challenge.track")
  .active-challenge(ng-show="challenge.status === 'ACTIVE'")

    header
      a.name(ng-href="{{challenge|challengeLinks:'detail'}}", title="{{challenge.name}}", ng-show="!challenge.isPrivate") #[span {{challenge.name}}]
      span.name(title="{{challenge.name}}", ng-show="challenge.isPrivate") {{challenge.name}}
      
      p.subtrack-color {{challenge.subTrack | underscoreStrip}}

      p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]

    .challenge-details
      .challenge-info(ng-class="{'challenge-late' : challenge.isLate}")
        p.currentPhase {{challenge.userCurrentPhase}}

        p.ends-in(ng-show="challenge.userCurrentPhaseEndTime") Ends: {{challenge.userCurrentPhaseEndTime[2] | localTime}}

        p.ends-in(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused.

      .phase-action(ng-switch="challenge.userAction")
        a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Submit", ng-href="{{challenge|challengeLinks:'submit'}}") Submit

        .submitted(ng-switch-when="Submitted") Submitted

        // TODO: Need styling and JS logic for this one
        .registered(ng-switch-when="Registered") Registered

    challenge-links(challenge="challenge", view="'list'")
        
  .completed-challenge(
    ng-show="challenge.status === 'COMPLETED' || challenge.status === 'PAST'",
    ng-switch="challenge.track")

    header
      a.name(ng-href="{{challenge|challengeLinks:'detail'}}", title="{{challenge.name}}", ng-show="!challenge.isPrivate") #[span {{challenge.name}}]
      span.name(title="{{challenge.name}}", ng-show="challenge.isPrivate") {{challenge.name}}

      p.subtrack-color {{challenge.subTrack | underscoreStrip}}

      p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]

    .challenge-details(ng-switch-when="DATA_SCIENCE", ng-switch="challenge.subTrack", ng-class="challenge.track")

      .marathon-score
        p.score {{challenge.pointTotal || 0 }}

        p Total Points

    .challenge-details(ng-switch-when="DEVELOP")
      dev-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate")
      .invite-only-banner(ng-show="challenge.isPrivate")
        .invite-only-banner__description
          .title INVITE-ONLY CHALLENGE
          span CHALLENGE INFORMATION IS CONFIDENTIAL#[br]RESULTS ARE NOT INCLUDED IN STATISTICS
        img(src=require("../../../assets/images/ico-invite-only-prj.svg"))

    .challenge-details(ng-switch-when="DESIGN")
      design-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate")
      .invite-only-banner(ng-show="challenge.isPrivate")
        .invite-only-banner__description
          .title INVITE-ONLY CHALLENGE
          span CHALLENGE INFORMATION IS CONFIDENTIAL#[br]RESULTS ARE NOT INCLUDED IN STATISTICS
        img(src=require("../../../assets/images/ico-invite-only-prj.svg"))