<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>
        <ion-title>{{ 'core.settings.preferences' | translate}}</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 *ngIf="siteInfo" class="ion-text-wrap">
                    <ion-label>
                        <h2>{{siteInfo!.fullname}}</h2>
                        <p>
                            <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0"
                                [wsNotFiltered]="true"></core-format-text>
                        </p>
                        <p>{{ siteUrl }}</p>
                    </ion-label>
                </ion-item>
                <ion-item-divider><ion-label></ion-label></ion-item-divider>

                <ion-item *ngFor="let handler of handlers.items" [ngClass]="['core-settings-handler', handler.class]"
                    [attr.aria-label]="handler.title | translate" detail="true" (click)="handlers.select(handler)" button
                    [attr.aria-current]="handlers.getItemAriaCurrent(handler)">
                    <ion-icon [name]="handler.icon" slot="start" *ngIf="handler.icon" aria-hidden="true">
                    </ion-icon>
                    <ion-label>
                        <h2>{{ handler.title | translate}}</h2>
                    </ion-label>
                </ion-item>

                <ion-card>
                    <ion-item class="ion-text-wrap" *ngIf="spaceUsage">
                        <ion-label>
                            <h2 class="ion-text-wrap">{{ 'core.settings.spaceusage' | translate }} <ion-icon
                                    name="fas-info-circle" color="secondary" [attr.aria-label]="'core.info' | translate"
                                    (click)="showSpaceInfo()"></ion-icon>
                            </h2>
                            <p *ngIf="spaceUsage.spaceUsage">{{ spaceUsage.spaceUsage | coreBytesToSize }}</p>
                        </ion-label>
                        <ion-button fill="clear" color="danger" slot="end" (click)="deleteSiteStorage()"
                            [hidden]="spaceUsage.spaceUsage! + spaceUsage.cacheEntries! <= 0"
                            [attr.aria-label]="'core.settings.deletesitefilestitle' | translate">
                            <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
                        </ion-button>
                    </ion-item>
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <h2>{{ 'core.settings.synchronizenow' | translate }} <ion-icon name="fas-info-circle"
                                    color="secondary" [attr.aria-label]="'core.info' | translate" (click)="showSyncInfo()">
                                </ion-icon>
                            </h2>
                        </ion-label>
                        <ion-button fill="clear" slot="end" *ngIf="!isSynchronizing()" (click)="synchronize()"
                            [title]="siteName" [attr.aria-label]="'core.settings.synchronizenow' | translate">
                            <ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon>
                        </ion-button>
                        <ion-spinner slot="end" *ngIf="isSynchronizing()"></ion-spinner>
                    </ion-item>
                </ion-card>
            </ion-list>
        </core-loading>
    </core-split-view>
</ion-content>
