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' : '')
      i.glyphicon.glyphicon-th
    button#table-layout-button.btn.btn-default(data-layout='table', class=activeLayout==='table' ? 'active' : '')
      i.glyphicon.glyphicon-th-list
  if achievementsByCategory
    if activeLayout === 'grid'
      .grid-layout
        each achievements, category in achievementsByCategory
          .row
            h2.achievement-category-title(data-i18n="category_#{category}")=category
            each achievement, index in achievements
              - var title = achievement.i18nName();
              - var description = achievement.i18nDescription();
              - 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(data-i18n="general.name") Name
              th(data-i18n="general.description") Description
              th(data-i18n="general.date") Date
              th(data-i18n="achievements.amount_achieved") Amount
              th XP
            each earnedAchievement in earnedAchievements.models
              - var achievement = earnedAchievement.get('achievement');
              tr
                td= achievement.i18nName()
                td= achievement.i18nDescription()
                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(data-i18n="user.no_achievements") No achievements earned yet.
    else
      div How did you even do that?