<ion-header class="no-title">
    <ion-toolbar>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
    <ion-list>
        <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]">
            <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
            <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end"></ion-toggle>
        </ion-item>
        <core-spacer *ngIf="filter.course || filter.category || filter.group"></core-spacer>
        <ng-container *ngIf="filter.course || filter.category || filter.group">
            <ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
                <ion-item class="ion-text-wrap" *ngFor="let course of sortedCourses">
                    <ion-label>
                        <core-format-text [text]="course.shortname"></core-format-text>
                    </ion-label>
                    <ion-radio slot="end" [value]="course.id"></ion-radio>
                </ion-item>
            </ion-radio-group>
        </ng-container>
    </ion-list>
</ion-content>
