<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>
        <ion-title>
            <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-loading [hideUntil]="loaded">
        <div class="list-item-limited-width">

            <ion-item class="ion-text-wrap core-notification-title" lines="full">
                <core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom"
                    [fullname]="userFromFullName">
                    <div class="core-avatar-extra-img" *ngIf="iconUrl && !modname">
                        <img [src]="iconUrl" alt="" role="presentation">
                    </div>
                    <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false">
                    </core-mod-icon>
                </core-user-avatar>

                <ng-container *ngIf="userIdFrom <= 0 && iconUrl">
                    <div class="core-notification-icon" *ngIf="!modname" slot="start">
                        <img [src]="iconUrl" alt="" role="presentation">
                    </div>
                    <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false" class="core-notification-icon"
                        slot="start">
                    </core-mod-icon>
                </ng-container>

                <ion-label>
                    <p class="item-heading">
                        <core-format-text [text]="subject" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
                        </core-format-text>
                    </p>
                    <p>{{ timecreated | coreTimeAgo }}<ng-container *ngIf="userIdFrom > 0"> · {{
                            userFromFullName }}</ng-container>
                    </p>
                </ion-label>
            </ion-item>
            <ion-item class="ion-text-wrap core-notification-body">
                <ion-label>
                    <core-format-text [text]="content | coreCreateLinks" contextLevel="system" [contextInstanceId]="0">
                    </core-format-text>
                </ion-label>
            </ion-item>
        </div>

        <div collapsible-footer appearOnBottom *ngIf="loaded && actions && actions.length > 0" slot="fixed">
            <div class="list-item-limited-width adaptable-buttons-row">
                <ion-button expand="block" (click)="action.action()" *ngFor="let action of actions">
                    <ion-icon slot="start" name="{{action.icon}}" aria-hidden="true"></ion-icon>
                    {{ action.message | translate }}
                </ion-button>
            </div>
        </div>
    </core-loading>
</ion-content>
