<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-buttons slot="end">
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<core-navbar-buttons slot="end">
    <core-context-menu>
        <core-context-menu-item *ngFor="let handler of processorHandlers" [priority]="handler.priority"
            [content]="handler.label | translate" (action)="openExtraPreferences(handler)" [iconAction]="handler.icon">
        </core-context-menu-item>
    </core-context-menu>
</core-navbar-buttons>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!preferencesLoaded" (ionRefresh)="refreshPreferences($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
    <core-loading [hideUntil]="preferencesLoaded">
        <ion-card>
            <ion-item class="ion-text-wrap" *ngIf="preferences">
                <ion-label>
                    <p class="item-heading">{{ 'addon.notifications.allownotifications' | translate }}</p>
                </ion-label>
                <ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)" slot="end"></ion-toggle>
            </ion-item>
            <ion-item class="ion-text-wrap" *ngIf="canChangeSound">
                <ion-label>
                    <p class="item-heading">{{ 'addon.notifications.playsound' | translate }}</p>
                </ion-label>
                <ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)" slot="end">
                </ion-toggle>
            </ion-item>
        </ion-card>

        <ion-card>
            <ion-item class="ion-text-wrap only-links" *ngIf="preferences?.processors?.length" lines="none" [button]="false">
                <ion-label class="addon-notification-type-form">
                    <p class="item-heading">{{ 'addon.notifications.typeofnotification' | translate }}</p>
                </ion-label>
                <!-- Show processor selector. -->
                <ion-select [(ngModel)]="currentProcessorName" (ionChange)="changeProcessor($event)" interface="popover">
                    <ion-select-option class="ion-text-wrap" *ngFor="let processor of preferences?.processors" [value]="processor.name">
                        {{ processor.displayname }}
                    </ion-select-option>
                </ion-select>
            </ion-item>

            <ng-container *ngIf="loggedInOffLegacyMode">
                <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}"></ng-container>
            </ng-container>

            <ng-container *ngIf="!loggedInOffLegacyMode">
                <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}"></ng-container>
            </ng-container>
        </ion-card>
    </core-loading>

</ion-content>


<!-- 3.11 downwards version -->
<ng-template #legacySettings let-preferences="preferences">
    <ng-container *ngFor="let component of components" class="ion-margin-top">
        <ion-card-header class="ion-no-padding">
            <ion-item class="ion-text-wrap divider">
                <ion-label class="ion-text-wrap">
                    <ion-row class="ion-no-padding">
                        <ion-col class="ion-no-padding">
                            <p class="item-heading">{{ component.displayname }}</p>
                        </ion-col>
                        <ion-col size="2" class="ion-text-center ion-no-padding ion-hide-md-down">
                            <p>{{ 'core.settings.loggedin' | translate }}</p>
                        </ion-col>
                        <ion-col size="2" class="ion-text-center ion-no-padding ion-hide-md-down">
                            <p>{{ 'core.settings.loggedoff' | translate }}</p>
                        </ion-col>
                    </ion-row>
                </ion-label>
            </ion-item>
        </ion-card-header>
        <ng-container *ngFor="let notification of component.notifications">
            <!-- Tablet view -->
            <ion-item class="ion-text-wrap ion-hide-md-down addon-notifications-table-content only-links">
                <ion-label>
                    <ion-row class="ion-no-padding ion-align-items-center">
                        <ion-col class="ion-margin-horizontal ion-no-padding">
                            <p class="item-heading">{{ notification.displayname }}</p>
                        </ion-col>
                        <ion-col size="2" class="ion-text-center ion-no-padding" *ngFor="let state of ['loggedin', 'loggedoff']">
                            <ng-container *ngIf="preferences!.enableall && notification.processorsByName[currentProcessorName][state]">
                                <!-- If notifications enabled, show toggle. -->
                                <core-button-with-spinner *ngIf="!notification.processorsByName[currentProcessorName].locked"
                                    [loading]="notification.processorsByName[currentProcessorName][state].updating">
                                    <ion-toggle [(ngModel)]="notification.processorsByName[currentProcessorName][state].checked"
                                        (ngModelChange)="changePreferenceLegacy(notification, state)">
                                    </ion-toggle>
                                </core-button-with-spinner>
                                <span class="text-gray" *ngIf="notification.processorsByName[currentProcessorName].locked &&
                                    notification.processorsByName[currentProcessorName][state].checked">
                                    {{'core.settings.forced' | translate }}
                                </span>
                                <span class="text-gray" *ngIf="notification.processorsByName[currentProcessorName].locked &&
                                    !notification.processorsByName[currentProcessorName][state].checked">
                                    {{'core.settings.disallowed' | translate }}
                                </span>
                            </ng-container>
                            <!-- If notifications are disabled, show "Disabled" instead of toggle. -->
                            <span *ngIf="!preferences!.enableall" class="text-gray">{{ 'core.settings.disabled' | translate }}</span>
                        </ion-col>
                    </ion-row>
                </ion-label>
            </ion-item>

            <!-- Phone view -->
            <ion-item class="ion-text-wrap ion-no-margin ion-hide-md-up">
                <ion-label>
                    <p class="item-heading">{{ notification.displayname }}</p>
                </ion-label>
            </ion-item>
            <!-- If notifications enabled, show toggles. If disabled, show "Disabled" instead of toggle. -->
            <ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap ion-hide-md-up">
                <ion-label class="ion-margin-horizontal">
                    <p>{{ 'core.settings.' + state | translate }}</p>
                </ion-label>
                <div slot="end" *ngIf="preferences!.enableall && notification.processorsByName[currentProcessorName][state]">
                    <core-button-with-spinner *ngIf="!notification.processorsByName[currentProcessorName].locked"
                        [loading]="notification.processorsByName[currentProcessorName][state].updating">
                        <ion-toggle *ngIf="!notification.processorsByName[currentProcessorName].locked"
                            [(ngModel)]="notification.processorsByName[currentProcessorName][state].checked"
                            (ngModelChange)="changePreferenceLegacy(notification, state)">
                        </ion-toggle>
                    </core-button-with-spinner>
                    <span class="text-gray" *ngIf="notification.processorsByName[currentProcessorName].locked &&
                        notification.processorsByName[currentProcessorName][state].checked">
                        {{'core.settings.forced' | translate }}
                    </span>
                    <span class="text-gray" *ngIf="notification.processorsByName[currentProcessorName].locked &&
                        !notification.processorsByName[currentProcessorName][state].checked">
                        {{'core.settings.disallowed' | translate }}
                    </span>
                </div>
                <span class="text-gray" slot="end" *ngIf="!preferences!.enableall">{{ 'core.settings.disabled' | translate }}</span>
            </ion-item>
        </ng-container>
    </ng-container>
</ng-template>

<!-- 4.0 onwards version -->
<ng-template #settings let-preferences="preferences">
    <ng-container *ngFor="let component of components" class="ion-margin-top">
        <ion-item-divider class="ion-text-wrap">
            <ion-label>
                <p class="item-heading">{{ component.displayname }}</p>
            </ion-label>
        </ion-item-divider>
        <ng-container *ngFor="let notification of component.notifications">
            <!-- If notifications enabled, show toggles. If disabled, show "Disabled" instead of toggle. -->
            <ion-item class="ion-text-wrap">
                <ion-label>
                    <p>{{ notification.displayname }}</p>
                </ion-label>

                <div slot="end" *ngIf="preferences!.enableall">
                    <core-button-with-spinner *ngIf="!notification.processorsByName[currentProcessorName].locked"
                        [loading]="notification.processorsByName[currentProcessorName].updating">
                        <ion-toggle *ngIf="!notification.processorsByName[currentProcessorName].locked"
                            [(ngModel)]="notification.processorsByName[currentProcessorName].enabled"
                            (ngModelChange)="changePreference(notification)">
                        </ion-toggle>
                    </core-button-with-spinner>
                    <span class="text-gray" *ngIf=" notification.processorsByName[currentProcessorName].locked &&
                        notification.processorsByName[currentProcessorName].enabled">
                        {{'core.settings.forced' | translate }}
                    </span>
                    <span class="text-gray" *ngIf=" notification.processorsByName[currentProcessorName].locked &&
                        !notification.processorsByName[currentProcessorName].enabled">
                        {{'core.settings.disallowed' | translate }}
                    </span>
                </div>
                <span class="text-gray" slot="end" *ngIf="!preferences!.enableall">{{ 'core.settings.disabled' | translate }}</span>
            </ion-item>
        </ng-container>
    </ng-container>
</ng-template>
