extends /templates/kinds/user

block append content
  .btn-group.pull-right
    button#grid-layout-button.btn.btn-default(data-layout='grid', class=activeLayout==='grid' ? 'active' : '') Grid
    button#table-layout-button.btn.btn-default(data-layout='table', class=activeLayout==='table' ? 'active' : '') Table
  if achievementsByCategory
    if activeLayout === 'grid'
      .grid-layout
        each achievements, category in achievementsByCategory
          .row
            h2.achievement-category-title=category.charAt(0).toUpperCase() + category.slice(1)
            each achievement, index in achievements
              - var title = achievement.get('name');
              - var description = achievement.get('description');
              - var locked = ! achievement.get('unlocked');
              - var style = achievement.getStyle()
              - var imgURL = achievement.getImageURL();
              if locked
                - var imgURL = achievement.getLockedImageURL();
              else
                - var imgURL = achievement.getImageURL();
              .col-lg-4.col-xs-12
                include ../achievements/achievement-popup
    else if activeLayout === 'table'
      .table-layout
        if earnedAchievements.length
          table.table
            tr
              th Name
              th Description
              th Date
              th Amount
              th XP
            each earnedAchievement in earnedAchievements.models
              - var achievement = earnedAchievement.get('achievement');
              tr
                td= achievement.get('name')
                td= achievement.get('description')
                td= moment().format("MMMM Do YYYY", earnedAchievement.get('changed'))
                if achievement.isRepeatable()
                  td= earnedAchievement.get('achievedAmount')
                else
                  td
                td= earnedAchievement.get('earnedPoints')
        else
          .panel#no-achievements
            .panel-body No achievements earned yet.
    else
      div How did you even do that?