<ion-header>
    <ion-navbar core-back-button>
        <ion-title>{{ title }}</ion-title>
    </ion-navbar>
</ion-header>
<core-split-view>
    <ion-content>
        <ion-refresher [enabled]="competenciesLoaded" (ionRefresh)="refreshCompetencies($event)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
        </ion-refresher>
        <core-loading [hideUntil]="competenciesLoaded">
            <ion-list>
                <a ion-item text-wrap *ngFor="let competency of competencies" [title]="competency.competency.shortname" (click)="openCompetency(competency.competency.id)" [class.core-split-item-selected]="competency.competency.id == competencyId">
                    <h2>{{ competency.competency.shortname }} <em>{{competency.competency.idnumber}}</em></h2>
                    <ion-badge item-end *ngIf="competency.usercompetency" [color]="competency.usercompetency.proficiency ? 'success' : 'danger'">{{ competency.usercompetency.gradename }}</ion-badge>
                    <ion-badge item-end *ngIf="competency.usercompetencycourse" [color]="competency.usercompetencycourse.proficiency ? 'success' : 'danger'">{{ competency.usercompetencycourse.gradename }}</ion-badge>
                </a>
            </ion-list>
        </core-loading>
    </ion-content>
</core-split-view>