<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'core.settings.synchronization' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <core-navbar-buttons>
                <ion-button (click)="showInfo()" [attr.aria-label]="'core.info' | translate">
                    <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
                </ion-button>
            </core-navbar-buttons>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <core-loading [hideUntil]="sitesLoaded">
        <ion-list class="limited-width">
            <ion-item-divider>
                <ion-label>
                    <h2>{{ 'core.settings.syncsettings' | translate }}</h2>
                </ion-label>
            </ion-item-divider>
            <ion-item class="ion-text-wrap ion-no-validation">
                <ion-toggle [(ngModel)]="dataSaver" (ngModelChange)="syncOnlyOnWifiChanged()">
                    {{ 'core.settings.syncdatasaver' | translate }}
                </ion-toggle>
            </ion-item>

            <ion-card class="core-warning-card" *ngIf="!isOnline || (dataSaver && limitedConnection)">
                <ion-item class="ion-text-wrap">
                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                    <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>

            <ng-container *ngIf="isOnline && (!dataSaver || !limitedConnection)">
                <ion-item-divider>
                    <ion-label>
                        <h2>{{ 'core.accounts' | translate }}</h2>
                    </ion-label>
                </ion-item-divider>

                <core-sites-list [accountsList]="accountsList">
                    <ng-template #siteLabel let-site="site">
                        <p class="text-danger" *ngIf="site.loggedOut">{{ 'core.settings.logintosync' | translate }}</p>
                    </ng-template>

                    <ng-template #siteItem let-site="site">
                        <core-button-with-spinner [loading]="isSynchronizing(site.id)" slot="end" *ngIf="!site.loggedOut">
                            <ion-button fill="clear" (click)="synchronize(site.id)"
                                [attr.aria-label]="'core.settings.synchronizenow' | translate">
                                <ion-icon name="fas-rotate" slot="icon-only" aria-hidden="true" />
                            </ion-button>
                        </core-button-with-spinner>
                        <ion-button fill="clear" (click)="login(site.id)" [attr.aria-label]="'core.login.login' | translate"
                            *ngIf="site.loggedOut" slot="end">
                            <ion-icon name="fas-right-to-bracket" slot="icon-only" aria-hidden="true" />
                        </ion-button>
                    </ng-template>
                </core-sites-list>
            </ng-container>
        </ion-list>
    </core-loading>
</ion-content>
