<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>
        <ion-title>
            <h1 *ngIf="badge">{{ badge.name }}</h1>
            <h1 *ngIf="!badge">{{ 'addon.badges.badges' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content [core-swipe-navigation]="badges" class="limited-width">
    <ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
    <core-loading [hideUntil]="badgeLoaded">
        <ion-item-group *ngIf="badge">
            <ion-item class="ion-text-wrap ion-text-center">
                <ion-label>
                    <img *ngIf="badge.badgeurl" class="large-avatar" [src]="badge.badgeurl" core-external-content [alt]="badge.name" />
                    <ion-badge color="danger" *ngIf="badge.dateexpire && currentTime >= badge.dateexpire">
                        {{ 'addon.badges.expired' | translate }}
                    </ion-badge>
                </ion-label>
            </ion-item>
        </ion-item-group>

        <ion-item-group *ngIf="user">
            <ion-item-divider>
                <ion-label>
                    <h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
                </ion-label>
            </ion-item-divider>
            <ion-item class="ion-text-wrap">
                <ion-label>
                    <p class="item-heading">{{ 'core.name' | translate}}</p>
                    <p>{{ user.fullname }}</p>
                </ion-label>
            </ion-item>
        </ion-item-group>

        <ng-container *ngIf="badge">
            <ion-item-group>
                <ion-item-divider>
                    <ion-label>
                        <h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
                    </ion-label>
                </ion-item-divider>
                <ion-item class="ion-text-wrap" *ngIf="badge.issuername">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.issuername' | translate}}</p>
                        <p>{{ badge.issuername }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.issuercontact">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.contact' | translate}}</p>
                        <p><a href="mailto:{{badge.issuercontact}}" core-link auto-login="no" [showBrowserWarning]="false">
                                {{ badge.issuercontact }}
                            </a></p>
                    </ion-label>
                </ion-item>
            </ion-item-group>

            <ion-item-group>
                <ion-item-divider>
                    <ion-label>
                        <h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
                    </ion-label>
                </ion-item-divider>
                <ion-item class="ion-text-wrap" *ngIf="badge.name">
                    <ion-label>
                        <p class="item-heading">{{ 'core.name' | translate}}</p>
                        <p>{{ badge.name }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.version">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.version' | translate}}</p>
                        <p>{{ badge.version }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.language">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.language' | translate}}</p>
                        <p>{{ badge.language }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.description">
                    <ion-label>
                        <p class="item-heading">{{ 'core.description' | translate}}</p>
                        <p>{{ badge.description }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.imageauthorname">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.imageauthorname' | translate}}</p>
                        <p>{{ badge.imageauthorname }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.imageauthoremail">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.imageauthoremail' | translate}}</p>
                        <p><a href="mailto:{{badge.imageauthoremail}}" core-link auto-login="no" [showBrowserWarning]="false">
                                {{ badge.imageauthoremail }}
                            </a></p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.imageauthorurl">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.imageauthorurl' | translate}}</p>
                        <p><a [href]="badge.imageauthorurl" core-link auto-login="no"> {{ badge.imageauthorurl }} </a></p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.imagecaption">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.imagecaption' | translate}}</p>
                        <p>{{ badge.imagecaption }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="course">
                    <ion-label>
                        <p class="item-heading">{{ 'core.course' | translate}}</p>
                        <p>
                            <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="courseId">
                            </core-format-text>
                        </p>
                    </ion-label>
                </ion-item>
                <!-- Criteria (not yet available) -->
            </ion-item-group>

            <ion-item-group>
                <ion-item-divider>
                    <ion-label>
                        <h2>{{ 'addon.badges.issuancedetails' | translate}}</h2>
                    </ion-label>
                </ion-item-divider>
                <ion-item class="ion-text-wrap" *ngIf="badge.dateissued">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.dateawarded' | translate}}</p>
                        <p>{{badge.dateissued * 1000 | coreFormatDate }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.dateexpire">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.expirydate' | translate}}</p>
                        <p>
                            {{ badge.dateexpire * 1000 | coreFormatDate }}
                            <span class="text-danger" *ngIf="currentTime >= badge.dateexpire">
                                {{ 'addon.badges.warnexpired' | translate }}
                            </span>
                        </p>
                    </ion-label>
                </ion-item>
                <!-- Evidence (not yet available) -->
            </ion-item-group>

            <!-- Endorsement -->
            <ion-item-group *ngIf="badge.endorsement">
                <ion-item-divider>
                    <ion-label>
                        <h2>{{ 'addon.badges.bendorsement' | translate}}</h2>
                    </ion-label>
                </ion-item-divider>
                <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issuername">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.issuername' | translate}}</p>
                        <p>{{ badge.endorsement.issuername }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issueremail">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.issueremail' | translate}}</p>
                        <p>
                            <a href="mailto:{{badge.endorsement.issueremail}}" core-link auto-login="no" [showBrowserWarning]="false">
                                {{ badge.endorsement.issueremail }}
                            </a>
                        </p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issuerurl">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.issuerurl' | translate}}</p>
                        <p><a [href]="badge.endorsement.issuerurl" core-link auto-login="no"> {{ badge.endorsement.issuerurl }} </a></p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.dateissued">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.dateawarded' | translate}}</p>
                        <p>{{ badge.endorsement.dateissued * 1000 | coreFormatDate }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.claimid">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.claimid' | translate}}</p>
                        <p><a [href]="badge.endorsement.claimid" core-link auto-login="no"> {{ badge.endorsement.claimid }} </a></p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.claimcomment">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.claimcomment' | translate}}</p>
                        <p>{{ badge.endorsement.claimcomment }}</p>
                    </ion-label>
                </ion-item>
            </ion-item-group>

            <!-- Related badges -->
            <ion-item-group *ngIf="badge.relatedbadges">
                <ion-item-divider>
                    <ion-label>
                        <h2>{{ 'addon.badges.relatedbages' | translate}}</h2>
                    </ion-label>
                </ion-item-divider>
                <ion-item class="ion-text-wrap" *ngFor="let relatedBadge of badge.relatedbadges">
                    <ion-label>
                        <p class="item-heading">{{ relatedBadge.name }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.relatedbadges.length == 0">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.norelated' | translate}}</p>
                    </ion-label>
                </ion-item>
            </ion-item-group>

            <!-- Competencies alignment -->
            <ion-item-group *ngIf="badge.alignment">
                <ion-item-divider>
                    <ion-label>
                        <h2>{{ 'addon.badges.alignment' | translate}}</h2>
                    </ion-label>
                </ion-item-divider>
                <ion-item class="ion-text-wrap" *ngFor="let alignment of badge.alignment" [href]="alignment.targeturl" core-link
                    auto-login="no">
                    <ion-label>
                        <p class="item-heading">{{ alignment.targetname }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="badge.alignment.length == 0">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.badges.noalignment' | translate}}</p>
                    </ion-label>
                </ion-item>
            </ion-item-group>
        </ng-container>
    </core-loading>
</ion-content>
