<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.deviceinfo' | translate }}
            </h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="copyInfo()" [attr.aria-label]="'core.settings.copyinfo' | translate">
                <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-list class="list-item-limited-width">
        <ion-item *ngIf="showDevOptions" detail="true" (click)="gotoDevOptions()">
            <ion-icon name="fas-terminal" slot="start" aria-hidden="true"></ion-icon>
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.developeroptions' | translate }}</p>
            </ion-label>
        </ion-item>
        <ion-item (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.appversion' | translate}}</p>
                <p>{{ deviceInfo.versionName }} ({{ deviceInfo.versionCode }})</p>
            </ion-label>
        </ion-item>
        <ion-item (longPress)="copyItemInfo($event)" (click)="enableDevOptions()">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.compilationinfo' | translate }}</p>
                <p *ngIf="deviceInfo.compilationTime">{{ deviceInfo.compilationTime | coreFormatDate: "LLL Z": false }}</p>
                <p *ngIf="deviceInfo.lastCommit">{{ deviceInfo.lastCommit }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.siteUrl" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.siteinfo' | translate }}<ng-container *ngIf="deviceInfo.isPrefixedUrl">
                        *</ng-container>
                </p>
                <p><a [href]="deviceInfo.siteUrl" core-link auto-login="yes">{{ deviceInfo.siteUrl }}</a></p>
                <p *ngIf="deviceInfo.siteVersion">{{ deviceInfo.siteVersion }}</p>
                <p *ngIf="deviceInfo.siteId">{{ deviceInfo.siteId }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.fileSystemRoot" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.filesystemroot' | translate }}</p>
                <p>
                    <a *ngIf="fsClickable" [href]="deviceInfo.fileSystemRoot" core-link auto-login="no">
                        {{ deviceInfo.fileSystemRoot }}
                    </a>
                </p>
                <p *ngIf="!fsClickable">{{ deviceInfo.fileSystemRoot }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.userAgent" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.navigatoruseragent' | translate }}</p>
                <p>{{ deviceInfo.userAgent }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.browserLanguage" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.navigatorlanguage' | translate }}</p>
                <p>{{ deviceInfo.browserLanguage }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.currentLanguage" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.currentlanguage' | translate }}</p>
                <p>{{ currentLangName }} ({{ deviceInfo.currentLanguage }})</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.locationHref" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.locationhref' | translate }}</p>
                <p>{{ deviceInfo.locationHref }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.deviceType" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.displayformat' | translate }}</p>
                <p>{{ 'core.' + deviceInfo.deviceType | translate }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.deviceOs && deviceOsTranslated" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.deviceos' | translate}}</p>
                <p>{{ deviceOsTranslated }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.screen" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.screen' | translate }}</p>
                <p>{{ deviceInfo.screen }}</p>
            </ion-label>
        </ion-item>
        <ion-item (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.networkstatus' | translate}}</p>
                <p>{{ 'core.' + deviceInfo.networkStatus | translate }}</p>
            </ion-label>
        </ion-item>
        <ion-item (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.wificonnection' | translate}}</p>
                <p>{{ 'core.' + deviceInfo.wifiConnection | translate }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.cordovaVersion" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.cordovaversion' | translate }}</p>
                <p>{{ deviceInfo.cordovaVersion }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.platform" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.cordovadeviceplatform' | translate }}</p>
                <p>{{ deviceInfo.platform }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.osVersion" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.cordovadeviceosversion' | translate }}</p>
                <p>{{ deviceInfo.osVersion }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.model" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.cordovadevicemodel' | translate}}</p>
                <p>{{ deviceInfo.model }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.uuid" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.cordovadeviceuuid' | translate}}</p>
                <p>{{ deviceInfo.uuid }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="deviceInfo.pushId" (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.pushid' | translate }}</p>
                <p>{{ deviceInfo.pushId }}</p>
            </ion-label>
        </ion-item>
        <ion-item (longPress)="copyItemInfo($event)">
            <ion-label class="ion-text-wrap">
                <p class="item-heading">{{ 'core.settings.localnotifavailable' | translate }}</p>
                <p>{{ 'core.' + deviceInfo.localNotifAvailable | translate }}</p>
            </ion-label>
        </ion-item>
    </ion-list>
</ion-content>
