<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'core.courses.filtermycourses' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                <ion-icon name="fas-times" slot="icon-only" aria-hidden="true"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        <ion-radio-group [(ngModel)]="options.timeFilterSelected">
            <ion-item class="ion-text-wrap" *ngIf="options.show.all">
                <ion-label>{{'addon.block_myoverview.all' | translate}}</ion-label>
                <ion-radio slot="end" value="all"></ion-radio>
            </ion-item>
            <ion-item class="ion-text-wrap" *ngIf="options.show.inprogress">
                <ion-label>{{'addon.block_myoverview.inprogress' | translate}}</ion-label>
                <ion-radio slot="end" value="inprogress"></ion-radio>
            </ion-item>
            <ion-item class="ion-text-wrap" *ngIf="options.show.future">
                <ion-label>{{'addon.block_myoverview.future' | translate}}</ion-label>
                <ion-radio slot="end" value="future"></ion-radio>
            </ion-item>
            <ion-item class="ion-text-wrap" *ngIf="options.show.past">
                <ion-label>{{'addon.block_myoverview.past' | translate}}</ion-label>
                <ion-radio slot="end" value="past"></ion-radio>
            </ion-item>
        </ion-radio-group>

        <core-spacer *ngIf="options.show.custom"></core-spacer>
        <ion-radio-group [(ngModel)]="options.customSelected" *ngIf="options.show.custom" allowEmptySelection="true">
            <ion-item class="ion-text-wrap" *ngFor="let customOption of options.customFilters">
                <ion-label>{{customOption.name}}</ion-label>
                <ion-radio slot="end" [value]="customOption.value"></ion-radio>
            </ion-item>
        </ion-radio-group>

        <core-spacer></core-spacer>
        <ion-item *ngIf="options.show.favourite">
            <ion-label>{{ 'addon.block_myoverview.aria:favourites' | translate }}</ion-label>
            <ion-toggle [(ngModel)]="options.favouriteSelected"></ion-toggle>
        </ion-item>

        <ion-item *ngIf="options.show.hidden">
            <ion-label>{{ 'addon.block_myoverview.aria:hiddencourses' | translate }}</ion-label>
            <ion-toggle [(ngModel)]="options.hiddenSelected"></ion-toggle>
        </ion-item>
    </ion-list>
</ion-content>
<ion-footer class="ion-padding">
    <ion-button (click)="apply()" expand="block" [attr.aria-label]="'core.applyfilters' | translate" class="ion-text-wrap">
        {{ 'core.applyfilters' | translate }}
    </ion-button>
</ion-footer>
