<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>
        <ion-title>{{ title | translate }}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

    <core-loading [hideUntil]="loaded">
        <form [formGroup]="form" *ngIf="!error" #editEventForm>
            <!-- Event name. -->
            <ion-item class="ion-text-wrap">
                <ion-label position="stacked">
                    <h2 [core-mark-required]="true">
                        {{ 'addon.calendar.eventname' | translate }}
                    </h2>
                </ion-label>
                <ion-input type="text" name="name" [placeholder]="'addon.calendar.eventname' | translate" formControlName="name">
                </ion-input>
                <core-input-errors [control]="form.controls.name" [errorMessages]="errors"></core-input-errors>
            </ion-item>

            <!-- Date. -->
            <ion-item class="ion-text-wrap">
                <ion-label position="stacked">
                    <h2 [core-mark-required]="true">
                        {{ 'core.date' | translate }}
                    </h2>
                </ion-label>
                <ion-datetime formControlName="timestart" [placeholder]="'core.date' | translate" [displayFormat]="dateFormat"
                    [max]="maxDate" [min]="minDate">
                </ion-datetime>
                <core-input-errors [control]="form.controls.timestart" [errorMessages]="errors"></core-input-errors>
            </ion-item>

            <!-- Type. -->
            <ion-item class="ion-text-wrap addon-calendar-eventtype-container">
                <ion-label id="addon-calendar-eventtype-label">
                    <h2 [core-mark-required]="true">
                        {{ 'addon.calendar.eventkind' | translate }}
                    </h2>
                </ion-label>
                <ion-select formControlName="eventtype" aria-labelledby="addon-calendar-eventtype-label" interface="action-sheet"
                    [disabled]="eventTypes.length == 1">
                    <ion-select-option *ngFor="let type of eventTypes" [value]="type.value">
                        {{ type.name | translate }}
                    </ion-select-option>
                </ion-select>
            </ion-item>

            <!-- Category. -->
            <ion-item class="ion-text-wrap" *ngIf="typeControl.value == 'category'">
                <ion-label id="addon-calendar-category-label">
                    <h2 [core-mark-required]="true">
                        {{ 'core.category' | translate }}
                    </h2>
                </ion-label>
                <ion-select formControlName="categoryid" aria-labelledby="addon-calendar-category-label" interface="action-sheet"
                    [placeholder]="'core.noselection' | translate">
                    <ion-select-option *ngFor="let category of categories" [value]="category.id">
                        {{ category.name }}
                    </ion-select-option>
                </ion-select>
            </ion-item>

            <!-- Course. -->
            <ion-item class="ion-text-wrap" *ngIf="typeControl.value == 'course'">
                <ion-label id="addon-calendar-course-label">
                    <h2 [core-mark-required]="true">
                        {{ 'core.course' | translate }}
                    </h2>
                </ion-label>
                <ion-select formControlName="courseid" aria-labelledby="addon-calendar-course-label" interface="action-sheet"
                    [placeholder]="'core.noselection' | translate">
                    <ion-select-option *ngFor="let course of courses" [value]="course.id">{{ course.fullname }}</ion-select-option>
                </ion-select>
            </ion-item>

            <!-- Group. -->
            <ng-container *ngIf="typeControl.value == 'group'">
                <!-- Select the course. -->
                <ion-item class="ion-text-wrap">
                    <ion-label id="addon-calendar-groupcourse-label">
                        <h2 [core-mark-required]="true">
                            {{ 'core.course' | translate }}
                        </h2>
                    </ion-label>
                    <ion-select formControlName="groupcourseid" aria-labelledby="addon-calendar-groupcourse-label"
                        interface="action-sheet" [placeholder]="'core.noselection' | translate"
                        (ionChange)="groupCourseSelected($event)">
                        <ion-select-option *ngFor="let course of courses" [value]="course.id">
                            {{ course.fullname }}
                        </ion-select-option>
                    </ion-select>
                </ion-item>
                <!-- The course has no groups. -->
                <ion-item class="ion-text-wrap core-danger-item" *ngIf="!loadingGroups && courseGroupSet && !groups.length">
                    <ion-label><p>{{ 'core.coursenogroups' | translate }}</p></ion-label>
                </ion-item>
                <!-- Select the group. -->
                <ion-item class="ion-text-wrap" *ngIf="!loadingGroups && groups.length > 0">
                    <ion-label id="addon-calendar-group-label">
                        <h2 [core-mark-required]="true">
                            {{ 'core.group' | translate }}
                        </h2>
                    </ion-label>
                    <ion-select formControlName="groupid" aria-labelledby="addon-calendar-group-label" interface="action-sheet"
                        [placeholder]="'core.noselection' | translate">
                        <ion-select-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-select-option>
                    </ion-select>
                </ion-item>
                <!-- Loading groups. -->
                <ion-item class="ion-text-wrap" *ngIf="loadingGroups">
                    <ion-label><ion-spinner *ngIf="loadingGroups"></ion-spinner></ion-label>
                </ion-item>
            </ng-container>

            <!-- Advanced options. -->
            <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggleAdvanced()"
                [attr.aria-label]="(advanced ? 'core.showless' : 'core.showmore') | translate" role="button">
                <ion-icon *ngIf="!advanced" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                <ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                <ion-label>
                    <span *ngIf="!advanced">{{ 'core.showmore' | translate }}</span>
                    <span *ngIf="advanced">{{ 'core.showless' | translate }}</span>
                </ion-label>
            </ion-item-divider>

            <div [hidden]="!advanced">
                <!-- Description. -->
                <ion-item class="ion-text-wrap">
                    <ion-label position="stacked">
                        <h2>{{ 'core.description' | translate }}</h2>
                    </ion-label>
                    <core-rich-text-editor [control]="descriptionControl"
                        [placeholder]="'core.description' | translate" name="description" [component]="component"
                        [componentId]="eventId" [autoSave]="false"></core-rich-text-editor>
                </ion-item>

                <!-- Location. -->
                <ion-item class="ion-text-wrap">
                    <ion-label position="stacked"><h2>{{ 'core.location' | translate }}</h2></ion-label>
                    <ion-input type="text" name="location" [placeholder]="'core.location' | translate" formControlName="location">
                    </ion-input>
                </ion-item>

                <!-- Duration. -->
                <div class="ion-text-wrap addon-calendar-radio-container">
                    <ion-radio-group formControlName="duration">
                        <ion-item class="addon-calendar-radio-title">
                            <ion-label>
                                <h2>
                                    {{ 'addon.calendar.eventduration' | translate }}
                                </h2>
                            </ion-label>
                        </ion-item>
                        <ion-item>
                            <ion-radio slot="end" value="0"></ion-radio>
                            <ion-label>{{ 'addon.calendar.durationnone' | translate }}</ion-label>
                        </ion-item>
                        <ion-item button (click)="selectDuration('1')">
                            <ion-radio slot="end" value="1"></ion-radio>
                            <ion-label>{{ 'addon.calendar.durationuntil' | translate }}</ion-label>
                            <ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
                                [placeholder]="'addon.calendar.durationuntil' | translate"
                                [displayFormat]="dateFormat" [disabled]="form.controls.duration.value != 1">
                            </ion-datetime>
                        </ion-item>
                        <ion-item button (click)="selectDuration('2')">
                            <ion-radio slot="end" value="2"></ion-radio>
                            <ion-label>{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
                            <ion-input type="number" name="timedurationminutes" slot="end"
                                [placeholder]="'addon.calendar.durationminutes' | translate"
                                formControlName="timedurationminutes" [disabled]="form.controls.duration.value != 2"></ion-input>
                        </ion-item>
                    </ion-radio-group>
                </div>

                <!-- Repeat (for new events). -->
                <ng-container *ngIf="!eventId || eventId < 0">
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <h2>{{ 'addon.calendar.repeatevent' | translate }}</h2>
                        </ion-label>
                        <ion-checkbox slot="end" formControlName="repeat"></ion-checkbox>
                    </ion-item>
                    <ion-item class="ion-text-wrap" *ngIf="form.controls.repeat.value">
                        <ion-label position="stacked"><h2>{{ 'addon.calendar.repeatweeksl' | translate }}</h2></ion-label>
                        <ion-input type="number" name="repeats" formControlName="repeats"></ion-input>
                    </ion-item>
                </ng-container>

                <!-- Apply to all events or just this one (editing repeated events). -->
                <div *ngIf="eventRepeatId" class="ion-text-wrap addon-calendar-radio-container">
                    <ion-radio-group formControlName="repeateditall">
                        <ion-item class="addon-calendar-radio-title">
                            <ion-label>
                                <h2>
                                    {{ 'addon.calendar.repeatedevents' | translate }}
                                </h2>
                            </ion-label>
                        </ion-item>
                        <ion-item>
                            <ion-label>{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}</ion-label>
                            <ion-radio slot="end" [value]="1"></ion-radio>
                        </ion-item>
                        <ion-item>
                            <ion-label>{{ 'addon.calendar.repeateditthis' | translate }}</ion-label>
                            <ion-radio slot="end" [value]="0"></ion-radio>
                        </ion-item>
                    </ion-radio-group>
                </div>
            </div>

            <ion-item>
                <ion-label>
                    <ion-row>
                        <ion-col>
                            <ion-button expand="block" (click)="submit()" [disabled]="!form.valid">
                                {{ 'core.save' | translate }}
                            </ion-button>
                        </ion-col>
                        <ion-col *ngIf="hasOffline && eventId && eventId < 0">
                            <ion-button expand="block" color="light" (click)="discard()">{{ 'core.discard' | translate }}</ion-button>
                        </ion-col>
                    </ion-row>
                </ion-label>
            </ion-item>
        </form>
    </core-loading>
</ion-content>
