<ion-header>
    <ion-navbar core-back-button>
        <ion-title><core-format-text [text]="title"></core-format-text></ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-refresher [enabled]="eventLoaded" (ionRefresh)="refreshEvent($event)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
    <core-loading [hideUntil]="eventLoaded">
        <ion-card>
            <ion-card-content *ngIf="event">
                <ion-item text-wrap>
                    <core-icon *ngIf="event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
                    <h2><core-format-text [text]="event.name"></core-format-text></h2>
                </ion-item>
                <ion-item text-wrap>
                    <h2>{{ 'addon.calendar.eventstarttime' | translate}}</h2>
                    <p>{{ event.timestart * 1000 | coreFormatDate }}</p>
                </ion-item>
                <ion-item text-wrap *ngIf="event.timeduration > 0">
                    <h2>{{ 'addon.calendar.eventendtime' | translate}}</h2>
                    <p>{{ (event.timestart + event.timeduration) * 1000 | coreFormatDate }}</p>
                </ion-item>
                <a ion-item text-wrap *ngIf="courseName" [href]="courseUrl" core-link capture="true">
                    <h2>{{ 'core.course' | translate}}</h2>
                    <p><core-format-text [text]="courseName"></core-format-text></p>
                </a>
                <a ion-item text-wrap *ngIf="categoryPath">
                    <h2>{{ 'core.category' | translate}}</h2>
                    <p><core-format-text [text]="categoryPath"></core-format-text></p>
                </a>
                <ion-item text-wrap *ngIf="event.moduleIcon">
                    <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start alt="" role="presentation" class="core-module-icon"> {{event.moduleName}}
                </ion-item>
                <ion-item text-wrap *ngIf="event.description">
                    <p>
                        <core-format-text [text]="event.description"></core-format-text>
                    </p>
                </ion-item>
                <ion-item text-wrap *ngIf="event.location">
                    <h2>{{ 'core.location' | translate}}</h2>
                    <p>
                        <a [href]="event.encodedLocation" core-link auto-login="no">
                            <core-format-text [text]="event.location"></core-format-text>
                        </a>
                    </p>
                </ion-item>
                <ion-item *ngIf="moduleUrl">
                    <a ion-button block color="primary" [href]="moduleUrl" core-link capture="true">{{ 'addon.calendar.gotoactivity' | translate }}</a>
                </ion-item>
            </ion-card-content>
        </ion-card>

        <ion-card list *ngIf="notificationsEnabled">
            <ion-item>
                <h2>{{ 'addon.calendar.reminders' | translate }}</h2>
            </ion-item>
            <ng-container *ngFor="let reminder of reminders">
                <ion-item  *ngIf="reminder.time > 0 || defaultTime > 0" [class.item-dimmed]="(reminder.time == -1 ? (event.timestart - defaultTime) : reminder.time) <= currentTime" >
                    <p *ngIf="reminder.time == -1">{{ 'core.defaultvalue' | translate :{$a: ((event.timestart - defaultTime) * 1000) | coreFormatDate } }}</p>
                    <p *ngIf="reminder.time > 0">{{ reminder.time * 1000 | coreFormatDate }}</p>
                    <button ion-button icon-only clear="true" (click)="cancelNotification(reminder.id, $event)" [attr.aria-label]=" 'core.delete' | translate" item-end *ngIf="(reminder.time == -1 ? (event.timestart - defaultTime) : reminder.time) > currentTime">
                        <ion-icon name="trash" color="danger"></ion-icon>
                    </button>
                </ion-item>
            </ng-container>

            <ng-container *ngIf="event.timestart + event.timeduration > currentTime">
                <ion-item>
                    <ion-label stacked>{{ 'addon.calendar.setnewreminder' | translate }}</ion-label>
                    <ion-datetime [(ngModel)]="notificationTimeText" [placeholder]="'core.choosedots' | translate" [displayFormat]="notificationFormat" [min]="notificationMin" [max]="notificationMax"></ion-datetime>
                </ion-item>
                <ion-item>
                    <button ion-button block color="primary" (click)="addNotificationTime($event)" [disabled]="!notificationTimeText">{{ 'addon.calendar.setnewreminder' | translate }}</button>
                </ion-item>
            </ng-container>
        </ion-card>
    </core-loading>
</ion-content>
