<DSection @pageClass="badges">
  <div class="container badges">
    <h1>{{i18n "badges.title"}}</h1>

    <span>
      <PluginOutlet @name="below-badges-title" @connectorTagName="div" />
    </span>

    <div class="badge-groups">
      {{#each this.badgeGroups as |bg|}}
        <div class="badge-grouping">
          <div class="title">
            <h3>{{bg.badgeGrouping.displayName}}</h3>
          </div>
          <div class="badge-group-list">
            {{#each bg.badges as |b|}}
              <BadgeCard @badge={{b}} @username={{this.currentUser.username}} />
            {{/each}}
          </div>
        </div>
      {{/each}}
    </div>
  </div>
</DSection>