<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Achievements for' | translate}} {{name}}</h1>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-pills">
                <li data-ng-class="{active: displayMode==1}"><a ng-click="displayMode = 1" href="">{{'Badges' | translate}}</a></li>
                <li data-ng-class="{active: displayMode==2}"><a ng-click="displayMode = 2" href="">{{'Certificates'  | translate}}</a></li>
                <li data-ng-class="{active: displayMode==3}"><a ng-click="displayMode = 3" href="">{{'Skills' | translate}}</a></li>
                <li data-ng-class="{active: displayMode==4}"><a ng-click="displayMode = 4" href="">{{'Accolades' | translate}}</a></li>
            </ul>
        </div>
    </div>
    <br />
    <div style="height:400px;overflow-y:scroll;overflow-x:hidden">
        <div ng-show="displayMode == 1">
            <div class="row">
                <div class="col-xs-12" ng-show="!data.badges.length">
                    {{'There has not been assigned any badges yet..' | translate}}
                </div>
                <table class="table" ng-show="data.badges.length">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{'Title' | translate}}</th>
                            <th>{{'Description' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody class="valign-middle">
                        <tr ng-repeat="item in data.badges">
                            <td>{{$index+1}}</td>
                            <td>
                                <img alt="" style="height:26px;width:26px;border-radius:30px;" ng-src="{{item.picture}}">
                                {{item.title}}
                            </td>
                            <td>
                                {{item.description}}
                                <br />
                                <span ng-if="item.expires">{{'Expires' | translate }} {{item.expireDate | wizdom365GfFormatDate |  date:'dd/MM-yyyy'}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div ng-show="displayMode == 2">
            <div class="row">
                <div class="col-xs-12" ng-show="!data.certificates.length">
                    {{'There has not been assigned any certificates yet..' | translate}}
                </div>
                <table class="table" ng-show="data.certificates.length">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{'Title' | translate}}</th>
                            <th>{{'Description' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody class="valign-middle">
                        <tr ng-repeat="item in data.certificates">
                            <td>{{$index+1}}</td>
                            <td>
                                <img alt="" style="height:26px;width:26px;border-radius:30px;" ng-src="{{item.picture}}">
                                {{item.title}}
                            </td>
                            <td>
                                {{item.description}}
                                <br />
                                <span ng-if="item.expires">{{'Expires' | translate }} {{item.expireDate | wizdom365GfFormatDate |  date:'dd/MM-yyyy'}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div ng-show="displayMode == 3">
            <div class="row">
                <div class="col-xs-12" ng-show="!data.skills.length">
                    {{'No skills has been assigned yet..' | translate}}
                </div>
                <table class="table" ng-show="data.skills.length">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{'Title' | translate}}</th>
                            <th>{{'Description' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody class="valign-middle">
                        <tr ng-repeat="item in data.skills">
                            <td>{{$index+1}}</td>
                            <td>
                                <img alt="" style="height:26px;width:26px;border-radius:30px;" ng-src="{{item.picture}}">
                                {{item.title}}
                            </td>
                            <td>
                                <div class="progress" style="margin-bottom:8px!important;margin-top:8px!important"><div class="progress-bar progress-bar-info" ng-style="{'width':item.currenctProcent + '%'}"></div></div>
                                <span><b>{{item.currentLevel.name}}({{item.currenctProcent}}% {{'of' | translate}} 100%)</b></span>
                                <br />
                                {{item.description}}
                                <br />
                                <span ng-if="item.isDegraded">{{'Is degraded on' | translate}} {{item.degradationDate | wizdom365GfFormatDate |  date:'dd/MM-yyyy'}} {{'with' | translate}} {{item.degradation.points}}%</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div ng-show="displayMode == 4">
            <div ng-show="!data.isOwnAchievements">
                <br />
                <textarea class="form-control" ng-model="content"></textarea><br />
                <button class="btn btn-primary" ng-click="addAccolade()">{{'Add accolade' | translate}}</button>
            </div>
            <hr class="no-panel-padding-h panel-wide">
            <span ng-hide="data.accolades.length">
                {{'No accolades has been submitted yet..' | translate}}
            </span>
            <div ng-repeat="m in data.accolades | wizdom365GfOrderObjectBy: 'date':true">
                <div class="row">
                    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
                        <div style="display:inline-block;" wizdom365-presence-picture="" size="SMALLROUNDED" email="m.author.loginName" name="m.author.displayName"></div>             
                    </div>
                    <div class="col-xs-10 col-sm-11 col-md-11 col-lg-11">
                        <b>{{m.author.displayName}}</b> | <span style="font-style:italic"><span am-time-ago="{{m.date | wizdom365GfFormatDate}}"></span></span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                         {{m.content}}
                    </div>
                </div>
                <hr class="no-panel-padding-h panel-wide">
            </div>
        </div>
    </div>
    <div wizdom365-spinner="" loading="loading"></div>
</div>
<div class="modal-footer">
    <button class="btn btn-default wiz-btn-padding" ng-click="cancel();">{{'Close' | translate}}</button>
</div>