<div ng-if="vm.showGamification" class="gamification">
    <div ng-if="vm.data.badges.length > 0" class="profile-badges">
        <h3>{{ 'Badges' | translate }}</h3>
        <span ng-repeat="item in vm.data.badges" style="cursor:pointer" ng-click="vm.showDialog(vm.email, vm.name)">
            <img ng-src="{{item.picture}}" title="{{ 'Badge' | translate }}: {{item.title}}" class="image-profile-badge" />
        </span>
    </div>
    <div ng-if="vm.data.certificates.length > 0" class="profile-certificates">
        <h3>{{ 'Certificates' | translate }}</h3>
        <span ng-repeat="item in vm.data.certificates" style="cursor:pointer" ng-click="vm.showDialog(vm.email, vm.name)">
            <img ng-src="{{item.picture}}" title="{{ 'Certificate' | translate }}: {{item.title}}" class="image-profile-certificate" />
        </span>
    </div>
    <div ng-if="vm.data.skills.length > 0" class="profile-skills">
        <h3>{{ 'Skills' | translate }}</h3>
        <span ng-repeat="item in vm.data.skills" style="cursor:pointer" ng-click="vm.showDialog(vm.email, vm.name)">
            <img ng-src="{{item.picture}}" title="{{ 'Skill' | translate }}: {{item.title}}" class="image-profile-skill" />
        </span>
    </div>
</div>