<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>
        <ion-title>
            <h1>{{ 'core.settings.preferences' | translate}}</h1>
        </ion-title>
        <ion-buttons slot="end">
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-split-view>
        <ion-refresher slot="fixed" [disabled]="!handlers.loaded" (ionRefresh)="refreshData($event.target)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
        </ion-refresher>
        <core-loading [hideUntil]="handlers.loaded">
            <ion-list>
                <ion-item *ngFor="let handler of handlerItems" class="core-settings-handler" [ngClass]="handler.class"
                    [attr.aria-label]="handler.title | translate" (click)="!handler.toggle && handlers.select(handler)"
                    [button]="!handler.toggle" [detail]="!handler.toggle" [attr.aria-current]="handlers.getItemAriaCurrent(handler)">
                    <ion-icon [name]="handler.icon" slot="start" *ngIf="handler.icon" aria-hidden="true">
                    </ion-icon>
                    <ion-label>
                        <p class="item-heading">{{ handler.title | translate}}</p>
                    </ion-label>
                    <ion-toggle *ngIf="handler.toggle" [(ngModel)]="handler.toggleChecked"
                        (ionChange)="handler.toggle($event.detail.checked)">
                    </ion-toggle>
                </ion-item>
            </ion-list>

            <ion-card>
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <p class="item-heading">{{ 'core.settings.synchronizenow' | translate }}</p>
                        <p>
                            {{ 'core.settings.synchronizenowhelp' | translate }}
                        </p>
                    </ion-label>
                    <core-button-with-spinner [loading]="isSynchronizing()" slot="end">
                        <ion-button fill="clear" (click)="synchronize()" [attr.aria-label]="'core.settings.synchronizenow' | translate"
                            [disabled]="!isOnline || (dataSaver && limitedConnection)">
                            <ion-icon name="fas-rotate" slot="icon-only" aria-hidden="true"></ion-icon>
                        </ion-button>
                    </core-button-with-spinner>
                </ion-item>
                <ion-item class="core-warning-item ion-text-wrap" *ngIf="!isOnline || (dataSaver && limitedConnection)">
                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
                    <ion-label>
                        <ng-container *ngIf="isOnline && dataSaver && limitedConnection">
                            {{ 'core.settings.connectwifitosync' | translate }}</ng-container>
                        <ng-container *ngIf="!isOnline">{{ 'core.settings.connecttosync' | translate }}</ng-container>
                    </ion-label>
                </ion-item>
            </ion-card>
        </core-loading>
    </core-split-view>
</ion-content>
